# Practicing Playwright: Visual Testing With Playwright

DevFeed: [Practicing Playwright: Visual Testing With Playwright](<https://devfeed.tech/articles/practicing-playwright-visual-testing-with-playwright-22406.md>)

Original publisher: [Read original article](<https://www.tjmaher.com/2026/05/practicing-playwright-visual-testing.html>)

Author: T.J. Maher (noreply@blogger.com)

Published: 2026-05-21T12:46:54Z

Content type: tutorial

Language: en

Sources: [T.J. Maher](<https://devfeed.tech/sources/t-j-maher.md>)

Topics: [Playwright](<https://devfeed.tech/topics/playwright.md>), [Testing](<https://devfeed.tech/topics/testing.md>), [Docker](<https://devfeed.tech/topics/docker.md>), [ci](<https://devfeed.tech/topics/ci.md>), [WebKit](<https://devfeed.tech/topics/webkit.md>), [Chrome](<https://devfeed.tech/topics/chrome.md>), [Firefox](<https://devfeed.tech/topics/firefox.md>)

Tags: [chrome](<https://devfeed.tech/tags/chrome.md>), [ci](<https://devfeed.tech/tags/ci.md>), [docker](<https://devfeed.tech/tags/docker.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [playwright](<https://devfeed.tech/tags/playwright.md>), [snapshots](<https://devfeed.tech/tags/snapshots.md>), [software-testing](<https://devfeed.tech/tags/software-testing.md>), [testing](<https://devfeed.tech/tags/testing.md>), [visual-testing](<https://devfeed.tech/tags/visual-testing.md>)

## AI overview

This tutorial demonstrates Playwright visual testing by capturing screenshots of pages or elements, comparing them with baseline snapshots, and using masking to exclude changing content. It also discusses browser and operating-system differences, repository size, and running visual tests in a standardized CI environment.

## Source excerpt

If you want to do some basic visual checking to see if there has been any deviation from your baseline of images, you can use Playwright. It's built in! Playwright can take a snapshot of a web element, a visible viewport, or a full page, and save it in your Git repository as a baseline, failing the test if the image, page, or viewport does not match up. Caution: From what I have been reading, this can quickly cause your code repository to balloon in size, since Chrome, Firefox, and WebKit would each store its own golden screenshot in your repo. Also, images on Mac, Windows, and Linux all appear different pixel-by-pixel. If using a CI platform, it might be best to run visual tests only on a standard Playwright Docker image, to generate and compare snapshots. According to TestQuality, "Once a suite passes 50-100 visual tests, teams need a layer that tracks run history, surfaces flaky-test patterns across cycles, and routes confirmed defects into the team's tracker -- none of which lives inside the test runner itself"... I wonder if you can store images in an Amazon S3 bucket and hook that up as a virtual drive? ... no matter. That will be a blog post for another time... Right now, we will be walking through Butch Mayhew's code he wrote for his LinkedIn Learning course, Learning Playwright, found on his companion GitHub site. While the test is in a certain state you can a screenshot of the page or certain elements of the page and save them as a snapshot. The snapshots an be used as a baseline images to compare your current site against. This baseline can be periodically updated as the site evolves. How does this happen? With Playwright's .toHaveScreenshot( ) to take a screenshot and the mask method that you want to leave out of the comparisons between the expected and actual screenshots. toHaveScreenshot(name): Playwright.dev / Page Assertions Our Test Site: PracticeSoftwareTesting.com Butch has a series of tests for the test site Practice Software Testing ( practicesof