From 014c224db647531c61a26fd3c0f16d325d1b3e67 Mon Sep 17 00:00:00 2001 From: Dmitry Gozman Date: Mon, 28 Jun 2021 14:17:28 -0700 Subject: [PATCH] docs(snapshots): add more details (#7366) --- docs/src/test-snapshots.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/docs/src/test-snapshots.md b/docs/src/test-snapshots.md index 234780ac4c..4f57f29c10 100644 --- a/docs/src/test-snapshots.md +++ b/docs/src/test-snapshots.md @@ -11,7 +11,7 @@ const { test, expect } = require('@playwright/test'); test('example test', async ({ page }) => { await page.goto('https://playwright.dev'); - expect(await page.screenshot()).toMatchSnapshot('snapshot-name.png'); + expect(await page.screenshot()).toMatchSnapshot('landing.png'); }); ``` @@ -21,10 +21,26 @@ import { test, expect } from '@playwright/test'; test('example test', async ({ page }) => { await page.goto('https://playwright.dev'); - expect(await page.screenshot()).toMatchSnapshot('snapshot-name.png'); + expect(await page.screenshot()).toMatchSnapshot('landing.png'); }); ``` +When you run above for the first time, test runner will say: +``` +Error: example.spec.ts-snapshots/landing-chromium-darwin.png is missing in snapshots, writing actual. +``` + +That's because there was no golden file for your `landing.png` snapshot. It is now created and is ready to be added to the repository. The name of the folder with the golden expectations starts with the name of your test file: + +```bash +drwxr-xr-x 5 user group 160 Jun 4 11:46 . +drwxr-xr-x 6 user group 192 Jun 4 11:45 .. +-rw-r--r-- 1 user group 231 Jun 4 11:16 example.spec.ts +drwxr-xr-x 3 user group 96 Jun 4 11:46 example.spec.ts-snapshots +``` + +Note the `chromium-darwin` in the generated snapshot file name - it contains the browser name and the platform. Screenshots differ between browsers and platforms due to different rendering, fonts and more, so you will need different snapshots for them. If you use multiple projects in your [configuration file](./test-configuration.md), project name will be used instead of `chromium`. + Sometimes you need to update the reference screenshot, for example when the page has changed. Do this with the `--update-snapshots` flag. ```bash