Question 54136 in Javascript Question posted in
A very good W3school tutorial can be found here.

Unable to handle Shadow Element – Javascript

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.

enter image description here

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

enter image description here

Tags:

2

Answers


  1. 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)");
    Login or Signup to reply.
  2. 0

    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"));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search