How to handle Shadow DOM in Selenium || Normal Method vs SelectorsHub ||Selenium Automation

In this session you will learn about Shadow DOM, how to handle Shadow DOM and how Selectors Hub can save your time in handling shadow DOM

You will learn below items from this Session
What is DOM
What is Shadow DOM
How to handle Shadow DOM
How SelectorsHub Saves time in handling Shadow DOM

Important Notes :
Shadow DOM is a Isolated DOM inside a DOM and have its own scope and not part of original DOM

Shadow DOMs cannot be handled using XPaths
Shadows DOMs can be handled using Javascript and CSS
Takes more time to write Paths compared to other elements
SelectorsHub can save time in handling Shadow DOMs

You can watch below playlist to learn about Selectors Hub
   • SelectorsHub  

Download link for getting code
github.com/knowledgeshare-technologies/SeleniumBas…

***********************************************************
Handling Shadow DOM - Normal Method
***********************************************************
package shadowDom;

import java.util.concurrent.TimeUnit;

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;

import com.gargoylesoftware.htmlunit.javascript.background.JavaScriptExecutor;

import io.github.bonigarcia.wdm.WebDriverManager;

public class HandlingShadowDomNormalMethod {

public static void main(String[] args) throws InterruptedException
{

WebDriverManager.chromedriver().setup();
WebDriver driver=new ChromeDriver();
driver.manage().timeouts().implicitlyWait(20,TimeUnit.SECONDS);

driver.get("books-pwakit.appspot.com/");
driver.manage().window().maximize();


// 1- Shadow Host

WebElement root_ShadowHost=driver.findElement(By.cssSelector(
"book-app[apptitle='BOOKS']"));

// Use JavaScript statement to get the Shadow root

JavascriptExecutor js= (JavascriptExecutor) driver; WebElement shadowDOM=
(WebElement) js.executeScript("return arguments[0].shadowRoot",
root_ShadowHost);

//2 - Get app header
WebElement appheader=shadowDOM.findElement(By.tagName("app-header"));

//3 - Get app toolar
WebElement apptoolbar=appheader.findElement(By.cssSelector("app-toolbar.toolbar-bottom"));

//4 Get book input decorator
WebElement bookinputdecorator=apptoolbar.findElement(By.tagName("book-input-decorator"))
;

//5 Get the input search box
WebElement searchBox=bookinputdecorator.findElement(By.cssSelector("input[aria-label='Search Books']"));

searchBox.sendKeys("Knowledge Share");

System.out.println("Succesfully typed in to Search box ");

/*

//This Element is inside single shadow DOM. String cssSelectorForHost1 =
"book-app[apptitle='BOOKS']"; Thread.sleep(1000); WebElement
shadowDomHostElement =
driver.findElement(By.cssSelector("book-app[apptitle='BOOKS']")); WebElement
last = (WebElement) ((JavascriptExecutor)
driver).executeScript("return arguments[0].shadowRoot",
shadowDomHostElement); Thread.sleep(1000);
last.findElement(By.cssSelector("input[aria-label='Search Books']")).
sendKeys("Knowledge Share");

*/


}

}

***********************************************************
Handling Shadow DOM - SelectorsHub Method
***********************************************************

package shadowDom;

import java.util.concurrent.TimeUnit;

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;

import io.github.bonigarcia.wdm.WebDriverManager;

public class HandlingShadowDom {

public static void main(String[] args) throws InterruptedException
{

WebDriverManager.chromedriver().setup();
WebDriver driver=new ChromeDriver();
driver.manage().timeouts().implicitlyWait(20,TimeUnit.SECONDS);

driver.get("books-pwakit.appspot.com/");


//This Element is inside single shadow DOM.
String cssSelectorForHost1 = "book-app[apptitle='BOOKS']";
Thread.sleep(1000);
WebElement shadowDomHostElement = driver.findElement(By.cssSelector("book-app[apptitle='BOOKS']"));
WebElement last = (WebElement) ((JavascriptExecutor) driver).executeScript("return arguments[0].shadowRoot", shadowDomHostElement);
Thread.sleep(1000);
last.findElement(By.cssSelector("input[aria-label='Search Books']")).sendKeys("Knowledge Share");
}

}
****************************
#selenium,#SelectorHub #ShadowDOM