首页 文章

使用子元素访问父Shadow DOM元素

提问于
浏览
2

Shadow Dom structure: 在上面的影子dom结构中,我们可以使用chrome中的selenium和javascript访问各个元素:

In Firefox: // DIV [@类= 'style-scope rock-tabs'而不是(@hidden)] // DIV / Span [含有(文本(),' 1494609 ')] /../前同辈:: DIV /纸张图标按钮[1] /铁图标[1]

In 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()='产品名称']以子元素为基础,我需要遍历阴影元素并获取仅与该特定属性相关的图标 .

如何继续单击基于不同元素的元素并遍历,这应该在所有浏览器(chrome和firefox)中得到支持?

1 回答

  • 0

    在JavaScript中,如果你想从一个名为 element1 的元素"traverse back":

    • 要获取父元素,请使用其 parentElement 属性 . 如果您想要的元素在树中更高,则可以递归地执行此操作 .

    element1.parentElement

    • 要获取Shadow DOM元素,请调用 getRootNode() 以获取Shadow DOM根目录并使用其 host 属性来获取其主机元素 .

    element1.getRootNode().host

    注意:既然是's JavaScript code, it should be executed in Selenium' s executeScript() 方法 .

相关问题