Locate Elements through Shadow DOM in Chrome Selenium?



  • I currently have an automation tool built using Python. Currently, the tool serves the custom application my company has built on Salesforce. Salesforce released a Winter 2020 version, and implemented the Shadow DOM and being unable to locate elements through the Shadow DOM with javascript or the normal CSS selectors in Selenium. I cannot use Firefox (ignores the Shadow DOM which is one solution, but not preferred) because the RAM usage over the time of testing increases and maxes out. I would like to stick to google chrome and selenium, but I need to find a way to locate elements through the Shadow DOM.

    Does anyone have any experience with this? I know the /deep/ has been deprecated, so any other information would greatly help.

    Thanks ahead of time.

    EDIT

    JQuery locates elements

    enter image description here

    In normal Google Chrome, I can query for the element just fine.

    In the browser for selenium, the element returns null?? This doesn't make sense

    EDIT 2

    I learned that JQuery is not loaded into the browser, but instead, is an alias for document.queryselector. If that is the case, why is it pulling the element in the shadow dom if it's just an alias and document.querySelector returns null?

    Found the article here



  • When we try to find Shadow DOM elements using selenium locators, it will throw 'NoSuchElementException'. To access these Shadow DOM elements, we need to use JavascriptExecutor executeScript() function. If you look at the DOM structure, every element that has ShadowDOM also has a shadowRoot property which describes the underlying elements.

    public WebElement expandRootElement(WebElement element) {
        WebElement ele = (WebElement) ((JavascriptExecutor)driver).executeScript("return arguments[0].shadowRoot", element);
        return ele;
    }
    ...
    .
    ...
    WebElement root1 = driver.findElement(By.tagName(<some tag name>));
    //Get shadow root element
    WebElement shadowRoot1 = expandRootElement(root1);
    WebElement actualHeading = root1.findElement(By.cssSelector(<Some Selector>));
    

    See if this worksout for you



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2