How to Perform Visual Regression Testing Using Playwright

Visual bugs can slip into your UI yet when your functional tests pass. Optical fixation testing apply Playwright assist you get these unexpected changes early by automatize the summons and comparing your covering ’ s appearing across builds.

This clause explains how to use Playwright for ocular regression testing by capturing, comparing, and validating UI snapshots.

What is Visual Regression Testing?

is a method used to detect unintended ocular modification in a web application & # 8217; s interface after code update. It captures screenshots of web pages and compares them with baseline images from old versions.

If there are departure, such as changes in layout, colouring, or missing elements, the examination highlights them for reappraisal. Unlike functional testing, which checks how the coating act, visual regression testing ensures that its appearance halt consistent across release.

Why Use Playwright for Visual Testing?

is a strong choice for because it provides fast, reliable, and browser-consistent screenshot comparisons built directly into its tryout smuggler. It aid team control UI stableness across Chromium, Firefox, and WebKit without relying on external tooling.

Key Reasons to Use Playwright:

1. Built-in Visual Assertions:Playwright offers native snapshot testing, making it easy to capture, storage, and compare baseline images without additional libraries.
2. : Tests run across three major browser engine, ensuring ocular consistency on Chromium, Firefox, and WebKit.
3. Stable and Predictable Rendering:Automatic waiting, deterministic rendering, and control over animations help trim bizarre visual tests.
4. Flexible Screenshot Options:Capture full pages, specific constituent, or masked areas to avoid noise from dynamic content.
5. Smooth CI Integration:Playwright ’ s trial contrabandist integrates flawlessly with CI pipelines, so visual regression cheque can run with every build.
6. Extensible with Tools Like Percy:For squad needing forward-looking reappraisal workflows or cross-device reportage, Playwright work seamlessly with Percy ’ s visual testing platform.

Create Simple Visual Tests using Playwright

In your test folder, create a new javascript file illustrationdemo.spec.jspage.screenshot ()function lead the screenshot, and require in the@ playwright/testmodule provides the affirmation for matching the images that are.toMatchSnapshot ().

Inside the newly created javascript file, create a new test that performs the visual comparison like below.

// example.spec.js const {test, expect} = require (' @ playwright/test '); trial ('Visual Comparison Test Demo ', async ({page}) = & gt; {await page.goto ('https: //playwright.dev '); await (await page.screenshot ()) .toMatchSnapshot ();});

In the above code, we navigate to the officialPlaywright websiteand compare visually by taking a snapshot.

Run your First Visual Regression Tests

Run your ocular compare tests habituate the below command

npx playwright test

The first time the tryout is run, it fails, as there is no lowly image.

As find below, the directory containing the substructure icon file gets created inside the tests folder.

Run the Spec again; it passes

Visual Snapshot Comparison in Playwright Ignore Minor Differences

The above comparison technique check the screenshot pixel by pixel, which means each pixel should match exactly. This behavior can be modified by legislate the argumentmaxDiffPixels = & lt; pixel_value & gt;.

Example:

const {trial, expect} = require (' @ playwright/test '); test ('Visual Comparison Test Demo ', async ({page}) = & gt; {await page.goto ('https: //playwright.dev '); expect (await page.screenshot ()) .toMatchSnapshot ({maxDiffPixels: 200});});

In the above model

We have specified themaxDiffPixelsvalue as 200, which means the maximal pixel difference can be 200.

Image Comparison in Playwright with Threshold alternative

PlaywrighttoMatchSnapshot ()accepts threshold, threshold ranges from 0 to 1, default value is 0.2. The threshold is tolerance of image deviation.

Example Code:

const {exam, expect} = require (' @ playwright/test '); test ('Visual Comparison Test Demo ', async ({page}) = & gt; {await page.goto ('https: //playwright.dev/ '); expect (await page.screenshot ()) .toMatchSnapshot ({threshold:0.5});});

In the above code, the threshold is advert as 0.5.

How to fix visual examination challenges in Playwright?

Playwright ocular test can become fragile if not configured correctly. Below are the well-nigh effectual ways to fix mutual optic testing challenges and keep your snapshots stable.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

1. Freeze dynamical content:Mask timestamps, ads, random IDs, and user-specific sections to keep unneeded diffs.
2. Target specific elements:Compare key components rather of entire Page to reduce noise.
3. Stabilize rendering:Preload fonts and assets or wad them in to keep rendering consistent.
4. Disable or wait for animations:Turn off animations in trial manner or wait for them to finish before taking screenshots.
5. Use consistent environments:Fix viewport sizing, browser version, and OS settings in CI for stable results.
6. Set permissiveness using threshold and maxDiffPixels:Allow minor anti-aliasing or sub-pixel differences where appropriate.
7. Mask or harvest noisy regions:Mask precarious areas or crop screenshots to avoid headers, footer, or changing factor.

Optic Testing with Playwright using Percy

BrowserStack is a cloud testing platform that ply accession to real browser and device for automated and manual testing., constituent of the BrowserStack retinue, is a visual testing tool that captures and compares screenshots to detect UI changes. It integrates seamlessly with Playwright, allowing team to include visual regression checks in their end-to-end tests.

Below is a step-by-step guide to enforce visual essay using Percy with Playwright:

Step 1: Install Percy Modules

Install the required Percy colony for Playwright by pass:

npm install -- save-dev @ percy/cli @ percy/playwright

Step 2: Write a Playwright Test with Percy

Create a test file (such asdemo.spec.js) with the following substance:

const {Cr} = require ('playwright '); const percySnapshot = require (' @ percy/playwright '); (async () = & gt; {const browser = await chromium.launch (); const page = await browser.newPage (); await page.goto ('https: //www.browserstack.com/ ', {waitUntil: 'networkidle '}); await percySnapshot (page, 'Example Site '); await browser.close ();}) ();

This script launches a browser, navigate to the URL, takes a snapshot use Percy, and closes the browser.

Step 3: Set Up a Percy Project

Log in to Percy, create a new project, and copy the Percy Token give.

Step 4: Set the Percy Token

Set the PERCY_TOKENsurround variable in your terminal:

• PowerShell / VS Code Terminal

$ env: PERCY_TOKEN = `` your_token ''

• Windows Command Prompt

set PERCY_TOKEN= '' your_token ''

• Unix / Linux / macOS

exportation PERCY_TOKEN= '' your_token ''

Step 5: Run the Test with Percy

Execute your exam employ the Percy CLI:

npx percy exec -- node tests/demo.spec.js

Replace tests/demo.spec.jswith the actual path to your examination file.

Step 6: Review Visual Results

Once execution conclusion, Percy will log a build URL to the console. Open this URL in a browser to review the snapshots.

• If no change are found, Percy will show a & # 8220; No Changes & # 8221; status.
• If visual differences are detected, Percy will display a side-by-side comparison highlighting the changes.

Talk to an Expert

Why Use Percy for Smarter Visual Tests in Playwright?

brings AI-powered truth to Playwright ’ s visual regression testing, helping teams catch meaningful UI changes with hurrying and assurance. It filters out ocular noise and surfaces only existent UI changes, speeding up followup and maintaining a consistent user experience.

• Effortless:Integrates into with a individual line of code and works swimmingly alongside Playwright test suites, Storybook, and Figma to endorse true shift-left visual examination.
• Automated Ocular Regression:Captures screenshots on every commit, performs side-by-side comparability, and instantly iris issues such as layout displacement, styling mismatches, or component breakages.
• :Percy ’ s AI engine intelligently filters out noise from dynamical content, animations, anti-aliasing, and other unstable elements. Features like Intelli Ignore and OCR concenter but on changes that impact real user experience, reducing mistaken positives importantly.
• :Highlights visual diffs with bounding boxful and provides human-readable summary, making reviews up to 3× faster and helping team quickly see the ambit of UI changes.

• No-Code Ocular Monitoring:Optical Scanner enables rapid, no-install monitoring across thousands of URLs on 3,500+ browser/device combinations. Trigger scans on-demand or on a schedule, disregard active region, and forthwith compare staging and product environs.
• Pliable and Comprehensive Monitoring:Schedule scans hourly, daily, hebdomadal, or monthly; review historic results; compare environments; and even test behind authentication or local environments to get subject before liberation.
• Broad Integrations:Compatible with major framework, CI tools, and SDKs to ensure quick adoption and easy grading across teams apply Playwright and beyond.

work the same intelligent visual testing to aboriginal iOS and Android apps, go tests on real device to assure pixel-perfect consistency while handling dynamic UI regions to reduce flakiness. With a plug-and-play apparatus that requires exactly one line of code, it supports Appium, WebdriverIO, Java, Python, and more, and offers scalable parallel execution for up to 10× faster builds, along with a unified dashboard that provides logs, screenshots, videos, and potent privateness conformation.

Pricing details:

• Free Plan:Up to 5,000 screenshots/month—ideal for modest project or getting get.
• Paid Plan:Starts at $ 199/month with advanced capabilities and custom endeavour options usable.

Playwright Visual Comparison Tips & amp; Tricks

Here are some valuable tips and good recitation to improve truth and efficiency when performing ocular comparisons utilise Playwright:

• Use Stable Selectors:Avoid dynamic or frequently changing elements in screenshots, such as timestamps or animations, as they can cause false positives.

• Set Consistent Viewports:Always define a fixed viewport size to secure consistent rendering across runs. This help avoid differences due to screen dimensions.

• Mask Unstable Elements:Mask or conceal elements that change oftentimes (like ads or user-specific information) using Playwright ’ s mask or ignore options during screenshot comparison.
• Wait for UI Stability:Use proper wait conditions, such as page.waitForSelector () or page.waitForLoadState (), to ensure the page is amply load before capturing screenshots.

• Compare Specific Elements:Instead of full-page screenshots, compare specific section or components to narrow the telescope and cut noise.
• Use Thresholds Wisely:Set an appropriate pixel difference threshold to allow minor acceptable differences, especially for anti-aliasing or rendering quirks across browsers.
• Run Tests in Headless Mode:Consistently run visual tests in headless mode to avoid UI differences caused by OS-level rendering or browser UI.

• Review Baseline Images Carefully:Always validate and approve your initial baseline images, as all future comparisons will use them as the reference.

Conclusion

Visual fixation testing using Playwright allows teams to mechanically capture and equate UI snapshots, making it easier to detect visual glitch before they reach production. With features like automated screenshot comparison and support for multiple browser, Playwright simplifies preserve a consistent user interface across freeing.

When combined with, optic testing becomes even more powerful. Percy heighten Playwright tests by providing cloud-based visual comparisons, an easy-to-use dashboard, and cross-browser reportage on 3,500+ existent Android, iOS, Windows, and macOS devices.

Utile Resources for Playwright

Tool Comparisons:

Frequently Asked Questions

1. What is Playwright optical testing?

Playwright ocular testing compares screenshots of your application against approved baseline images to find unintended visual changes in layout, styling, coloring, and component rendering.

2. How execute Playwright perform visual regression checks?

Playwright captures screenshots, saves an initial baseline, and compares future screenshots pixel by pixel. If differences exceed the allowed tolerance, the exam fails and a diff image spotlight the alteration.

3. How is visual testing different from functional examination?

Functional trial verify behavior, while visual tests verify appearance. An factor may function aright but however be visually separate, which visual testing helps find.

4. What are the benefits of using Playwright for visual testing?

It helps catch UI regressions betimes, ensures consistent design, improves self-assurance during refactoring, supports multiple browser engines, and integrates well into CI/CD pipelines.

5. Why do Playwright visual tests fail unexpectedly?

Common causes include dynamic message, animations, discrepant viewports, missing fonts, environment departure, and sub-pixel rendering variation.

Related Guides