Search code examples
seleniumrobotframeworkshadow-dom

Unable to "send keys" or "input text" to a field in shadow dom

I have an issue automating a new login form we are using. The login fields for username and password are in the shadow dom. I can access them using the following code in Selenium/robotframework)

Execute Javascript document.querySelector("body > div.main > div.auth-component login").shadowRoot.querySelector("#username")

I can even "input" the username/password using

Execute Javascript document.querySelector("body > div.main > div.auth-component > login").shadowRoot.querySelector("#username").value="username"

The problem is that this doesn't actually "type" the data into the field, so as far as the form is concerned, nothing has been entered into the field, so the login button never activates.

Is there a way to "send keys" to an input field in the shadow dom, not using the .value() ability?

Dan

shadowdom tree

Solution

  • Okay, after going down a javascript rabbit hole, was able to get this to work.

    So, after using this in Selenium/Robotframework to assign the value to the input field:

    Execute Javascript document.querySelector("body > div.main > section.auth-section > div.auth-component > login").shadowRoot.querySelector("#username").value='username'

    I then had to use another command to trigger the input event listener so the page knew a value had been entered into the field:

    Execute Javascript document.querySelector("body > div.main > section.auth-section > div.auth-component > login").shadowRoot.querySelector("#username").dispatchEvent(new Event('input',{'bubbles':true}))

    Did the same for the password field, and all is right with the world. :)

    Dan