How do I include the project name in my test names and snapshot paths in Playwright?


To include the project name in your test names and snapshot paths with @playwright/test, follow these steps:

Step 1: Update the Playwright configuration file

In your Playwright configuration file, use the snapshotPathTemplate option to define a template for the snapshot paths. Include the {projectName} placeholder in the template:

// playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  projects: [
      name: 'my-project',
      use: {
        // other options...
  outputDir: '__screenshots__/{projectName}/{testFilePath}/{arg}{ext}',

export default config;

Step 2: Set a custom display name for tests

Use Jest's displayName option to set a custom display name for your test suites or individual test cases. Get the current project name from the PWPROJECT environment variable and use string interpolation:

// jest.config.ts
const projectName = process.env.PWPROJECT || 'default';

module.exports = {
  displayName: `Project ${projectName}`,
  // other config options...

Now, your tests will have display names prefixed with "Project {projectName}", and snapshots will be stored in directories named after the current project.

Thank you!
Was this helpful?
Still have questions?

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

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.