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


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:


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.


Thank you!
Was this helpful?
Still have questions?

If you still have questions, please ask a question and I will try to answer it.

Related Discord Threads

Related Questions

AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.