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

Answer

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.