Question

目前，我的组织在聚合物1上使用Selenium，Protractor和Mocha，我们使用阴暗的dom。对于验收测试，我们使用var myApp = angular.module('myApp',[]); myApp.controller('CountryCntrl',function ($scope) { $scope.countries = { 'India': { 'Maharashtra': ['Pune', 'Mumbai', 'Nagpur', 'Akola'], 'Madhya Pradesh': ['Indore', 'Bhopal', 'Jabalpur'], 'Rajasthan': ['Jaipur', 'Ajmer', 'Jodhpur'] }, 'USA': { 'Alabama': ['Montgomery', 'Birmingham'], 'California': ['Sacramento', 'Fremont'], 'Illinois': ['Springfield', 'Chicago'] }, 'Australia': { 'New South Wales': ['Sydney'], 'Victoria': ['Melbourne'] } }; });组合器来刺穿/deep/。对于聚合物2，不推荐使用DOM组合子。

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

Answer 1

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

我遵循的步骤：

使用chrome开发人员工具查找JS路径。
创建一个String数组，其中包含要遍历到目标节点的所有所需阴影； 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");

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

2 个答案: