How do I customize the naming convention for screenshots in Playwright Test?

Answer

Sure, you can customize screenshot names in @playwright/test. By default, it generates names based on the test file name, browser, and platform. But, you can specify a custom name as the first argument of the toHaveScreenshot() method.

Here's an example:

expect(page).toHaveScreenshot('landing.png');

This way, you're not stuck with auto-generated names like example-test-1-chromium-darwin.png, but can use more descriptive names like 'landing.png'.

If you're working with multiple projects, @playwright/test uses the project name in the snapshot names, helping you differentiate between snapshots from different projects.

Remember, screenshots can vary between browsers and platforms due to rendering, fonts, etc. So, it's a good idea to have different snapshots for different browsers or platforms if needed.

Need to update reference screenshots? Use the --update-snapshots flag when running the Playwright test command:

npx playwright test --update-snapshots

This updates all reference snapshots with the actual ones. So, by specifying custom snapshot names and using the right flags, you can control how screenshots are saved and organized.