使用子元素访问父阴影DOM元素

Question

shadowdom结构：在上面的shadowdom结构中，我们可以在chrome中使用selenium和html" target="_blank">javascript访问各个元素，如下所示：

在Firefox中：//div[@class='Style-Sconk-tabs'而不是（@隐藏）]//div/span[包含（text（），'AttrName'）]/.../前驱兄弟姐妹::div/puch-icon-按钮[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（）='产品名称']以子元素为基础，我需要遍历回阴影元素，并获得只与该特定属性相关的图标。

我怎样才能继续点击基于不同元素的元素并遍历回来，这应该在所有浏览器（chrome和火狐）支持？

Answer 1

在JavaScript中，如果要从名为element1的元素“向后遍历”：

>

要获取父元素，请使用其parentElement属性。如果所需元素在树中的位置较高，则可以递归地执行此操作。

element1.parent元素

要获取shadowdom元素，请调用getRootNode（）获取shadowdom根，并使用其host属性获取其主机元素。

element1。getRootNode（）。主机

注意：因为它是JavaScript代码，所以应该在Selenium的executeScript（）方法中执行。