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 to avoid false results due to dynamic content. testing Let’s use an example and imagine we want to assess the layout of the Stories section through visual testing. Facebook 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. let mask_locator = page.locator("//img")
await page.screenshot({path: 'masked.png', mask: [mask_locator]}) The problem with such an approach is that it completely covers your element bounding box, so since every element is a rectangle, you will see something like that. HTML Default Playwright masking is excellent for simple rectangle ad banners and buttons, but you want something better and more accurate for complex layouts. 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. // Get all img elements on the page
var imgElements = document.getElementsByTagName('img');

// Loop through each img element and hide it
for (var i = 0; i < imgElements.length; i++) {
    imgElements[i].style.display = 'none';
}
// Get the element with aria-label="stories tray"
var storiesTray = document.querySelector('[aria-label="stories tray"]');
// Check if the stories tray element exists
if (storiesTray) {
    // Get all span elements inside the stories tray
    var spanElements = storiesTray.querySelectorAll('span');
    // Loop through each span element inside the stories tray and replace its text content with "test."
    spanElements.forEach(function(span) {
        span.textContent = 'test';
    });
} 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: // Get all img elements on the page
const imgElements = document.querySelectorAll('img');

// Loop through each img element and set its background color to red
imgElements.forEach((img) => {
  img.style.backgroundColor = '#FF00FF';
  img.src = ''; // Optional: Remove the image source to hide the original image
});

// Get the element with aria-label="stories tray"
var storiesTray = document.querySelector('[aria-label="stories tray"]');
// Check if the stories tray element exists
if (storiesTray) {
    // Get all span elements inside the stories tray
    var spanElements = storiesTray.querySelectorAll('span');
    // Loop through each span element inside the stories tray and replace its text content with "test"
    spanElements.forEach(function(span) {
        span.textContent = 'test';
    });
} Embracing this technique ensures stable and trustworthy visual tests, allowing you to detect real issues without distractions from transient visual elements. Also published here.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Testing REST API In Playwright

How to Mask Dynamic Elements in Automated Visual Tests

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Getting Your Way Around With Common XPath Methods

11 Best Automation Testing Tools to Try in 2021

145 Stories To Learn About Test Automation

Python-Powered Performance Testing for QA Testers: A Beginner's Guide to Cloud API Load Testing

57 Stories To Learn About Automated Testing

Getting Your Way Around With Common XPath Methods

11 Best Automation Testing Tools to Try in 2021

145 Stories To Learn About Test Automation

Python-Powered Performance Testing for QA Testers: A Beginner's Guide to Cloud API Load Testing

57 Stories To Learn About Automated Testing

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps