[FIXED] issue with clicking shadow dom anchor tag using selenium and java

Issue

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

Solution

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

Answered By - AbiSaran