Need help to click on the element under the shadow Root (user-agent) type

Question

As I don't have experience in handling shadow-root element, I am unable to click on this button called "Choose File"

I'm trying to click on "Choose File" button under shadow-root (user-agent) element, can I get help with the code.

Html Code below::

<input class="webbrowse" id="web263">
  #shadow-root (user-agent)
    <input type="button" value="Choose File">
      #shadow-root (user-agent)
        "Choose File"
      </input>
      <span aria-hidden="true">No file chosen</span>
</input>

Thank you all i really appreciate it.

Have you tried any code? Are you getting any error? – itronic1990 Jun 22 '21 at 13:05 — itronic1990, Jun 22 '21 at 13:05
I tried, not working, Not Clicking on the button – AR Rahman Jun 22 '21 at 13:09 — AR Rahman, Jun 22 '21 at 13:09
https://cutt.ly/Qn3RjW3 check this – YaDav MaNish Jun 22 '21 at 14:42 — YaDav MaNish, Jun 22 '21 at 14:42

score 0 · Answer 1 · answered Jun 22 '21 at 13:09

0

make use of JavascriptExecutor

WebElement element = (WebElement) ((JavascriptExecutor)driver).executeScript("return arguments[0].shadowRoot", driver.findElement(By.xpath("//input[value = 'Choose File']")));
element.sendKeys("some keys");

answered Jun 22 '21 at 13:09

cruisepandey

28,520
6
20
38

This code is not working. Exception : No Such Element xpath selector: //input[value='Choose File'] – AR Rahman Jun 22 '21 at 13:16
It won't work for user-agent, unfortunately. – vitaliis Jul 20 '22 at 15:58

score 0 · Answer 2 · answered Jun 22 '21 at 15:26

you have to access the parent node (<input class="webbrowse" id="web263">) and then you can locate your input:

WebElement element = (WebElement) ((JavascriptExecutor)driver).executeScript("return document.querySelector('.webbrowse').shadowRoot.querySelector('input[value=\"Choose File\"]');");

element.click();

vitaliis · Accepted Answer · 2022-07-20T16:02:49.880

I had a very similar problem and could not find a solution with JavascriptExecutor

I tried this method and it never worked. Locator is not a problem.

elem = driver.execute_script('return document.querySelector(".clr-form-control .clr-input").shadowRoot.querySelector("#picker")')
elem.click()

Solution

I'm using Python, but the idea is the same. The solution is based on my case.

What I see in Chrome:

What Selenium Chromium-browser sees:

As you can see that Selenium is not capable to define and consequently click an element in #shadow-root (user-agent) It can only get a text from there. Check this answer to see how Finding shadow DOM text with Selenium and CSS

However, you can click your element, that's located in #shadow-root (user-agent) with ActionChains

This is the example of my code:

expire_field = driver.find_element(By.CSS_SELECTOR, ".clr-form-control .clr-input")
actions = ActionChains(driver)
actions.move_to_element(expire_field)
time.sleep(1)
actions.move_by_offset(73, 0)
time.sleep(1)
actions.click().perform()

A few things to note from it:

The field size with icon I want to click is 18024 px. Icon size is 1717 px. Thus to calculate x offset I used:
180/2 = 90 (the center of the whole input)
90-17 = 73 to calculate the x location of the calendar icon. (note that this amount can be a little different depending on a case)
It's almost not possible to avoid a small time.sleep (at least for this case). Otherwise, there won't be enough time to move mouse cursor. Sleep can be less than 1 second. This is just for example.

This approach always works for me, but I agree, that it's not as stable as using traditional approaches. Read about move_by_offset in detail here.

Need help to click on the element under the shadow Root (user-agent) type

3 Answers3