Visual Comparison Testing with Playwright to Evaluate The Closed Shadow Dom

‍

One common issue that can arise when using Playwright for test automation is encountering the #shadow-root (user-agent) in the DOM. 

‍

If you are unfamiliar with the shadow DOM, it is a technique used in web development to encapsulate the styling and behavior of a DOM element and prevent it from affecting the rest of the document. 

‍

The shadow DOM can be either open or closed, and Playwright automation works effectively with the open shadow DOM, but it has severe limitations when it comes to the closed shadow DOM. In this blog, we’ll cover our recommendation for working with the closed shadow dom. 

‍

Open v. Closed Shadow Dom

There are two types of shadow DOM: open and closed.

‍

An open shadow DOM allows external scripts and styles to access and manipulate the elements inside the shadow root. Developers can use the element.shadowRoot property to access the shadow root and the elements inside it. The open shadow DOM allows developers to use the same styles and scripts for different components.

‍

A closed shadow DOM, on the other hand, encapsulates the elements and styles inside the shadow root and does not allow external scripts and styles to access them. Developers can't use the element.shadowRoot property to access the shadow root, making it difficult to test or manipulate the elements inside of it. The closed shadow DOM provides a higher level of encapsulation and security.

‍

Both open and closed shadow DOMs exist to provide web developers with different levels of encapsulation and control over the elements and styles inside a web component. The open shadow DOM is useful when you want to share styles and scripts across different components, while the closed shadow DOM is useful when you want to create a more secure and self-contained component.

‍

‍

Viewing the Shadow Dom with Chrome Dev Tools

Chrome DevTools have a built-in feature that allows you to toggle on the Shadow DOM view, making it easy to find and inspect elements within the Shadow DOM.

‍

To toggle on the Shadow DOM view in the Chrome DevTools, simply open the Elements panel and click on the "Show user agent shadow DOM" button in the top-right corner of the panel. This will cause the DevTools to reveal the Shadow DOM for the selected element, allowing you to inspect and modify its styles and layout.

‍

Once the Shadow DOM is visible, you can interact with it just like you would with the regular DOM. You can select elements, inspect their styles, and make changes to them in real-time. Additionally, you can use the same search, filter and other tools that you use to inspect the regular DOM to inspect the Shadow DOM.

‍

It's important to note that not all elements have shadow DOM, and if you toggle on the Shadow DOM view on an element that doesn't have one, nothing will happen. Also, the Shadow DOM view is not available in other browser dev tools, but the process of toggling on the Shadow DOM view will be different.

‍

#shadow-root (user-agent)

Playwright can’t work with #shadow-root (user-agent). Skip this section to find solutions or read on to better understand the user-agent function.

‍

A common use case of the closed shadow dom you will see implemented is #shadow-root (user-agent). The User-Agent is a string that is sent by a web browser to a web server with each request, identifying the browser and its capabilities. The User-Agent string can contain information about the browser name, version, and operating system, as well as any additional features or capabilities that the browser supports.

‍

When a web browser requests a webpage, the User-Agent string is included in the request headers, allowing the server to identify the browser and its capabilities. This information can be used to tailor the response to the specific browser, such as by sending different stylesheets or scripts that are optimized for that browser.

‍

One common use case for User-Agent is browser detection and feature detection. For example, a web developer can use the User-Agent string to determine if a user is visiting the site with a mobile browser, and serve a different version of the site that is optimized for smaller screens.

‍

Another use case is to deliver different content based on the browser capabilities. For example, a web developer can use User-Agent to deliver different images or videos based on the browser's support for different image and video formats.

‍

With #shadow-root (user-agent), web developers can use it to encapsulate the structure, style, and behavior of a web component. However, it's important to note that the web component will not be available to the User-Agent, meaning that the web component will not be visible to the web browser and thus can't be used by the User-Agent. So it's necessary to use web component in a proper way that it's visible to the User-Agent and doesn't affect the other parts of the website or application.

‍

Visual-Based Comparison Testing

If you are stuck working with the closed shadow-dom one possible solution is to use the screenshot function to take a screenshot of the element and use playwright to perform visual-based regression testing to confirm that the element matches pixel by pixel.

‍

For instance, imagine that you are working on a website that has a first name field, and you want to test that the field is working properly. You type in the name "Ben" but find that you are unable to interact with the content of the field. In this case, you can take a screenshot of the field and compare it to ensure that it has been properly updated.

‍

The screenshot function is a powerful tool that can be used to capture the entire web page or a specific element on the page. This can be useful for troubleshooting issues or for creating test cases for regression testing. When combined with playwright, you can perform visual-based regression testing, which compares the current version of the website to a previous version to ensure that there are no visual changes.

‍

Example Code

‍

It's important to note that this function is only valuable in specific use cases. For example, if you are testing elements that are constantly changing or are difficult to access, this function may not be the best option. However, it can be a valuable tool for testing specific elements within the closed shadow DOM, as it allows developers to quickly identify any changes that may have been made to these elements.

‍

Conclusion

In conclusion, working with the closed shadow DOM in Playwright can be challenging for testers, but there is a solution available in the form of visual based regression testing. This method involves taking screenshots of the web page before and after changes are made, and then comparing them to ensure that there are no visual differences. This approach allows testers to bypass the limitations of the closed shadow DOM and effectively test the web page without needing to access the elements inside the shadow root. Overall, using visual based regression testing in conjunction with understanding the shadow DOM can make test automation with Playwright more effective and efficient.

‍

‍

‍