links:: introduction to playwright typescript MOC

Chapter 4.2 - Visual Regression Testing in Playwright

Chapter 4.2 - Visual Regression Testing in Playwright

import { test, expect, type Page } from "@playwright/test";
import { HomePage } from "../pages/home-page";

test 1:
1. open playwright site homepage
2.Verify the page has not changed visually

const URL = "";
let homePage: HomePage;
test.beforeAll(async () => {
  console.log("Starting testing");

test.beforeEach(async ({ page }, testInfo) => {
  await page.goto(URL);
  homePage = new HomePage(page);

test.afterAll(async () => {
  console.log("Finished testing");

test("playwright homepage visual test", async () => {
  // Assert
  const starsLocator ='stargazers on GitHub') 
  // Compare the full page screenshot with the baseline. Mask the stars number on the screenshot.
  await expect({ fullPage: true, mask: [starsLocator] });

If you are not on the same operating system as your CI system, you can use Docker to generate/update the screenshots:

docker run --rm --network host -v $(pwd):/work/ -w /work/ -it /bin/bashnpm installnpx playwright test --update-snapshots

It was observed that --update-snapshots command does not always work. In this case, can remove existing screenshot and run test again.