Playwrightでスクリーンショットの保存先をカスタマイズする

Playwright のスクリーンショットは、例えばtoHaveScreenshotのデフォルトでは次のような形式で保存される。

1
{testDir}/{testFilePath}-snapshots/{arg}-{projectName}{ext}

それぞれのパスの意味は次の通り。

{testDir}: テストディレクトリ
{testFilePath}: テストファイルのパス
{arg}: スクリーンショットの名前、toHaveScreenshotなどで指定した名前
{projectName}: プロジェクト名、chromium-darwin など
{ext}: スクリーンショットの拡張子

つまり次のようなパスに保存される。

1
tests/e2e/some-test.spec.ts-snapshots/simple-picture-test-chromium-darwin.png

これを変更したい場合、playwright.config.tsで変更することができる。toHaveScreenshot など assertion ごとに変更することもできる。

1
import { defineConfig } from "@playwright/test";
2

3
export default defineConfig({
4
  testDir: "./tests",
5

6
  // Single template for all assertions
7
  snapshotPathTemplate: "{testDir}/__screenshots__/{testFilePath}/{arg}{ext}",
8

9
  // Assertion-specific templates
10
  expect: {
11
    toHaveScreenshot: {
12
      pathTemplate:
13
        "{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}",
14
    },
15
    toMatchAriaSnapshot: {
16
      pathTemplate: "{testDir}/__snapshots__/{testFilePath}/{arg}{ext}",
17
    },
18
  },
19
});

参考：TestProject | Playwright#test-project-snapshot-path-template