我正在使用Java Selenium项目进行网页自动化。该网页包含许多我无法使用selenium findElement
方法与之交互的多级阴影根DOM元素。
如果您知道我可以在Selenium Java框架中实现的除上面列出的任何其他解决方案,请传递解决方案。提前致谢 !。
有一个非常好的插件,可以与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();
为了演示使用Selenium v3.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
根据Determine the fate of experimental '>>>' combinator的讨论,>>>
组合器,它是用于将所有阴影DOM边界穿透到样式的/deep/
组合器的替代品,已在Blink标志后面实现,已被弃用。