Handling Shadow DOM in Selenium

If there is a shadow element in the webpage we cannot interact directly with selenium code, normally if we locate the element by finding the Element method then it will throw NosuchElement Exception in order to overcome this situation please read the below-mentioned context.

How to identify Shadow DOM exists?

The shadow DOM can be identified by a shadow root that is enclosed somewhere in the middle of the HTML structure.

Section: #shadow-root (open) is implemented before the start of every Shadow DOM.

In HTML there can be multiple shadow root sections each section’s shadow properties are completely hidden from the actual Main DOM.

So, we cannot access the shadow elements directly from Main DOM

Handling Shadow DOM elements

There are two ways to handle/locate shadow elements in selenium by

  1. Using JavaScript Executor
  2. Shadow Libraries by Maven dependency
  3. Using the JavaScript Executor interface we can execute shadow DOM query scripts in our selenium code by the executeScript method.

SYNTAX:

document.querySelector(selector).shadowRoot.querySelector(shadowSelector)

document- an object of Main DOM that provides access to all HTML elements

shadow root -the object of Shadow DOM that provides access only to Shadow elements

selector-represents CSS selector of the main DOM

shadowSelector -represents CSS selector of the shadow DOM

Selenium Syntax :

JavascriptExecutor js = (JavascriptExecutor) driver;

js.executeScript(queryScript)

Read Also:- Process Java Script Executor in Selenium Test Automation

Here we are downcasting Javascript Executor with driver reference in order to make executeScript method available to current driver reference.

Test Scenario: Automate Clear data function in Chrome browser

  1. Open the Chrome browser
  2. Maximize the browser window
  3. Navigate to the chrome settings page
  4. Click on Privacy and security
  5. Click on Clear browsing data
  6. Click on clear data

Create a class with the name HandleShadowDomByJavascript and paste the below code

public class HandleShadowDomByJavascript {

public static void main(String[] args) {

WebDriverManager.chromedriver().setup();

WebDriver driver= new ChromeDriver();

driver.manage().window().maximize();

driver.get(“chrome://settings”);

JavascriptExecutor js = (JavascriptExecutor) driver;

String clickPrivacySafetySelector=”document.querySelector(\”body > settings-ui\”).shadowRoot.querySelector(\”#leftMenu\”).shadowRoot.querySelector(\”a[href=’/privacy’]\”).click()”;

js.executeScript(clickPrivacySafetySelector);

String clickClearDataSelector=”document.querySelector(\”body > settings-ui\”).shadowRoot.querySelector(\”#main\”).shadowRoot.querySelector(\”settings-basic-page\”).shadowRoot.querySelector(\”#basicPage > settings-section:nth-child(9) > settings-privacy-page\”).shadowRoot.querySelector(\”#clearBrowsingData\”).shadowRoot.querySelector(\”#label\”).click()”;

js.executeScript(clickClearDataSelector);

String clickCancelSelector=”document.querySelector(\”body > settings-ui\”).shadowRoot.querySelector(\”#main\”).shadowRoot.querySelector(\”settings-basic-page\”).shadowRoot.querySelector(\”#basicPage > settings-section:nth-child(9) > settings-privacy-page\”).shadowRoot.querySelector(\”settings-clear-browsing-data-dialog\”).shadowRoot.querySelector(\”#clearBrowsingDataConfirm\”).click()”;

js.executeScript(clickCancelSelector);

}

  1. We can access shadow libraries by adding the Maven dependency in our pom.xml file

<dependency>

<groupId>io.github.sukgu</groupId>

<artifactId>automation</artifactId>

<version>0.1.3</version>

</dependency>

Shadow shadow = new Shadow(driver);

shadow.findElement(cssSelector);

shadow.findElementByXPath(xpath);

Read Also:- Mobile Test Automation Using Appium Python

1.findElement ->in argument pass css selector

2.findElementByXpath -> in argument pass xpath

public class HandleShadowDomByShadowLib {

public static void main(String[] args) {

WebDriverManager.chromedriver().setup();

WebDriver driver= new ChromeDriver();

driver.manage().window().maximize();

driver.get(“chrome://settings”);

Shadow shadow = new Shadow(driver);

shadow.findElementByXPath(“//a[contains(text(),’Privacy and security’)]”).click();

shadow.findElementByXPath(“//div[contains(text(),’Clear browsing data’)]”).click();

shadow.findElementByXPath(“//cr-button[contains(text(),’Clear data’)]”).click();

}

From the above code, chrome browser opens with a maximized window navigate to the chrome settings page and it performs clear data actions with the help of Javascript Executor / Shadow Libraries in our test automation script

Originally published at https://www.devstringx.com on March 07, 2022.

--

--

--

Devstringx Technologies is highly recommended IT company for custom software development, mobile app development and automation testing services

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Node.js & WebSocket — Simple chat tutorial

Basic Web development tutorial with implementing a simple Weather Forecast service. (For beginner)

Most Common JavaScript JOB Interview Questions

Overwolf, Angular and (CL)I // Part 2

JSON Websocket client using Spring Boot

BAND | bitkub.com/market/BAND

Set up webpack/babel/TypeScript/polyfills to work with IE11

https://medium.com/@gari.network @

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Devstringx Technologies

Devstringx Technologies

Devstringx Technologies is highly recommended IT company for custom software development, mobile app development and automation testing services

More from Medium

Assertions in Selenium WebDriver

Dynamic search element by XPath axes

Ultimate Guide On GitLab CI Automation Testing Tool — Devstringx

Database Testing using Selenium WebDriver.