Having trouble using Selenium with elements inside a shadow DOM. Is there a specific method to handle this situation? Any guidance on what I might be doing wrong?
Here are the various approaches I've attempted:
var webdriver = require('selenium-webdriver');
var driver = new webdriver.Builder().forBrowser('chrome').build();
driver.get('https://shop.polymer-project.org/');
// Trying to locate shop-app #shadow-root app-header
//
// Works fine without shadow DOMs
driver.findElement(webdriver.By.css('shop-app'));
// Fails due to:
// NoSuchElementError: no such element: Unable to locate element
driver.findElement(webdriver.By.css('shop-app /deep/ app-header'));
// Fails due to:
// NoSuchElementError: no such element: Unable to locate element
driver.findElement(webdriver.By.css('shop-app::shadow app-header'));
// Fails due to:
// TypeError: Custom locator did not return a WebElement
driver.findElement(webdriver.By.js(function() {
return document.querySelector('shop-app /deep/ app-header');
}));
// Fails due to:
// TypeError: Custom locator did not return a WebElement
driver.findElement(webdriver.By.js(function() {
return document.querySelector('shop-app::shadow app-header');
}));
// Fails due to:
// WebDriverError: unknown error: Cannot read property 'querySelector' of null
driver.findElement(webdriver.By.js(function() {
return document.querySelector('shop-app').shadowRoot.querySelector('app-header');
}));
// Fails due to:
// WebDriverError: unknown error: Cannot read property 'header' of undefined
driver.findElement(webdriver.By.js(function() {
return document.querySelector('shop-app').$.header;
}));
Using node 7.1.0 and selenium-webdriver 3.0.1.