Visual Testing in Playwright: Ensure UI Consistency | Complete Tutorial

Welcome to our comprehensive tutorial on Visual Regression Testing in Playwright! In this in-depth video, we'll delve into the world of visual regression testing and explore how Playwright can help you ensure UI consistency across your web applications.
Visual regression testing plays a critical role in verifying that visual elements of a web page remain consistent after code changes or updates. In this tutorial, we'll guide you through the process of setting up and executing visual regression tests using Playwright, a powerful browser automation tool.
Practice Test Automation: commitquality.com
Twitter: / commitquality

[@taras9513]

Thanks, that was really helpful!

[@ShivamPandey-mw5zh]

This is awesome. Quite helpful!

[@CommitQuality]

Thank you! Glad I can help

[@orbita3000]

i need to do visual testing for hundreds of pages, it would be difficult to tailor mask for dynamic content to each page manually. is there any magic generic solution to mask every element that moves on page, to get a stable test?

[@maneeshm2427]

Nice informative video covering all different scenario's/possibilities. Can you also include how to run the snapshot tests using docker image?

[@CommitQuality]

Yes, great suggestion, I will create a video for this. Thanks :)

[@meg6pat]

Also want to mention clip function, then you need specific part of the page which cannot be covered by single locator.

[@filipgajic93]

Hi, can this be implemented on other layers or only at test() ? I'm trying to implement this in a base class where I keep all my functions so I can call it on other pages, not to duplicate in all of the tests but I'm getting Unresolved function or method toHaveScreenshot() -> any idea why and how to resolve this ? Thanks !

[@Aslan11123]

I only got masked names from ID 5 to 11, even though I did set fullPage to true.

[@user-bb1hx3dj8r]

can you show me how to make it popup the localhost page when you run the test?

[@meg6pat]

Question: what are AI visual comarison tools you would sugest to use?
I hate then 1 pixel line is missing from screenshot which leads to several thousands pixel difference.

[@Shizostereo]

Applitools Eyes should do the job

[@CommitQuality]

Browserstacks Percy is good, however there are lots of options available and I would definitely suggest free trials

[@nameundefinedname5307]

how do you take screen shots and compare say a test environment with a live environment?

[@rajdesai94]

maybe take both screenshots through navigation to the respective URLs but compare both results to each other's saved screens as well?

[@muhammadnauman4468]

Question: I have 3 visual testing test ( one for desktop , tablet and mobile each) that is written in a same file. As i have use your approach while executing e.g project= tablet for tablet test case , project= iphone for mobile test case . how can i run all the test at once. Please advise

[@CommitQuality]

If you have 3 projects and you want to run them all don't specify a project via your execution and that will be default run all projects in your playwright config file

[@sanjuburkule]

If a text is going outside of a button in certain screen sizes, can playright automatically detect it?

[@CommitQuality]

If you have the golden image to compare against then yes it will detect something has changed and highlight the pixels that have changed

[@kumarraj989]

Any example with java

[@danielstoicamusic]

Unfortunately this becomes way more complicated when running in CI.

[@CommitQuality]

I would suggest looking into containers to keep the implementation simple