issue with clicking shadow dom anchor tag using selenium and java

Question

I am learning selenium. i was trying to automate an hyper link click in developer.salesforce.com website. i wrote following code and when i execute the code i am getting JavascriptException in shadowContent.click() function saying Cannot read properties of undefined (reading 'defaultView') Element: [[org.openqa.selenium.remote.ShadowRoot@327af41b] -> css selector: .button.variant_primary.size-hero.font-display.icon-right]

ChromeDriver driver = new ChromeDriver();
    driver.get("https://developer.salesforce.com");
    WebElement shadowHost = driver.findElement(By.xpath("//dx-button[@href='/get-started']"));
    SearchContext shadowRoot = shadowHost.getShadowRoot();
    WebElement shadowContent = shadowRoot.findElement(By.cssSelector(".button.variant_primary.size-hero.font-display.icon-right"));
    shadowContent.click();

Answer 1

If you want to click on Get Started Button, you can try like below:

Frist try like:

driver.findElement(By.xpath("//dx-button[@href='/get-started']")).click();

In case if you get the same error then share the error with us.

Or you can try the below:

driver.manage().window().maximize();

JavascriptExecutor js = (JavascriptExecutor) driver; 

WebElement getStartedButton = (WebElement) js.executeScript("return document.querySelector('#maincontent > div > div > div > dx-button').shadowRoot.querySelector('a')");
// now you can click on get Started Button ...
getStartedButton.click();

Answer 2

Try this:

I tried, it is working fine.

    JavascriptExecutor js = (JavascriptExecutor) driver;
            
    WebElement rootEle = driver.findElement(By.xpath("//dx-button[@href='/get-started']"));
            
//  SearchContext expandedRooEle = (SearchContext) js.executeScript("return arguments[0].shadowRoot", rootEle);
//  (Or)
    SearchContext expandedRooEle = rootEle.getShadowRoot();
            
    WebElement button = expandedRooEle.findElement(By.cssSelector(".button.variant_primary.size-hero.font-display.icon-right"));
    js.executeScript("arguments[0].click();", button);