So one of the good features of any test automation platform is the ability to take screenshots – of viewport, full page and of a specific element. Selenium had the first two and with Selenium 4, we have the third too. Playwright, on the other hand comes with these three features out of the box.
Apart from these features, the screenshot method in Playwright can be used to mask any specific locator when taking a screenshot. What does that mean?
It means when Playwright takes the screenshot, then that element will be covered using a pink overlaid. This is documented in the documents here
mask Array<Locator> (optional)#
Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink box #FF00FF that completely covers its bounding box.
Let’s see this in action. We head over to our practice website of SelectorsHub, which is my fav test website for testing complex scenarios.
Let’s test that we want to mask the h2 text that is written on the page
Now let’s say that we want to mask this locator
let mask_locator = await page.locator("a[href='https://hubs.la/Q01nPnlN0%20']");
Btw, I am using SelectorsHub is getting the locators in my tests. It’s a very nifty extension for getting the locators. We will use the mask option in the screenshot method
We get the screenshot with the locator masked
So, in the screenshot, we can mask the locator in this way. Now if you see the documentation, it says you can pass an array of locators, which mean we can pass as much locators as we want to obscure in our screenshot.
Let’s say we want to obscure the locator with the text Checkout here .
We get the screenshot with both locators masked
So as you can see we can obscure the locators that you want to if you do not want to show those elements in your screenshots.
If you want me to keep posting Playwright content, please leave me a like or comment on the post.
TESTEROPS 