Accessing shadow DOM Elements (polymer) through selenium javascriptExecutor

how to handle shadow root in selenium java
how to handle shadow root in selenium c#
selenium shadow root python
shadow root selenium javascript
xpath shadow dom
shadow dom test automation
selenium switch to shadow root
how to access shadow dom elements

Trying to access the 'shop now' button under the Men's Outer wear section, in https://shop.polymer-project.org/ using the following code on chrome Browser (V51)'s JS console:

document.querySelector('shop-app').shadowRoot.querySelector('shop-home').shadowRoot.querySelector('shop-button');

I tried to access the same element in my automation test, using selenium, line 1 :WebElement shopBtn = (WebElement)((JavascriptExecutor)driver).executeScript("return document.querySelector('shop-app').shadowRoot.querySelector('shop-home').shadowRoot.querySelector('shop-button')");

line 2:shopBtn.click();

This code gives error:

Exception in thread "main" org.openqa.selenium.WebDriverException: unknown error: Cannot read property 'querySelector' of null
  (Session info: chrome=51.0.2704.106)
  (Driver info: chromedriver=2.20.353124 (035346203162d32c80f1dce587c8154a1efa0c3b),platform=Mac OS X 10.11.3 x86_64).

Any help in this regard is highly appreciated.

You didn't specify but it looks like you are using Java. Here's some code that works. JSE is not required.

WebDriver driver = new FirefoxDriver();
String searchText = "Men's Outerwear";
driver.get("https://shop.polymer-project.org/");
WebDriverWait wait = new WebDriverWait(driver, 5);
List<WebElement> sections = wait.until(ExpectedConditions.presenceOfAllElementsLocatedBy(By.cssSelector("div.item")));
for (WebElement section : sections)
{
    if (section.getText().toLowerCase().contains(searchText.toLowerCase()))
    {
        section.findElement(By.linkText("SHOP NOW")).click();
        break;
    }
}

Accessing shadow DOM Elements (polymer) through selenium , Accessing shadow DOM Elements (polymer) through selenium javascriptExecutor - javascript. Are you using shady DOM (default) or shadow DOM on a browser that natively supports it (Chrome)? – Günter Zöchbauer Jun 28 '16 at 5:14 I am using Chrome as it natively supports Shadow DOM.It works very easily on Firefox Browser, becasue of Polyfills, but not on Chrome, though the same code, works well on Chrome Browser's JS console

You have to loop through the shadow root elements one by one to find the respective element.

document.querySelector('nuxeo-app').shadowRoot.querySelector('nuxeo-document-create-button').shadowRoot.querySelector('paper-fab').shadowRoot.querySelector('iron-icon');

A Guide to Working with Shadow DOM using Selenium, Let's continue using our example of locating a Shadow DOM element. / selenium-tutorials/accessing-shadow-dom-elements-with-webdriver. I am using Java Selenium project for web page automation. The web page contains lots of multi-level shadow-root DOM elements that I am not able to interact with using selenium findElement method. I have tried the following solutions: deep css (Don't work on latest chrome browser) JS Executor. (This is really tedious and becomes complex to

I am triying to perform this click and I was able to do it using firefox and using xpath locator

.//shop-button/a[starts-with(@aria-label, 'Men') and contains(@aria-label, 'Outerwear Shop Now')]

I am using Selenium 3.

I am not sure that I am using the correct approach

Cheers

How to automate shadow DOM elements using selenium?, To demonstrate automation of shadow DOM using Selenium v3.x, ChromeDriver v2.46 and WebDriver driver = new ChromeDriver(options); driver.get("chrome:// downloads/"); JavascriptExecutor Using this you can access multi level of shadow DOM (upto 4 levels ) . javascript � Java � selenium � polymer � shadow- dom� As you can see it has both a shadow DOM (avatar) as well as regular DOM elements( Logout link). To access the shadow DOM elements using JavaScript you first need to query the shadow host element and then can access its shadowRoot property. Once you have access to the shadowRoot, you can query the rest of the DOM like regular JavaScript.

Beyond the DOM and Legacy Selenium Selectors {The Rise of , In the above picture we can understand that Shadow DOM allows hidden Shadow which takes the complete access of DOM {Main DOM as well as Shadow DOM}. For this it has to wear a new hat of JavascriptExecutor interface . Selenium WeDriver takes actions on main DOM elements to get login How to locate the#shadow-root(open) elements through cssSelector (3) . @supputuri's answer is the working and accepted answer as the Locator Strategy through document.querySelector() works perfect through google-chrome-devtools

Shadow Root DOM and Custom HTML Tags Automation Using , Your front-end application uses Polymer, which uses a shadow DOM. Selenium doesn't provide any way to deal with shadow DOM elements. Executed the JavaScript using Selenium Webdriver. Illustrated how to click on an element through JavaScriptExecutor, if selenium fails to click on element due to some issue. Generated the 'Alert' window using JavaScriptExecutor. Navigated to the different page using JavaScriptExecutor. Scrolled down the window using JavaScriptExecutor.

Returning shadow DOM elements from script evaluation � Issue , Selenium v3.141; Windows 10. I am testing against https://shop.polymer-project. org/ and trying to access the 'SHOP NOW',� In Selenium Webdriver, we can just use element.click() method to click on any element. But sometimes, when there are any issues performing click on any element, we can use JavaScriptExecutor. Below is the example to perform click using JavaScriptExecutor. package com.pack.click; import org.openqa.selenium.By; import org.openqa.selenium

Comments
  • You should probably use Polymer's DOM api
  • Are you using shady DOM (default) or shadow DOM on a browser that natively supports it (Chrome)?
  • I am using Chrome as it natively supports Shadow DOM.It works very easily on Firefox Browser, becasue of Polyfills, but not on Chrome, though the same code, works well on Chrome Browser's JS console.
  • It works on Firefox Browser becasue of PolyFills, forgot to mention that :( but it doesn't work on Chrome Browser, which has native support for ShadowDom
  • So are you saying that the code above does not work on Chrome?
  • That is correct, it only works on Firefox and not on Chrome.
  • Welcome to Stack Overflow! If you have another question, please ask it by clicking the Ask Question button.