DEV Community

Cover image for Visual Regression testing with Playwright
Hash
Hash

Posted on

Visual Regression testing with Playwright

Visual Regression Testing is a software testing technique used to identify and prevent unintended visual changes in a web application or user interface (UI). It helps ensure that the visual appearance of a website or application remains consistent across different versions or updates.

How Visual Regression Testing typically works ?

  • capturing a baseline or reference screenshot of the UI (expected)
  • take second screenshot after changes to the code
  • testing pixel by pixel or at higher level (based on tools)
  • visual diff and report

What Visual Regression Testing is valuable for:

  • visual consistency
  • cross-browser and cross-device testing
  • automated testing

Which tool can be used for:

  • Applitools Eyes:
    Popularity: High
    Year of Introduction: 2014

  • Percy:
    Popularity: High
    Year of Introduction: 2015

  • Cypress with Cypress Image Snapshot:
    Popularity: High
    Year of Introduction: Cypress Image Snapshot is a plugin for Cypress.

  • Selenium with WebdriverIO:
    Popularity: High
    Year of Introduction: Selenium is older (introduced in 2004), WebDriverCSS and WebdriverIO are plugins/extensions.

  • Playwright with Playwright Test Runner:
    Popularity: Growing
    Year of Introduction: Playwright introduced in 2019; Playwright Test Runner is a testing framework built on top.

An Visual Regression testing with React and Playwright

  • Install Playwright and other necessary dependencies:
npm install playwright
Enter fullscreen mode Exit fullscreen mode
  • Create a Visual Regression Testing script using Playwright and Jest. For this example, let's assume you want to test a simple React component.

Create a test file, e.g., visual-regression.test.js, with the following content:

import { test, expect } from'@playwright/test';

test('Visual Regression Test', async ({ page }) => {
  // Navigate to your React application or component
  await page.goto('http://localhost:3000'); // Change the URL as needed

  // Capture a screenshot of the React component
  const screenshot = await page.screenshot();

  // Compare the screenshot with the baseline image
  expect(screenshot).toMatchSnapshot('react-component-screenshot.png');
});

Enter fullscreen mode Exit fullscreen mode
  • run the jest by npm run test

Jest will execute the test script, and Playwright will launch a browser, capture a screenshot, and compare it to the baseline image. If there are any visual differences, Jest will report them.

After running the test, Jest will generate a folder named image_snapshots containing the baseline and compared images. You can review and approve any changes as needed.

Remember to replace the URL and adjust the test script to match your specific React component or application. This example demonstrates a basic setup for Visual Regression Testing with Playwright and React, and you can expand upon it to suit your project's needs.

if you would like to watch a video, there is another example: https://www.youtube.com/watch?v=Y1eTK-j66PU

Thank you for taking the time to read the article. let me know in the comments your approach to visual regression testing?

HASH

Top comments (1)

Collapse
 
gregberge profile image
Greg Bergé

Great article on visual regression testing with Playwright! It's always exciting to see detailed guides that help improve UI consistency.

For those who are exploring different tools for visual regression testing, consider trying Argos (argos-ci.com). Argos is an open-source visual regression testing tool that integrates seamlessly with Playwright and other CI pipelines. It offers robust features for maintaining high-quality UIs and is highly customizable, making it a versatile choice for various development environments.

If you're already using Playwright, Argos can complement your setup and provide an efficient way to catch visual discrepancies early in the development process.

Check it out and see how it can enhance your visual testing strategy!