CODEWITHSUNDEEP
seleniumshadow-dom
Navya
Navya

Reputation: 31

Accessing parent Shadow DOM elements using child elements

Shadow Dom structure: In the above shadow dom structure we are able to access the individual elements using the selenium and javascript as below in chrome:

In Firefox: //div[@class='style-scope rock-tabs' and not(@hidden)]//div/span[contains(text(),'"+AttrName+"')]/../preceding-sibling::div/paper-icon-button[1]/iron-icon[1]

In Chrome: We are using the below to navigate to the iron-icon

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;
    }

Now i want to click on iron icon for attribute where div/span[text()='Product Name'] Taking the child element as a base and i need to traverse back to shadow element and get the icon related to only that particular attribute.

How can i proceed in clicking the element based on a different element and traverse back, which should be supported in all browsers(chrome and firefox)?

Upvotes: 2

Views: 4581

Answers (1)

Supersharp
Supersharp

Reputation: 31229

In JavaScript, if you want to "traverse back" from an element called element1:

  • To get a parent element, use its parentElement attribute. You can do it recursively if the element you want is higher in the tree.

    element1.parentElement

  • To get the Shadow DOM element, invoke getRootNode() to get the Shadow DOM root and use its host attribute to get its host element.

    element1.getRootNode().host

Note: Since it's JavaScript code, it should be executed in Selenium's executeScript() method.

Upvotes: 1

Related Questions