Automate web apps that use the shadow DOM standard

Certain modern web applications use the Shadow DOM standard to provide style and behavior encapsulation for reusable controls so that the styles and scripts of these controls do not interfere with the rest of the page. It restricts direct access to Shadow DOM objects via normal DOM.

Recorder supports object-based automations of such modern applications ensuring seamless automation and minimizing the risk of automation failures.

To support such automations, you can use the following properties:
  • Shadow-Root Path: Use the Shadow-Root Path property to identify and access the elements within the shadow DOM. This property enables the Recorder to accurately locate and automate the elements that are encapsulated and not directly accessible through the standard DOM. It is represented as a JSON array list of all shadow root elements in string format, defining the boundary within which the Recorder will search for the target element. Variables can be used, but wild card characters (*) are not supported. This is the default property for elements that are within the Shadow DOM.
    Note: Ensure that you select the Shadow-Root path property to automate shadow root elements. While automating shadow root elements within a web page, the Recorder will first search the specific element by ID and then by CSS selector.

    Properties to automate shadow root elements

  • CSS Selector: CSS selectors are used to identify and interact with elements on a web page similar to a DOMXPath. Use CSS Selector property to select elements in the DOM using CSS selector syntax, such as class, id, or tag name. CSS selectors are used to target elements based on their attributes. If your element is within the shadow DOM, then the CSS selectors should be used in conjunction with Shadow-Root Pathproperty. Variables can be used, but wild card characters (*) are not supported.
    Note: This property is available for all HTML elements.
    Important: CSS selectors will function correctly even if you are not using the latest Recorder package version (3.3.1-20241001-095119), as long as the Google Chrome extension version is 3.3.0.0 or later. However, if the Google Chrome extension version is earlier than 3.3.0.0, ensure that you deselect the CSS selector property for your automations to execute successfully.
You can capture and automate the following elements within Shadow DOM:
  • Text box
  • Combo box
  • Check box
  • Button
  • Radio button
  • Link
  • Label
  • List view
  • Table

Supportability

  • This capability is supported for Google Chrome and Microsoft Edge browsers.
  • Frames and IFrames (same and cross-domain) are supported.
  • Supports the Object exists and Object does not exist conditions in the following actions: If, Loop > While action, and Wait > Wait for condition action.
  • Supports all existing HTML controls and their corresponding actions.
  • Supports VMware horizon, Citrix XenApp and XenApp (CR) to XenApp (Business application).

Known behavior

  • Automating shadow root elements using DOMXPath property is not supported.
  • The elements within a closed Shadow root element cannot be accessed.
  • Search element by all algorithm is not be supported.
  • Automating shadow root elements within nested cross-domain Iframes is not supported.
  • When using the Get property action, the Shadow-Root path property will not display any value.