Acting on elements inside a shadow DOM

Learn how to program your bot to do actions on elements that are inside a shadow DOM.

To do actions on elements inside shadow DOMs, you need to use the Run JavaScript command to run JavaScript code on the target web page. The following code snippet illustrate how to do it.

Paste the following code snippet into IBM RPA Studio to see an example of how to do it:

defVar --name URL --type String --value "https://mdn.github.io/web-components-examples/popup-info-box-web-component/"
defVar --name WEB_INSTANCE --type String --value web
defVar --name infoText --type String
// Navigate to "Pop-up info widget - web components" and get text from info pop-up inside a shadow DOM, logging the text.

webStart --name "${WEB_INSTANCE}" --type "Chrome"
webNavigate --url "${URL}"
webExecuteJavaScript --script "return document.querySelector(\"body > form > div > label > popup-info\").shadowRoot.querySelector(\"span > span.info\").innerText;" infoText=value
webClose --name "${WEB_INSTANCE}"
logMessage --message "Info text: ${infoText}" --type "Info"

Script code breakdown

The bot script starts a Google Chrome web browser, navigates to the Pop-up info widget - web components 🡥 page, gets the text from an element inside a shadow DOM, and logs it into IBM RPA Studio's output console. The web page is provided by MDN Web Docs on their article Using shadow DOM 🡥.

The key command to interact with elements of shadow DOMs is webExecuteJavaScript --script "return document.querySelector(\"body > form > div > label > popup-info\").shadowRoot.querySelector(\"span > span.info\").innerText;" infoText=value. It executes JavaScript code to manipulate the page, in this case to get the text from the span HTML element and return it to the infoText string variable. The shadowRoot JavaScript object is what enables the interaction with the shadow DOM elements.

Analyzing the JavaScript code:

  • document.querySelector(\"body > form > div > label > popup-info\") returns the element that contains the shadowDOM.
  • .shadowRoot returns the document object that contains the elements of the shadow Dom.
  • .querySelector(\"span > span.info\") returns the element that matches the selector "span > span.info" that is inside the shadowRoot object.
  • .innerText returns the text inside the HTML element.
  • return at the beginning of the code statement is a special syntax of the Run JavaScript command that sets that the value that the code statement document.querySelector(\"body > form > div > label > popup-info\").shadowRoot.querySelector(\"span > span.info\").innerText returns should load the variable in the output parameter Value, which, in this example, is infoText. Keep in mind that the returned value is always text.

The use of shadowRoot is imperative. To ensure compatibility, make sure your browser is up to date.

Results

The previous code snippet shows how you can set your bot to interact with elements inside a shadow DOM. The example gets text from the HTML element and logs the text. You can use JavaScript to do other actions like clicking elements or setting values to elements, you would just need to change innerText to the appropriate method or property.