Playwright Test includes the ability to produce and visually compare screenshots using
expect(value).toMatchSnapshot(snapshotName). On first execution, Playwright test will generate reference screenshots. Subsequent runs will compare against the reference.
Sometimes you need to update the reference screenshot, for example when the page has changed. Do this with the
Playwright Test uses the pixelmatch library. You can pass comparison
threshold as an option.
Apart from screenshots,
expect(value).toMatchSnapshot(snapshotName) can also be used to compare text, png and jpeg images, or arbitrary binary data. Playwright Test auto-detects the content type and uses the appropriate comparison algorithm.
Here we compare text content against the reference.
Snapshots are stored next to the test file, in a separate directory. For example,
my.spec.ts file will produce and store snapshots in the
my.spec.ts-snapshots directory. You should commit this directory to your version control (e.g.
git), and review any changes to it.