Unable to handle Shadow Element

Question

I am trying to print nested shadow element text using below code but no luck. I have tried to use same code throough console windows and its giving me expected text.

Code :

import org.openqa.selenium.JavascriptException;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;

public class ShadowRoot {
    public static void main(String[] args) throws InterruptedException {


        WebDriver driver;
        ChromeOptions chromeOptions = new ChromeOptions();

        chromeOptions.addArguments("--remote-allow-origins=*", "ignore-certificate-errors");
        driver = new ChromeDriver(chromeOptions);

        // browser type and chromedrover.exe path as parameters
        System.setProperty("webdriver.chrome.driver", "chromedriver.exe");
        String url = "http://watir.com/examples/shadow_dom.html";
        driver.get(url);
        JavascriptExecutor js = (JavascriptExecutor) driver;
        //      js.executeScript("document.querySelector('#shadow_host').shadowRoot.querySelector('input').value='username'");
        js.executeScript("document.querySelector('#shadow_host').shadowRoot.querySelector('#nested_shadow_host').shadowRoot.querySelector('#nested_shadow_content > div').innerText");

        Thread.sleep(10000);

        driver.close();
    }
}

You don't do a console.log in your executeScript. You're just evaluating document.querySelector... but doing nothing with what it gives back. — 5eb, Mar 21 '23 at 11:37
Can you provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the web page you are testing against? — Dennis Kats, Mar 21 '23 at 12:08
Based on [this](https://www.javadoc.io/doc/org.seleniumhq.selenium/selenium-api/2.2.0/org/openqa/selenium/JavascriptExecutor.html) `executeScript` returns a Boolean, Long, String, List, WebElement, null. Can you not store this result in a variable and use system.out.println? Or is the result `null`? — 5eb, Mar 21 '23 at 12:44

score 0 · Answer 1 · answered Mar 21 '23 at 11:41

0

Your script document.querySelector....innerText seems to just be accessing the value and doing nothing with it. If you want to print the value in the browser console, you need to wrap it with console.log().

js.executeScript("console.log(document.querySelector('#shadow_host').shadowRoot.querySelector('#nested_shadow_host').shadowRoot.querySelector('#nested_shadow_content > div').innerText)");

answered Mar 21 '23 at 11:41

Dennis Kats

2,085
1
7
16

Thanks for your time. I already tried that but but its not working – SeleniumUser Mar 21 '23 at 11:47
Are you able to print any DOM content via `executeScript()`? If not, are you sure the script is being executed after the DOM, including shadow elements, has fully loaded? Are you getting any errors in the browser console? – Dennis Kats Mar 21 '23 at 11:50
I am trying to execute script using java code through intellij . please refer above code section – SeleniumUser Mar 21 '23 at 11:58
I understand your goal, but I'm wondering if you have some race condition in your code. Check out the [Waits Documentation](https://www.selenium.dev/documentation/webdriver/waits/) in Selenium to learn more about how this can happen. So does the version with `console.log` print anything to the browser console, like `undefined` or some runtime error? – Dennis Kats Mar 21 '23 at 12:06
I have already tried Thread.sleep(); before posting here but no luck yet – SeleniumUser Mar 21 '23 at 12:42

score -1 · Answer 2 · answered Mar 21 '23 at 16:06

In selenium it returns as webelement you can use .getText() or .getAttribute() to get the value.

JavascriptExecutor js = (JavascriptExecutor) driver;

WebElement shadowElement=js.executeScript("return document.querySelector('#shadow_host').shadowRoot.querySelector('#nested_shadow_host').shadowRoot.querySelector('#nested_shadow_content > div')");
System.out.println(shadowElement.getText());
System.out.println(shadowElement.getAttribute("textContent"));
System.out.println(shadowElement.getAttribute("innerText"));

Inline this should work as well

System.out.println(js.executeScript("return document.querySelector('#shadow_host').shadowRoot.querySelector('#nested_shadow_host').shadowRoot.querySelector('#nested_shadow_content > div')").getText());

Or

System.out.println(js.executeScript("return document.querySelector('#shadow_host').shadowRoot.querySelector('#nested_shadow_host').shadowRoot.querySelector('#nested_shadow_content > div')").getAttribute("textContent"));

Same code I have tested with python works fine. `print(driver.execute_script("return document.querySelector('#shadow_host').shadowRoot.querySelector('#nested_shadow_host').shadowRoot.querySelector('#nested_shadow_content > div')").text)` — KunduK, Mar 21 '23 at 16:06

Unable to handle Shadow Element

2 Answers2