How to automate shadow DOM

Article Overview:

This article will cover how to automate interactions with Shadow DOM elements using XPath and JavaScript Path (JS Path) in test automation. Since standard selectors do not work inside the Shadow DOM, alternative methods must be used to locate and interact with these elements.

Problem Statement:

When automating tests, interacting with Shadow DOM elements is not possible using standard XPath or CSS selectors, as these elements are encapsulated inside a shadow root. To properly locate and automate such elements, XPath and JavaScript Path (JS Path) need to be used.

Solution:

To successfully interact with Shadow DOM elements, you can use a combination of XPath and JavaScript Path to correctly locate elements inside the shadow-root.

Steps to Configure:

1. Identify the Shadow Host Element:

• Use XPath inside test step Menu to locate the element that contains the Shadow DOM.
  
  
  
• Example:
   

  //div[@id='shadow-host']

2. Use JavaScript Path (JS Path) to Reach Shadow DOM Elements:

• Since XPath alone cannot access elements inside the Shadow DOM, JS Path must be used.
  • • Click on Advanced mode toggle within Virtuoso, and then click on Inspect element button to locate the element.
      
      
• Right-click the element inside the shadow-root and select "Copy JS Path".
  
• Example of a copied JS Path:
   

  document.querySelector("#shadow-host").shadowRoot.querySelector("button.submit")
  

3. Use JavaScript Path in Virtuoso:

• In your Virtuoso Journey test steps, use the JS Path to interact with Shadow DOM elements.
  
  
  
• Example step to click a button inside Shadow DOM:
   

  document.querySelector("#shadow-host").shadowRoot.querySelector("button.submit").click();

4. Validate Using XPath and JavaScript Path Together

• You can first use XPath to confirm the presence of the shadow-host, and then use JS Path to interact with elements inside it.
• Simultaneously, you can use other explicit selectors to locate your element as well, as shown in the image below.
  
  

Example Use Case:

Scenario:
A tester needs to automate a submit button inside a Shadow DOM.

Solution:

1. Identify the Shadow Host using XPath.
2. Use JavaScript Path (JS Path) to locate the Submit button inside the shadow-root.
3. Click the button using querySelector().click().
4. Validate the button text using textContent.

By following these steps, you can effectively automate and validate elements inside Shadow DOM in Virtuoso test journeys.