Question

暗影Dom结构： 在上面的影子dom结构中，我们可以使用chlenium和javascript访问各个元素，如下所示：

在Firefox中 // div [@class =＆＃39; style-scope rock-tabs＆＃39;而不是（@hidden）] // div / span [包含（text（），＆＃39;＆＃34; + AttrName +＆＃34;＆＃39;）] /../ preceding-sibling :: div /纸张图标按钮[1] /铁图标[1]

在Chrome中 我们使用以下内容导航到铁图标

WebElement Attrbuttona1=Button2.findElement(By.id("contentViewManager"));
        WebElement eAttrbutton1=expandRootElement(Attrbuttona1);
        WebElement Attrbutton2=eAttrbutton1.findElement(By.id("contentViewManager"));
        WebElement Attrbutton2a=Attrbutton2.findElement(By.xpath("rock-content-view[@name='entity-manage']"));
        WebElement eAttrbutton2=expandRootElement(Attrbutton2a);
        WebElement Attrbutton3=eAttrbutton2.findElement(By.id("content-view-container"));
        WebElement Attrbuttona3=Attrbutton3.findElement(By.id("component"));
        WebElement eAttrbutton3=expandRootElement(Attrbuttona3);
        WebElement Attrbutton4=eAttrbutton3.findElement(By.className("content"));
        WebElement AttrTagName2=Attrbutton4.findElement(By.tagName("rock-tabs"));
        WebElement eaAttrbutton4=expandRootElement(AttrTagName2);
WebElement Attrbutton5=eaAttrbutton4.findElement(By.id(attrType));
WebElement eAttr1=expandRootElement(Attrbutton5);
            WebElement Attr2=eAttr1.findElement(By.className("group-container"));       
            WebElement Attr3=Attr2.findElement(By.tagName("rock-attribute"));
            WebElement eAttr3=expandRootElement(Attr3);
            WebElement Attri4=eAttr3.findElement(By.className("attribute-icons"));
            WebElement Attr4=Attri4.findElement(By.tagName("paper-icon-button"));
            WebElement eAttr4=expandRootElement(Attr4);
            WebElement Attr5=eAttr4.findElement(By.tagName("iron-icon"));

            ((JavascriptExecutor) driver).executeScript("arguments[0].click();",Attr5);

public WebElement expandRootElement(WebElement element) {
        WebElement ele = (WebElement) ((JavascriptExecutor) driver)
                .executeScript("return arguments[0].shadowRoot",element);
        return ele;
    }

现在我想点击属性的铁图标，其中div / span [text（）=＆＃39;产品名称＆＃39;] 以子元素为基础，我需要遍历阴影元素并获取仅与该特定属性相关的图标。

如何继续点击基于不同元素的元素并遍历，所有浏览器都应支持（chrome和firefox）？

Answer 1

在JavaScript中，如果你想＆＃34;遍历＆＃34;来自名为element1的元素：

要获取父元素，请使用其parentElement属性。如果你想要的元素在树中更高，你可以递归地执行它。

element1.parentElement
要获取Shadow DOM元素，请调用getRootNode()以获取Shadow DOM根目录并使用其host属性获取其主机元素。

element1.getRootNode().host

注意：由于它是JavaScript代码，因此应该在Selenium的executeScript()方法中执行。

使用子元素

1 个答案: