如何使用selenium自动化阴影DOM元素?

问题描述 投票:1回答:2

我正在使用Java Selenium项目进行网页自动化。该网页包含许多我无法使用selenium findElement方法与之交互的多级阴影根DOM元素。

I have tried the following solutions:

  • 深度css(不要使用最新的Chrome浏览器)
  • JS执行官。 (这真的很乏味,维护起来很复杂)

Note:

如果您知道我可以在Selenium Java框架中实现的除上面列出的任何其他解决方案,请传递解决方案。提前致谢 !。

javascript java selenium polymer shadow-dom
2个回答
1
投票

有一个非常好的插件,可以与selenium项目link一起使用。它有助于编写更好,可读和可维护的代码。使用此功能,您可以访问多级阴影DOM(最多4级)。这使用简单的css选择器来识别元素。

WebElement findElement(String cssSelector):如果想要来自DOM的单个元素,请使用此方法

List<WebElement> findElements(String cssSelector):如果你想从DOM中找到所有元素,请使用它

WebElement findElements(WebElement parent, String cssSelector):如果要从父对象DOM中查找单个元素,请使用此选项

List<WebElement> findElements(WebElement parent, String cssSelector):如果要查找父对象DOM中的所有元素,请使用此方法

WebElement getShadowElement(WebElement parent,String selector):如果你想从父DOM中找到一个元素,请使用它

List<WebElement> getAllShadowElement(WebElement parent,String selector):如果要查找父DOM中的所有元素,请使用此选项

boolean isVisible(WebElement element):如果你想找到元素的可见性,请使用它

boolean isChecked(WebElement element):如果要检查是否选中了复选框,请使用此选项

boolean isDisabled(WebElement element):如果要检查元素是否被禁用,请使用此选项

String getAttribute(WebElement element,String attribute):如果你想获得像aria-selected和元素的其他自定义属性这样的属性,请使用它。

void selectCheckbox(String label):使用此选项使用标签选中复选框元素。

void selectCheckbox(WebElement parentElement, String label):使用此选项使用标签选中复选框元素。

void selectRadio(String label):使用此选项使用标签选择无线电元素。

void selectRadio(WebElement parentElement, String label):使用它来使用标签从父DOM中选择无线电元素。

void selectDropdown(String label):使用此选项使用标签选择下拉列表项(如果在UI上仅存在或加载了一个下拉列表,请使用此项)。

void selectDropdown(WebElement parentElement, String label):使用此选项从父DOM中使用label选择下拉列表项。

如何使用此插件:您将不得不依赖于您的项目。

Maven的

<dependency>
  <groupId>io.github.sukgu</groupId>
  <artifactId>automation</artifactId>
  <version>0.0.4</version>
<dependency>

对于位于阴影根dom元素下的html标记

<properties-page id="settingsPage"> 
  <textarea id="textarea">
</properties-page>

您可以在框架中使用此代码来获取textarea元素Object。

  import io.github.sukgu.*;
  Shadow shadow = new Shadow(driver);
  WebElement element = shadow.findElement("properties-page#settingsPage>textarea#textarea");
  String text = element.getText();

1
投票

为了演示使用Selenium v​​3.x,ChromeDriver v2.46和Chrome v73.x的shadow DOM的自动化,有两种方法可以打开url chrome://downloads/并使用executeScript()方法将字符序列pdf作为搜索框中的搜索文本发送。


使用document.querySelector()

作为规范方法,您可以使用document.querySelector()方法如下:

  • 代码块: import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.chrome.ChromeOptions; public class shadow_DOM_search_download_querySelector { public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe"); ChromeOptions options = new ChromeOptions(); options.addArguments("start-maximized"); options.addArguments("disable-infobars"); options.addArguments("--disable-extensions"); WebDriver driver = new ChromeDriver(options); driver.get("chrome://downloads/"); JavascriptExecutor jse = (JavascriptExecutor) driver; WebElement search_box = (WebElement) jse.executeScript("return document.querySelector('downloads-manager').shadowRoot.querySelector('downloads-toolbar#toolbar').shadowRoot.querySelector('cr-toolbar#toolbar').shadowRoot.querySelector('cr-toolbar-search-field#search').shadowRoot.querySelector('div#searchTerm input#searchInput')"); String js = "arguments[0].setAttribute('value','pdf')"; ((JavascriptExecutor) driver).executeScript(js, search_box); } }

可以按步骤顺序重写相同的解决方案,如下所示:

  • 代码块: 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 org.openqa.selenium.chrome.ChromeOptions; public class shadow_DOM { static WebDriver driver; public static void main(String[] args) { System.setProperty("webdriver.chrome.driver", "C:\\Utility\\BrowserDrivers\\chromedriver.exe"); ChromeOptions options = new ChromeOptions(); options.addArguments("start-maximized"); //options.addArguments("disable-infobars"); options.addArguments("--disable-extensions"); driver = new ChromeDriver(options); driver.get("chrome://downloads/"); WebElement root1 = driver.findElement(By.tagName("downloads-manager")); WebElement shadow_root1 = expand_shadow_element(root1); WebElement root2 = shadow_root1.findElement(By.cssSelector("downloads-toolbar#toolbar")); WebElement shadow_root2 = expand_shadow_element(root2); WebElement root3 = shadow_root2.findElement(By.cssSelector("cr-toolbar#toolbar")); WebElement shadow_root3 = expand_shadow_element(root3); WebElement root4 = shadow_root3.findElement(By.cssSelector("cr-toolbar-search-field#search")); WebElement shadow_root4 = expand_shadow_element(root4); WebElement search_term = shadow_root4.findElement(By.cssSelector("div#searchTerm input#searchInput")); String js = "arguments[0].setAttribute('value','pdf')"; ((JavascriptExecutor) driver).executeScript(js, search_term); WebElement search_button = shadow_root4.findElement(By.cssSelector("paper-icon-button#icon")); search_button.click(); System.out.println("Search Button Clicked"); } public static WebElement expand_shadow_element(WebElement element) { WebElement shadow_root = (WebElement)((JavascriptExecutor)driver).executeScript("return arguments[0].shadowRoot", element); return shadow_root; } }

  • 控制台输出: Search Button Clicked

  • 浏览器快照:

shadowDOM


其他

根据Determine the fate of experimental '>>>' combinator的讨论,>>>组合器,它是用于将所有阴影DOM边界穿透到样式的/deep/组合器的替代品,已在Blink标志后面实现,已被弃用。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.