Having difficulty reaching elements within a shadow frame using Selenium in Java

I am encountering an issue while trying to access an element within a shadow iframe. I am able to switch to the frame successfully, but when attempting to access elements inside it, I am getting a Stale Element Exception. Any assistance with this would be greatly appreciated. Thank you in advance.

This is the code snippet I have been using:

public void enterCustomerDetails() throws InterruptedException {

        Thread.sleep(2000);
        WebElement root1 = sfdcSelFW.driver.findElement(By.tagName("sb-page-container"));
        WebElement shadowRoot1 = expandRootElement(root1);
        WebElement root2 = shadowRoot1.findElement(By.cssSelector("sb-line-editor"));
        WebElement shadowRoot2 = expandRootElement(root2);
        WebElement root3 = shadowRoot2.findElement(By.cssSelector("sb-le-custom-action-services"));
        System.out.println(root3.getAttribute("id"));
        WebElement shadowRoot3 = expandRootElement(root3);
        WebElement root4 = shadowRoot3.findElement(By.cssSelector("span>sb-popup#popup"));
        WebElement shadowRoot4 = expandRootElement(root4);
        WebElement root5 = shadowRoot4.findElement(By.cssSelector("sb-dialog"));
        WebElement shadowRoot5 = expandRootElement(root5);
        sfdcSelFW.driver.switchTo().frame(shadowRoot5.findElement(By.cssSelector("div>div.sbDialog>div#content>iframe")));
        Thread.sleep(10000);
        WebElement saveBtnEle =  shadowRoot5.findElement(By.cssSelector(" div.slds-grid input"));
        saveBtnEle.click();
}

While executing the step "WebElement saveBtnEle = shadowRoot5.findElement(By.cssSelector(" div.slds-grid input"))" after switching to the frame, I am receiving the following exception:

org.openqa.selenium.StaleElementReferenceException: stale element reference: element is not attached to the page document
  (Session info: chrome=60.0.3112.101)
  (Driver info: chromedriver=2.28.455520 (cc17746adff54984afff480136733114c6b3704b),platform=Windows NT 6.1.7601 SP1 x86_64) (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 92 milliseconds
For documentation on this error, please visit: http://seleniumhq.org/exceptions/stale_element_reference.html
Build info: version: '3.4.0', revision: 'unknown', time: 'unknown'
System info: host: 'AKKSR01-7470', ip: '10.135.116.222', os.name: 'Windows 7', os.arch: 'amd64', os.version: '6.1', java.version: '1.8.0_144'
Driver info: org.openqa.selenium.chrome.ChromeDriver
Capabilities [{applicationCacheEnabled=false, rotatable=false, mobileEmulationEnabled=false, networkConnectionEnabled=false, chrome={chromedriverVersion=2.28.455520 (cc17746adff54984afff480136733114c6b3704b), userDataDir=C:\Users\AKKSR01\AppData\Local\Temp\scoped_dir9256_23445}, takesHeapScreenshot for me...

Here is a sample snippet of the application and the DOM structure for reference

javascriptjavahtmlcssselenium

Answer №1

When trying to locate an element inside a frame, make sure to use the sfdcSelFW.driver.findElement method instead of shadowRoot5.findElement. Here is how it should have been implemented:

WebElement saveBtnEle = sfdcSelFW.driver.findElement(By.cssSelector("div.slds-grid input"));
saveBtnEle.click();

Here is the full corrected code snippet:

public void enterCustomerDetails() throws InterruptedException {

        Thread.sleep(2000);
        WebElement root1 = sfdcSelFW.driver.findElement(By.tagName("sb-page-container"));
        WebElement shadowRoot1 = expandRootElement(root1);
        WebElement root2 = shadowRoot1.findElement(By.cssSelector("sb-line-editor"));
        WebElement shadowRoot2 = expandRootElement(root2);
        WebElement root3 = shadowRoot2.findElement(By.cssSelector("sb-le-custom-action-services"));
        System.out.println(root3.getAttribute("id"));
        WebElement shadowRoot3 = expandRootElement(root3);
        WebElement root4 = shadowRoot3.findElement(By.cssSelector("span>sb-popup#popup"));
        WebElement shadowRoot4 = expandRootElement(root4);
        WebElement root5 = shadowRoot4.findElement(By.cssSelector("sb-dialog"));
        WebElement shadowRoot5 = expandRootElement(root5);
        WebElement frame = shadowRoot5.findElement(By.cssSelector("div>div.sbDialog>div#content>iframe"));
        WebDriverWait wait = new WebDriverWait(sfdcSelFW.driver, 30);
        wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(frame));
        WebElement saveBtnEle = sfdcSelFW.driver.findElement(By.cssSelector("div.slds-grid input"));
        saveBtnEle.click();
    }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using asynchronous data in Angular 2 animations

Currently, I have developed a component that fetches a dataset of skills from my database. Each skill in the dataset contains a title and a percentage value. My objective is to set the initial width value of each div to 0% and then dynamically adjust it t ...

javascriptcssangulartypescriptasynchronous

How can you display a personalized modal or error message using React context while incorporating dynamic content?

Can you please help me figure out how to display a custom modal or error message using react context with dynamic content? I attempted it like this: https://codesandbox.io/s/sleepy-wozniak-3be3j import React, { useState } from "react"; import ErrorConte ...

javascriptreactjsreact-hooks

Absence of Central Function

Hey there, I'm having some trouble running this code. It keeps telling me there's no main function (I tried adding one but then I got errors). Can someone please help me figure out what's wrong and where I should place the main function? He ...

javaprogram-entry-point

Using Django to render multiple images for a post

For the past few days, I have been attempting to provide the admin user with the ability to upload multiple images/slides for each individual post. One idea that came to mind was nesting a for loop inside the posts' for loop so that for every post, al ...

htmldjangodjango-modelsrendering

The absence of a semi-colon in JSLint

I encountered an error message indicating a semicolon is missing, however I am unsure of where to place it. Here is the snippet of code: $('.animation1').delay(350).queue(function(){ $(this).addClass("animate-from-top") }); ...

javascriptjquerydebuggingjslint

Tips for implementing automation of Firefox zoom functionality using the [ctrl]+[+] key combination with robotframework/seleniumlibrary?

I am currently utilizing robotframework(3.1.2) in combination with seleniumlibrary(3.3.1) to automate the zooming of a page using Firefox(69.0.1)/geckodriver(0.25.0). After referencing this documentation, I had high hopes for the Press Keys keyword, but i ...

seleniumrobotframeworkgeckodriver

Guide to activating animation on one element when hovering over another element?

I am setting up an HTML 5 range element and looking to enhance the user experience. Specifically, I want to implement a feature where when the user hovers over the range, the height and width of the thumb should increase to 12 pixels. CSS .myrange::-webk ...

javascriptjquerycsshtmlcss-transitions

Animations with absolute positioning not rendering correctly in Safari

I recently created a basic animation that involves setting an element to "position: absolute" in order to translate it. Everything functions perfectly as intended on Chrome, however, when testing it on Safari, the absolute positioning seems to be completel ...

htmlcssgoogle-chromeanimationsafari

Swapping out the main view for the partial view

Recently, I wrote some jQuery code to fetch data from an action by passing in a dashID. The expected result was to receive HTML containing the relevant information. Unfortunately, my jQuery script is not returning the desired data. Below is the JavaScript ...

javascriptc#jqueryajaxasp.net-mvc-5

Utilize Intellij to extract and store the initial value from the list in a variable with Java

I encountered a problem when attempting to retrieve and save the first value from a list of web elements. Although I wrote an XPATH to retrieve it, the value returned is null. Interestingly, the same XPATH works fine in the Chrome browser. Can someone plea ...

javaseleniumintellij-ideaxpath

Click event to verify, delete, and include class identifier in angular13

Looking to enhance functionality by dynamically adding and removing the 'active' class to 'li a' elements on click. While the current code performs well when clicking from top to bottom, it fails to work in reverse order. component.htm ...

javascriptangulartypescript

Pass information from JavaScript to PHP without using a form

I am trying to pass data from JavaScript to PHP without using an HTML form. The scenario involves the user clicking on a specific HTML div, sending its ID to a JavaScript file, and then transferring it back to a PHP file. How can I achieve this? Below is ...

javascriptphphtmlajax

Is the Bootstrap carousel sliding to the top after clicking the next and previous buttons?

Here is the carousel I created using Bootstrap: <div id="carouselExample" class="carousel slide d-none d-sm-none d-md-block" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active ...

htmlcssbootstrap-4carousel

Identify when a browser tab is closed and determine which specific tab out of all the open tabs was closed

Is there a way to identify when a browser or tab is closed in Angular/JavaScript? I would like to know if there are specific events that can be used for detecting these actions. Any advice, information, or code examples on this topic would be greatly app ...

javascripthtmlcssangular

Setting up lint-staged for Vue projects: A step-by-step guide

After setting up a new Vue3 app using the Vue CLI and configuring Prettier as my linter, I decided to implement commitlint, husky, and lint-staged for validating commit messages and linting the code before pushing it. My Approach Following the instructio ...

javascriptvue.jseslintprettierlint-staged

I am experiencing a CSS display issue on the mobile version of my map leaflet where only the header and footer are visible

I am experiencing a display issue on Android and iPhone due to conflicting css commands. Here's what's happening: I am using React + React Leaflet with a header, main, and footer all set to width 100% within a parent div with body set to width an ...

cssreactjsresponsive-designleaflet

The Fusion of JavaScript Frameworks

Is it considered poor practice for a seasoned developer to build a web application using multiple JS frameworks? For instance, when incorporating AngularJS into a project, and certain tasks could be more efficiently achieved with JQuery, should one opt fo ...

javascriptjqueryangularjs

Utilizing Robot framework and Python to efficiently manage lazy loading of web pages containing dynamic content

I am facing a challenge with a page that contains a dynamically generated table where rows are created dynamically. In my testing process, I am unsure of the exact number of rows to anticipate. I typically create a dictionary based on all the available row ...

pythonseleniumautomated-testslazy-loadingrobotframework

Using jQuery, you can create and add an element to the page when a user clicks

Currently, my webpage contains numerous anchor tags that link to various video files, along with a single div element: <a href="http://www.example.com/example-1.mkv" class="video">1</a> <a href="http://www.example.com/example-2.mkv" class=" ...

javascriptjqueryhtml

Determine the height of an element in JavaScript or jQuery by using the CSS property height: 0;

I'm facing a challenge in determining the actual height of an element, which currently has a CSS height property set to: height: 0; When I check the console, it shows a height of 0, but I'm looking to find the real height of the element. I als ...

javascriptjquerycssheight