How do I find the Xpath for the Shadow root element?

Question

I have a task to complete where I need to write a Selenium script using Java. I'm not able to locate the Xpath to the Agree to all button The steps for script are:

• Navigate to URL https://shop.mercedes-benz.com/en-au/shop/vehicle/srp/demo
• After the above page loads, a Cookie policy dialog box opens on the page.
• Click on the Agree to All button displayed on the Cookies Policy dialog box. (I'm having trouble locating the button here.)

I haven't been able to write the XPath as it's a shadow root element.

Can I please request you to help me complete this Xpath writing for Agree to all button?

Edit: The full code has been removed since we now know the URL.

Answer 1

Ultimately, this question comes down to "How to find any element locator for a website."

To do this, you can use the Developer Tools in Chrome (or any modern web browser).

1. Open a website and locate the element you want (in this case, a button).
2. Right-click on the element and select "Inspect". The dev tools will open with the Elements tab open. The web element you selected will be highlighted in the Elements tab.
3. Right-click in the Elements tab on the highlighted DOM node.
4. Select Copy. A submenu will open.
5. Select Copy Xpath (or any other option like Copy Selector for CSS selectors or Copy Full Xpath).

When I copy Xpath, I get: //*[@id="app"]/div[1]/cmm-cookie-banner//div/div/div[2]/cmm-buttons-wrapper/div/div/wb7-button[2]

When I copy Selector, I get: div > div > div.cmm-cookie-banner__content > cmm-buttons-wrapper > div > div > wb7-button.button.button--accept-all.wb-button.hydrated

When I copy Full Xpath, I get: /html/body/div/div[1]/cmm-cookie-banner//div/div/div[2]/cmm-buttons-wrapper/div/div/wb7-button[2]

We don't know whether the OP has tried any of those or not. And we don't know what version of Selenium the OP is using or the browser version. However, in Selenium 4 and higher, and using Chrome 96 and higher, they added a new method WebElement.getShadowRoot()

The Java example they use is:

WebElement shadowHost = driver.findElement(By.cssSelector("#shadow_host"));

SearchContext shadowRoot = shadowHost.getShadowRoot();

WebElement shadowContent = shadowRoot.findElement(By.cssSelector("#shadow_content"));

In essence, you cannot use Xpath to locate an element in the shadow root. You can only use a CSS Selector. Using this example code from Seleniem.dev, you can now just change the CSS Selectors.

What are the #shadow_host and #shadow_content? The #shadow_host returns a reference to a regular DOM element to use, which is not in the shadow. The #shadow_content is the element inside the shadow-root.