Visual Regression Testing Using Playwright

Amid the fast-moving process of delivering software, the time spent on reviewing web pages manually is progressively reducing. In order to maintain the speed of modern development, we require tools that help keep our designs and layouts preserved and safe from changes. That is where Visual Regression Testing comes handy.

About Visual Regression Testing?

Visual regression testing focuses on image and pixel comparisons. It involves identifying specific sections of a website and visually inspecting them to detect any changes It works by comparing a baseline image (or ‘master’ image) with screenshots captured during subsequent tests

In other words, It checks that your website’s content, layout and design stay the same after each change of code.

Example: For example, you have just changed the CSS of your website by a small margin by making a small update . While in a development environment a button seems perfect, in the live site, it is a little off; the layout on mobile. This would have been identified by the use of Visual Regression Testing.

Why Choose Playwright for Visual Regression Testing?

Playwright is an excellent choice for visual regression testing because it provides a powerful framework for automating browser interactions while offering built-in tools for capturing screenshots and comparing them. It allows you to:

• Check your tests in different browsers: Chromium, Firefox, WebKit, on Windows, Linux and MacOS.


• Detects layout shifts, broken UI elements, and CSS issues.


• 
  );
  
  // Compare the full page screenshot
  
  await expect(page).toHaveScreenshot();
  
  });
  
  
  

  How it works:

  
  
  

  During the first run, it produces a baseline image of the site. If the comparison is carried out on subsequent runs, Playwright will identify some changes and notify the user of the differences.
  
  You can pass additional options, such as animations: “disabled” to avoid false positives caused by dynamic elements.

  
  
  

  
  
  
  2. .toMatchSnapshot()
  

  
  
  

  This method enables you to compare a string, Buffer, or any value; an image, for example, or a JSON file, with a previously captured golden or reference value. It is flexible and is not limited to the type of comparisons that are basic to the facet models, where you can also check other forms of data.

  
  
  

  Usage:

  
  
  

  Use .toMatchSnapshot() when performing a specific data point comparison, for example: HTML strings or component snapshots and a reference value.
  
  In general it is applied to test single elements, components, or API responses.

  
  
  

  test('Compare element visual snapshot', async ({ page }) => {
  
  await page.goto('

  
  
  

  In the below screenshot, you can see the test case has failed and an error has come.

  
  
  
  
  

  
  
  
  Visual testing for a single element
  

  
  
  

  In this case, we will target a specific element on the page, such as the “Get Started” button. We will visually compare this button to ensure it remains unchanged after each test run.

  
  
  

  const { test, expect } = require('@playwright/test');
  
  test('Visual comparison of the "Get Started" button', async ({ page }) => {
  
  // Navigate to TestGrid.io homepage
  
  await page.goto('//testgrid/');

  
  
  

  // Locate the "Get Started" button by its text or selector
  
  const getStartedButton = page.locator('text=Get Started');

  
  
  

  // Compare the "Get Started" button to the baseline image
  
  await expect(getStartedButton).toHaveScreenshot();
  
  });

  
  
  

  When we execute the above code it fails as the baseline image does not exist.

  
  
  
  
  
  
  

  Lets execute the test case again this time as the baseline image exists and compare the image with the baseline image. In the below screenshot you can see full page screenshot is captured.

  
  
  

  
  
  In the next section, you will see about Visual Regression Testing using.

  
  
  

  
  
  
  Visual Regression Testing in TestGrid
  

  
  
  

  Visual Regression Testing ensures that an application’s appearance, layout, and design remain consistent across various devices and resolutions. It compares the visual output of the application against a baseline, detecting any unintended changes to the user interface. it provides an efficient and user-friendly approach to this process, making it a valuable tool for maintaining a consistent and error-free UI.

  
  
  

  
  
  
  Key Benefits of Using TestGrid for Visual Regression Testing
  

  
  
  

  Automated Baseline Creation:

  
  
  

  The first time the test is run after adding the code, it takes a baseline picture for itself and saves it. This appearance is used as a benchmark against which subsequent test runs are made. Setup time is little and this makes it easy to start with the visual testing without having to manually create the baselines.

  
  
  

  Simplified Comparison Process:

  
  
  

  After executing the test, users can log into it, navigate to Automation Sessions, and select the device on which the tests were run. The platform displays timestamps for each executed test case, making it simple to find and review results.

  
  
  

  By clicking on the visual testing section, users can see the list of all test cases, both passed and failed, providing a clear overview of the test outcomes.

  
  
  

  Detailed Insight into Failures:

  
  
  

  If a test case fails, it enables users to click on the Compare button to view differences between the baseline and current screenshots. Any variations are highlighted with a red rectangle, allowing users to quickly identify changes that may have impacted the visual consistency of the application.

  
  
  

  This detailed comparison feature helps pinpoint specific elements that have shifted or altered, making it easier to address visual bugs.

  
  
  

  Consistency Through Subsequent Executions:

  
  
  

  For each subsequent test execution, it automatically compares the newly captured screenshots against the previously established baseline. This ensures that any new changes or issues are immediately detected.

  
  
  

  Users can run the same test case multiple times and track changes over time, helping to ensure that updates or fixes do not introduce new visual errors.

  
  
  

  Real-Time Monitoring and Adjustment:

  
  
  

  During execution, it allows users to observe the comparison process in real-time. This real-time insight is valuable for identifying issues as they occur and enables prompt adjustments.

  
  
  

  In the next section you will see how we can execute the visual test case in Test Grid

  
  
  

  
  
  
  Execution and Result Analysis
  

  
  
  

  Once the code is added, you can proceed with its execution. The initial run will generate a baseline image, which will serve as the reference for comparing images in future test runs. From the second execution onwards, the visual testing results will be available for review.

  
  
  

  To see the execution results login into it, with valid credentials and navigate to Automation Sessions.

  
  
  
  
  

  Executed test cases :

  
  
  

  You will see a list of timestamps for the executed test cases. Click on the last timestamp of the test that you have executed.

  
  
  
  
  

  You can see the reason for failure of the test case by clicking on the Compare button to see the visual difference between 2 screenshots. The difference will be marked by a red rectangle.

  
  
  

  .

  Vollständiger Original-Bericht

  Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

  ↗ Original-Artikel auf dev.to lesen