What is Visual Testing?

Visual testing is the process of verifying that an application’s user interface (UI) appears correctly to users across various devices, browsers, screen sizes, and operating systems, ensuring visual elements such as layout, design, colors, fonts, and components are rendered as intended. It focuses solely on how the software looks, not how it functions, by comparing images to detect visual changes. This approach is particularly useful in scenarios where specific elements in the page’s code are hard to identify and helps maintain a consistent appearance of the website over time.

How does Visual Testing in Playwright work?

Playwright makes it easy to test the visuals of your app by using methods like toHaveScreenshot() and toMatchSnapshot(). These methods allow you to take screenshots during tests and compare them with a saved ‘baseline’ image.

The first time you run the test, Playwright saves the screenshot as the baseline. In future tests, it compares the new screenshot with the baseline. If they are matched, the test passes. If there’s a difference, the test fails. This process is called Visual Testing or Visual Comparison Testing and it helps to catch any unexpected changes in the app’s appearance.

Prerequisites for Visual Testing with Playwright

To prepare your environment for Playwright visual testing, ensure that you have all the required tools installed. For a simple and quick guide that covers everything from downloading Visual Studio Code to installing Node.js and Playwright, click on the Playwright link and refer to the Prerequisite Steps section. This resource offers a step-by-step plan to help you get started with Playwright for test automation.

Benefits of Visual Testing in Playwright

Quick Setup: Playwright’s visual testing features are built-in, so you don’t need to spend extra time installing third-party plugins or libraries. You can start executing visual tests almost immediately after setting up Playwright, saving both time and effort.

Scalability: As your project grows, Playwright’s visual testing scales easily without adding complexity, enabling you to add more visual test cases quickly as part of your ongoing test automation.

Simplicity: Unlike other testing types, where you might need to dive deep into logs to identify issues, visual testing with Playwright makes it easy to spot differences. If a test fails, you simply check the visual output where the differences are highlighted in red. This lowers the barrier to entry for all team members, including non-technical stakeholders, and encourages better collaboration on UI changes.

A*utomatic Baseline Creation:* On the first test run, Playwright automatically saves a baseline screenshot, making it simpler to manage and track visual changes in your application over time without extra configuration.

Cross-Browser and Cross-Platform Support: Playwright allows visual testing across multiple browsers (Chromium, Firefox, WebKit) and platforms (Windows, macOS, Linux), ensuring that your app looks consistent regardless of the environment.

Pixel-Perfect Comparison: Playwright uses the pixelmatch library for accurate, pixel-by-pixel comparison, which helps detect even the smallest visual changes, making it ideal for ensuring consistent UI appearance.

Flexible Comparison Options: Playwright offers configurable options like maxDiffPixels to adjust the sensitivity of comparisons, and threshold to define the tolerance level of image differences, providing more control over the visual testing process.

Easy Snapshot Management: Visual snapshots are stored alongside test files, and Playwright provides commands to update snapshots (–update-snapshots), making it easier to keep up with intentional UI changes.

Create Simple Visual Test in Playwright (Generate and Compare the Screenshots)

• Let’s Implement a Visual Test using Playwright, create a new javascript file, and inside it, create a new test that performs the visual comparison like below.

• Run your first visual comparison test using the below command, here we run the test for only Chromium browsers, you can run it for multiple browsers as well.
  npx playwright test –project=chromiun

• When you run your test for the first time, the test will fail as there is no base image available for the comparison.

• But it will create one folder automatically under the tests folder, where the base image gets created for future comparisons.

• Now run your test again and it passes, as the base image is there for comparison.

Get an Idea about Failed Comparison Test

• The above comparison technique matches the screenshot pixel by pixel, which means each pixel should match exactly. But if the test fails then you will get an idea very easily of what is different in both images in the playwright.

• When a visual test fails in Playwright, it automatically generates and saves three images in the test results: actual, expected, and diff as shown below.

Actual Image: The actual image is the newly captured screenshot from the current test run. It contains the current appearance of the page after recent changes or updates.

The playwright automatically compares this image to the expected image to check if there are any visual changes.

**Expected Image: **The expected image is the baseline image that was saved during the initial test run. This image captures the page’s appearance as it was originally intended, serving as the “golden” image.

Diff Image: The diff image highlights any visual differences between the expected and actual images. The playwright marks these differences, often in a contrasting color like red or yellow, making it clear where the two images are not matched.

This image is very helpful in identifying what has changed. For example, if a button is misaligned or a color has unexpectedly shifted, the diff image visually pinpoints these areas and helps testers to spot unintended changes.

You can also view these images directly in the generated report. The report is automatically created when a test fails, however, to generate it manually, you can run the command “npx playwright show-report” in the terminal.

• The playwright also offers two additional comparison modes: “Side by side” and “Slider”. These allow you to compare screenshots within the report and highlight any differences. In the example below, the “Side by side” view allows testers to quickly compare actual and expected images.

In the “Slider” view shown below, testers can move the slider to check differences between the actual and expected images.

Set Custom Name to the Captured Image

• You can set the custom name for each screenshot to keep your test output organized and easily identifiable. By default, Playwright generates names automatically based on the test name and appends them with browser and platform information like “example-test-1-chromium-win32.png”.

• For example, if you are capturing a screenshot of a homepage, you can set a meaningful name like “HomePage.png”. Specify the screenshot name as the first argument of the toHaveScreenshot() method:
  import {test, expect} from '@playwright/test'

test('Visual Testing Demo', async ({ page }) => {
await page.goto.('https://playwright.dev/');
await expect(page).toHaveScreenshot("HomePage.png");
});
Once the screenshot is captured, it is created using the custom name as shown below.
For more you can click here