Using Selenium to test Polymer elements and shadow DOMs

Question

I'm having problems using Selenium with elements that are inside a shadow DOM. Is there a trick to this? Am I doing something wrong?

Here's my variety of attempts:

var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().forBrowser('chrome').build();

driver.get('https://shop.polymer-project.org/');

// Goal is to find shop-app #shadow-root app-header
//

// This is OK; no shadow DOMs
driver.findElement(webdriver.By.css('shop-app'));

// This fails because:
// NoSuchElementError: no such element: Unable to locate element
driver.findElement(webdriver.By.css('shop-app /deep/ app-header'));

// This fails because:
// NoSuchElementError: no such element: Unable to locate element
driver.findElement(webdriver.By.css('shop-app::shadow app-header'));

// This fails because:
// TypeError: Custom locator did not return a WebElement
driver.findElement(webdriver.By.js(function() {
    return document.querySelector('shop-app /deep/ app-header');
}));

// This fails because:
// TypeError: Custom locator did not return a WebElement
driver.findElement(webdriver.By.js(function() {
    return document.querySelector('shop-app::shadow app-header');
}));

// This fails because:
// WebDriverError: unknown error: Cannot read property 'querySelector' of null
driver.findElement(webdriver.By.js(function() {
    return document.querySelector('shop-app').shadowRoot.querySelector('app-header');
}));

// This fails because:
// WebDriverError: unknown error: Cannot read property 'header' of undefined
driver.findElement(webdriver.By.js(function() {
    return document.querySelector('shop-app').$.header;
}));

I'm running node 7.1.0 and selenium-webdriver 3.0.1.

Answer 1

I think is better to use the selenium selectors and inject the script just to take the shadow root:

def expand_shadow_element(element):
  shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
  return shadow_root

outer = expand_shadow_element(driver.find_element_by_css_selector("#test_button"))
inner = outer.find_element_by_id("inner_button")
inner.click()

To put this into perspective I just added a testable example with Chrome's download page, clicking the search button needs open 3 nested shadow root elements:

import selenium
from selenium import webdriver
driver = webdriver.Chrome()


def expand_shadow_element(element):
  shadow_root = driver.execute_script('return arguments[0].shadowRoot', element)
  return shadow_root

driver.get("chrome://downloads")
root1 = driver.find_element_by_tag_name('downloads-manager')
shadow_root1 = expand_shadow_element(root1)

root2 = shadow_root1.find_element_by_css_selector('downloads-toolbar')
shadow_root2 = expand_shadow_element(root2)

root3 = shadow_root2.find_element_by_css_selector('cr-search-field')
shadow_root3 = expand_shadow_element(root3)

search_button = shadow_root3.find_element_by_css_selector("#search-button")
search_button.click()

Doing the same approach suggested in the other answers has the drawback that it hard-codes the queries, is less readable and you cannot use the intermediary selections for other actions:

search_button = driver.execute_script('return document.querySelector("downloads-manager").shadowRoot.querySelector("downloads-toolbar").shadowRoot.querySelector("cr-search-field").shadowRoot.querySelector("#search-button")')
search_button.click()

Answer 2

You should use the driver.executeScript() method.

Then access the Shadow DOM with "client" Javascript.

Look at this example in another SO answer.