Доступ к родительским элементам Shadow DOM с использованием дочерних элементов

Question

Структура Shadow Dom: В приведенной выше структуре shadow dom мы можем получить доступ к отдельным элементам, используя селен и JavaScript, как показано ниже в chrome:

В Firefox:// div [@ class = 'style-scope rock-tabs' и not(@hidden)]//div/span[содержит (text(),'"+AttrName+"')]/../ предыдущий -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()='Product Name'] Взяв дочерний элемент в качестве основы, мне нужно вернуться обратно к теневому элементу и получить значок, связанный только с этим конкретным атрибутом.,

Как я могу продолжить, щелкая элемент на основе другого элемента и вернуться назад, что должно поддерживаться во всех браузерах (chrome и firefox)?

Answer 1

В JavaScript, если вы хотите "вернуться назад" от элемента с именем element1:

• Чтобы получить родительский элемент, используйте его parentElement приписывать. Вы можете сделать это рекурсивно, если требуемый элемент находится выше в дереве.

  element1.parentElement

• Чтобы получить элемент Shadow DOM, вызовите getRootNode() получить корень Shadow DOM и использовать его host атрибут, чтобы получить его хост-элемент.

  element1.getRootNode().host

Примечание: так как это код JavaScript, он должен быть выполнен в Selenium executeScript() метод.