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

• 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');
});

• 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