使用聚合物2测试自动化穿透阴影dom（/深/弃用）

Question

目前，我的组织在聚合物1上使用Selenium，Protractor和Mocha，我们使用阴暗的dom。对于验收测试，我们使用/deep/组合器来刺穿DOM。对于聚合物2，/deep/组合器已被弃用。

我的问题：在编写验收测试时，如果不推荐使用DOM组合器，我应该如何刺穿阴影/deep/？

Answer 1

经过对互联网的大量研究，我想出了一个对我来说很好的解决方案。

我遵循的步骤：

1. 使用chrome developer工具查找JS路径。
2. 创建一个包含所有所需阴影的String数组，遍历到目标节点; 3.可重用函数将返回具有目标元素的父元素作为子元素。
3. 使用目标元素的CSS路径执行操作。

请参阅以下代码：

String[] shadowRootCalender = {"tickets-spa","tickets-config-page","#calendar"};
String date="2019-04-16";
FindShadowRootElement(driver, shadowRootCalender).findElement(By.cssSelector("wdat-date[slot='"+date+"']")).click();


public static WebElement FindShadowRootElement(WebDriver driver, String[] shadowRootSelector) {
    WebElement root = null;
    for(int i=0; i<shadowRootSelector.length; i++) {
        if(i==0) {
            isjQueryLoaded(driver);
            root = (WebElement)((JavascriptExecutor)driver).executeScript("return document.querySelector(arguments[1]).shadowRoot", root, shadowRootSelector[i]);
        }else {
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
            root = (WebElement)((JavascriptExecutor)driver).executeScript("return arguments[0].querySelector(arguments[1]).shadowRoot", root, shadowRootSelector[i]);
        }
    }
    return root;
}


public static void isjQueryLoaded(WebDriver driver) {
   // System.out.println("Waiting for ready state complete");
    (new WebDriverWait(driver, 30)).until(new ExpectedCondition<Boolean>() {
        public Boolean apply(WebDriver driver) {
            JavascriptExecutor js = (JavascriptExecutor) driver;
            String readyState = js.executeScript("return document.readyState").toString();
            //System.out.println("Ready State: " + readyState);
            return (Boolean) js.executeScript("return !!window.jQuery && window.jQuery.active == 0");
        }
    });
}       

Answer 2

@Dilip Meghwal简化版的答案：

public static WebElement pierceShadowRoot(String... selectors) {
    WebElement element = null;
    WebElement shadowRoot = null;
    for (String selector : selectors) {
        if (element == null) {
            element = getDriver().findElement(By.cssSelector(selector));
        } else {
            shadowRoot = (WebElement) getDriver().executeScript("return arguments[0].shadowRoot", element);
            element = (WebElement) shadowRoot.findElement(By.cssSelector(selector));
        }
    }
    return element;
}

例如，以下是我使用它来查找Google Chrome清除缓存按钮的方法，其中由于Chrome中使用的Polymer框架，其他方式无效：

WebElement targetElement = pierceShadowRoot("body > settings-ui", "#main", "settings-basic-page",
                "#advancedPage > settings-section:nth-child(1) > settings-privacy-page", "settings-clear-browsing-data-dialog",
                "#clearBrowsingDataConfirm");