How to interact an Element under Shadow-DOM

 Hello , in this blog I will show you to how to interact with an elements which is under under Shadow DOM / Shadow Root.

In HTML, the Shadow DOM (Document Object Model) is a way to encapsulate the structure, style, and behavior of a web component. It allows a component to have its own isolated DOM tree and styles, separate from the rest of the page. This isolation prevents styles and scripts outside the component from affecting it, and vice versa, providing better modularity and encapsulation in web development.

Lets say in the below Example: chrome://downloads/

The search input field is under shadow DOM in HTML 



Copy JS path



and paste on Console

Now use as an element and test whether it allowed to setAttribute ( ) or not



If the above works then we are good to use that in our script...


import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class DownloadShadowDom {
public static void main(String[] args) {


WebDriver driver = new ChromeDriver();
 driver.get("chrome://downloads/");
 driver.manage().window().maximize();
JavascriptExecutor js = (JavascriptExecutor) driver;
WebElement search_element =
(WebElement) js.executeScript("return document.querySelector('downloads-manager')" + ".shadowRoot.querySelector('downloads-toolbar#toolbar')" + ".shadowRoot.querySelector('cr-toolbar#toolbar')" + ".shadowRoot.querySelector('div#centeredContent > #search')" + ".shadowRoot.querySelector('div#searchTerm > input#searchInput')");
        String text = "arguments[0].setAttribute('value','Testing from the Java Selenium Script...')";
         js.executeScript(text,search_element);
 }
}

Comments

Post a Comment

Popular posts from this blog

Heleanium - Web without using Docker

Image
 Heleanium - Web without using Docker Official Heleanium Website: https://healenium.io/docs/overview Youtube Video Link : https://www.youtube.com/watch?v=EF2gM16TnJg 1. We need install first :  Java 11+ , Python ( 3.12.0 )&  PostgreSQL ( prefer to use latest 16 version ) 2. Once PostgersSQL installed ( make sure during installation whatever you put the password for the same you remember / noted down, need this is in 3rd step), open SQL Shell ( psql ) from the applications, as shown below: 3. Once you open the Shell , hit ENTER till Username & provide same Password as in the step 2.  4. Now , feed one by one on the above terminal, this will create the DB ,  User & Schema for you: 4.1 : CREATE DATABASE healenium;      4.2 : CREATE USER healenium_user WITH ENCRYPTED PASSWORD 'YDk2nmNs4s9aCP6K' ;      4.3 : GRANT ALL PRIVILEGES ON DATABASE healenium TO healenium_user;      4.4 : A...
Read more

The self healing automation framework - Healenium Updated Dec2023

Image
Healenium  Architecture   Healenium  Official Github Link :        https://github.com/healenium And this complete project E2E available at my repo as well      https://github.com/madanankurmalviya/HealeniumTestOnJavaSeMvnProject.git Youtube demo for complete setup :       https://www.youtube.com/watch?v=Xg_sqE4VUyU 1. Healenium - Web from Maven Reporsitory: <dependency>     <groupId>com.epam.healenium</groupId>     <artifactId>healenium-web</artifactId>     <version>3.4.8</version> </dependency> 2. Check for Selenium-Java latest dependencies: <!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java --> <dependency>     <groupId>org.seleniumhq.selenium</groupId>     <artifactId>selenium-java</artifactId>     <version>4.16.1</version> </depend...
Read more

Concept of creating the Self Healing Model - ( InProgress )

Image
Hey folks, I'm currently working on implementing the concept of self-healing. Below is the initial draft of my script. I'll keep you posted on my progress and provide updates once I complete this task : Step 1: Utilize Selenium to scrape the current page and save the elements in a CSV file as outlined below. Step 2: Capture the attributes of each element and store them in a database. This can be done either manually or by implementing a script to update the scraped elements into the database. Step 3: Implement Self-Healing mechanisms for situations where the attribute of an element undergoes changes. Tests should be capable of identifying the correct element based on its alternative attributes, employing Machine Learning (ML) techniques. a. Train the ML model to determine the probability of each element. b. Training requires two datasets in CSV format. Step 4: Initiate model training exclusively when element-not-found exceptions (NoSuchElementException) occur. This ensures that...
Read more