Javascript 使用硒测试聚合物元素和阴影DOMs
我在使用Selenium处理阴影DOM中的元素时遇到问题。这有什么诀窍吗?我做错什么了吗 以下是我的各种尝试:Javascript 使用硒测试聚合物元素和阴影DOMs,javascript,selenium,polymer,shadow-dom,Javascript,Selenium,Polymer,Shadow Dom,我在使用Selenium处理阴影DOM中的元素时遇到问题。这有什么诀窍吗?我做错什么了吗 以下是我的各种尝试: 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 #
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;
}));
我正在运行node 7.1.0和selenium webdriver 3.0.1。您应该使用
driver.executeScript()
方法
然后使用“客户端”Javascript访问影子DOM
请看中的示例。我认为最好使用selenium选择器并注入脚本以获取阴影根:
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()
为了更好地理解这一点,我刚刚在Chrome的下载页面中添加了一个可测试的示例,单击搜索按钮需要打开3个嵌套的阴影根元素:
使用其他答案中建议的相同方法的缺点是,它会对查询进行硬编码,可读性较差,并且您无法将中间选择用于其他操作:
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()
我在SO上看到的最好答案之一(+1)
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()