Playwright Tutorial | Visual Testing in Playwright | Visually Compare Screenshot

• 00:00 Introduction to Visual Testing in Playwright
• 00:15 Explanation of Screenshot Assertions and Pixel Match Library
• 02:00 Practical Example: Setting Up Visual Tests
• 07:30 Setting Custom Screenshot Names
• 10:45 Handling Folder Structures for Screenshots
• 15:30 Full Page Screenshots Option
• 18:45 Max Diff Pixels Option
• 22:30 Max Diff Pixel Ratio Option
• 26:15 Mask Option for Elements
• 37:00 Visual Testing for Specific Locators
• 43:00 Execution on Different Browsers or Devices
• 50:00 Updating Reference Screenshots
• 53:30 Applying CSS Styles for Screenshots
• 57:30 Non-Image Snapshots and Conclusion

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!