Rayrun
← Back to videos

Playwright Tutorial | Visual Testing in Playwright | Visually Compare Screenshot

Visual testing with Playwright, How to do visual regression testing using Playwright, Visual Testing in Playwright Complete tutorial, Playwright: Visual testing

Welcome to another installment in our Playwright with TypeScript series! In today's guide, we dive deep into visual testing using Playwright. We start with an overview of Playwright's ability to produce and visually compare screenshots using the 'toHaveScreenshot' method. This technique involves generating reference screenshots on the first execution, which subsequent tests will compare against.

Getting Started

First, we look at a theoretical explanation of how visual testing works in Playwright. The framework allows you to capture screenshots and compare the new captures with the reference images previously taken. When first executed, the test runner will alert you if no snapshot exists. The actual screenshot is stored in a specified folder and later used for comparison.

Practical Example

We begin with a practical example. We open VSCode and create a test script inside the test folder, named visualTestingPractice.spec.ts. Here, we import modules and set up test blocks while explaining the importance of fixtures, assertions, and the toHaveScreenshot method. We navigate to a designated site (the-internet.herokuapp.com) and generate screenshots for visual regression tasks.

Running Tests and Visual Comparisons

By running the command npx playwright test, we generate reference screenshots on the first run, which can then be used for future comparisons. Upon subsequent executions, if the new screenshot matches the reference, the test passes; otherwise, it fails. This process is illustrated with detailed examples, terminal command outputs, and HTML reports.

Advanced Options

We explore advanced configurations like naming screenshots for better identification and organizing folder structures. These scenarios include customizing file paths and filenames dynamically based on the test context. We also demonstrate how to use options like fullPage to capture entire pages and maxDiffPixels or maxDiffPixelRatio to tolerate minor visual differences without failing the tests.

Conditional Assertions

We examine how you can customize assertions to ignore specific regions that may change often. This is accomplished using the mask option, which can mask certain elements from being compared visually, allowing for a more robust test setup.

Device-Specific Testing

The tutorial includes examples of running visual tests on various devices and browsers, such as using mobile emulators to ensure your application looks consistent across different screen sizes and devices.

Updating Reference Snapshots

For situations where the UI undergoes significant changes, we discuss commands like npx playwright test --update-snapshots to update all reference images. This ensures your tests remain current with the latest UI updates.

Style Path

One notable section includes using the stylePath option for applying custom CSS before capturing screenshots, which is useful for hiding dynamic content like ads in iframes.

Non-Image Snapshots

We also cover the toMatchSnapshot method that allows you to compare text or binary data, extending the utility of visual regression testing beyond just images.

Example: Username and Password Login Flow

Finally, we conclude with a comprehensive example, demonstrating how to capture and compare screenshots at various stages of interaction within an application. This includes logging in, navigating to different pages, and verifying that the UI remains consistent.

Conclusion

This extensive guide provides a solid foundation for implementing visual testing in your projects using Playwright. Whether you are a beginner or looking to dive deeper into advanced features, this tutorial covers all essential aspects to help you maintain a visually consistent application across different environments.

Happy Testing!

Related Videos

#16 - ARIA and how Playwright is making use of it to identify UI controls?
#16 - ARIA and how Playwright is making use of it to identify UI controls?
Create feature, steps & config | Playwright & Cucumber - Typescript | Part 1
Create feature, steps & config | Playwright & Cucumber - Typescript | Part 1
Getting Started with Playwright and VS Code
Getting Started with Playwright and VS Code
Working with multiple elements in Playwright Test (NodeJS)
Working with multiple elements in Playwright Test (NodeJS)
TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.