O hirunewani blog

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

Created at

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

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

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

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

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

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

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

import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',

  // Single template for all assertions
  snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',

  // Assertion-specific templates
  expect: {
    toHaveScreenshot: {
      pathTemplate: '{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
    },
    toMatchAriaSnapshot: {
      pathTemplate: '{testDir}/__snapshots__/{testFilePath}/{arg}{ext}',
    },
  },
});

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