Don't Mask Dynamic Elements in Playwright Before You Read This

To achieve reliable visual testing, it’s crucial to prevent unreliable tests by effectively hiding dynamic parts of your application.

When dealing with elements prone to change, like ad banners, moving text inputs, GIFs, and user cursors, it’s essential to use dynamic element masking. This means hiding these elements before taking screenshots during testing to avoid false results due to dynamic content.

Let’s use an example and imagine we want to assess the layout of the Facebook Stories section through visual testing.

The challenge here is that the images and titles in the stories tray element will differ whenever you reload the page.

This isn’t ideal for visual testing.

Modern testing frameworks provide methods for this. For instance, Playwright lets you hide specific page elements when taking screenshots by completely covering its bounding box with a #FF00FF color.

Let’s try to hide all <img> elements before making a screenshot.

The problem with such an approach is that it completely covers your element bounding box, so since every HTML element is a rectangle, you will see something like that.

Default Playwright masking is excellent for simple rectangle ad banners and buttons, but you want something better and more accurate for complex layouts like this Facebook Stories section.

For instance, you can toggle the visibility of images in this section because they aren’t necessary for layout testing. To implement this, please review the script provided below.

This script hides all <img> elements and changes the story titles into “test” because we don’t need to check the text value, just a layout.

After executing such a script, the section will resemble a clean layout that you can capture in a screenshot and use for comparison in your visual tests.

If you don’t want to hide such elements or want to highlight hidden areas, you can fill it with any color, i.e., #FF00FF, using the next script:

Embracing this technique ensures stable and trustworthy visual tests, allowing you to detect real issues without distractions from transient visual elements.

This approach is appropriate not only for Playwright, but for any other frameworks like Selenium or Cypress.