Playwright スクリーンショットとビデオ

この章では、Playwrightを使用してスクリーンショットとビデオ録画を行う方法を紹介し、テスト失敗時に問題を迅速に特定するのに役立ちます。

page.screenshot() スクリーンショット

全ページスクリーンショット

例

// ファイルに保存
await page.screenshot({ path: 'screenshots/サンプル-homepage.png' });

// Bufferデータを取得（直接使用し、ファイルには書き込まない）
const buffer = await page.screenshot();

スクリーンショットオプション

例

await page.screenshot({
  path: 'screenshots/full-page.png',
  fullPage: true,           // ページ全体をキャプチャ（ビューポートだけでなく）
  type: 'png',              // 形式：'png'（デフォルト）または 'jpeg'
  quality: 90,              // JPEG品質（0-100、JPEGのみ）
  clip: {                   // 切り抜き領域
    x: 0,
    y: 0,
    width: 800,
    height: 600,
  },
  animations: 'disabled',   // CSSアニメーションを無効化（スクリーンショットがより安定）
  omitBackground: false,    // デフォルトの背景を非表示にするかどうか
});

要素のスクリーンショット

例

// 特定の要素のスクリーンショットを撮る
await page.getByRole('navigation').screenshot({ path: 'nav.png' });

// ボタンをキャプチャ
await page.getByRole('button', { name: '送信' }).screenshot({ path: 'btn.png' });

自動スクリーンショット設定

設定ファイルで自動スクリーンショット戦略を設定すれば、各テストで手動で呼び出す必要はありません：

例

// ファイルパス：playwright.config.ts
export default defineConfig({
  use: {
    // テスト失敗時のみ自動でスクリーンショットを撮る
    screenshot: 'only-on-failure',

    // 選択可能な値：
    // 'off' —— スクリーンショットを撮らない
    // 'on' —— すべてのテストでスクリーンショットを撮る
    // 'only-on-failure' —— 失敗時のみスクリーンショットを撮る（推奨）
  },
});

失敗時のスクリーンショットはtest-results/ディレクトリに保存され、HTMLレポートに表示されます。

ビデオ録画

ビデオ録画の設定

例

// ファイルパス：playwright.config.ts
export default defineConfig({
  use: {
    // 失敗時のみビデオを保持
    video: 'retain-on-failure',

    // 選択可能な値：
    // 'off' —— 録画しない
    // 'on' —— 毎回録画する
    // 'retain-on-failure' —— 失敗時は保持、成功時は削除（推奨）
    // 'on-first-retry' —— 最初の再試行時のみ録画
  },
});

手動でのビデオ制御

例

test('ビデオを手動で保存', async ({ page }) => {
  await page.goto('https://www.example.com/');

  // 操作を実行
  await page.getByText('サンプル チュートリアル').click();

  // ビデオオブジェクトを取得
  const video = page.video();
  // ビデオを指定したパスに保存
  await video.saveAs('videos/サンプル-test.mp4');
  // またはビデオを削除
  // await video.delete();
});

ビデオ録画オプション

例

// ファイルパス：playwright.config.ts
export default defineConfig({
  use: {
    video: {
      mode: 'retain-on-failure',
      size: { width: 1280, height: 720 }, // ビデオサイズ
    },
  },
});

スクリーンショットとビデオの使用シナリオ

シナリオ推奨方法
CIテスト失敗時にページの状態を迅速に把握するscreenshot: 'only-on-failure'
完全なテスト実行プロセスを確認するvideo: 'retain-on-failure'
ビジュアルリグレッションテストexpect(page).toHaveScreenshot()
特定のステップのデバッグ手動呼び出しpage.screenshot()

スクリーンショットとビデオはテスト実行時間とディスク使用量を増加させます。本番環境でのみ使用することを推奨します'only-on-failure' 或 'retain-on-failure'、毎回メディアファイルを生成するのを避けます。

その他の拡張