How to compare screenshots using Playwright?

Comparing screenshots is one of the most needed things to validate UI, validate Images, Validate charts, and much more. With popular automation tools like Selenium, it is not that straightforward to do. But with Playwright users can easily compare two screenshots, assert it, and make sure that every time it should be exactly the same. It also supports almost all operating systems like Mac, Windows, and Linux. Also, it supports all the popular browsers like Chrome, Firefox, WebKit, and Safari.

How to compare screenshots using Playwright?

I have created a video tutorial on the same with the code demo, please go through the below video and subscribe to our YouTube channel. Here I have explained -

How to take and compare two full-page screenshots
How to take and compare screenshots from specific parts of the page?
Live demo, tips, and tricks.

Here is the sample code to take a screenshot of Google's home page and then compare it every time. It also searches in google and compares the chart

import { test, expect } from '@playwright/test';
test('compare screenshot', async ({ page }) => {
    await page.goto("https://google.com");
    await expect(page).toHaveScreenshot("google.png");
    await page.getByRole('combobox', { name: 'Search' }).click();
    await page.getByRole('combobox', { name: 'Search' }).fill('population of china');
    await page.getByRole('combobox', { name: 'Search' }).press('Enter');
    await expect(page.locator('div[class="EfDVh wDYxhc"]')).toHaveScreenshot("population.png", {maxDiffPixels: 1000});
});

here toHaveScreenshot() compares the screenshot of the Page or the locator of the div.

Here is the full documentation from Playwright . One can use MaxPixDiff method to allow somewhat difference between two images.

If you have any doubts or suggestions feel free to reach out on social media. Follow Us on Reddit, Facebook, and Twitter. Don't forget to subscribe to the channel -> Youtube channel. Thank You

All Playwright Tutorial Posts -