はじめに

SAKURUGのTokiです。

本記事ではPlaywrightのテスト結果動画保存方法についてステップバイステップでご紹介します！

総8回でNuxt3環境におけるPlaywrightを使用したE2Eテストについてご紹介してます。

基本編

1.環境構築

2.テスト生成

3.テスト実行

4.テスト結果確認

応用編

5.Basic認証

6.Cookie認証

7.テスト結果動画保存方法 (本記事)

8.Nuxt(SSR)に対応した待機処理

この記事を読んで欲しい人

Playwrightのテスト結果を動画で保存したい方

紹介すること / 紹介しないこと

紹介すること : Playwrightにてテスト結果を動画にて保存する方法

紹介しないこと : Playwrightの環境構築・テスト生成・テスト実行・テスト結果確認

※第1回～第4回の基本編でご紹介してます。

動作環境

動画作成方法

1. [エクスプローラ]playwright.config.tsを開く。
2. [テキストエディタ]以下の通りに、コードを 変更後 に変更する。

変更前

//playwright.config.ts
use: {
    actionTimeout: 0,
    trace: 'on-first-retry',
},

変更後

//playwright.config.ts
use: {
    actionTimeout: 0,
    trace: 'on-first-retry',

    /* 動画を撮る */
    video: 'on',
},

TIPS：'on'以外にも以下の設定が可能である。

• 'off' - 動画を撮らない
• 'on' - 動画を撮る
• 'retain-on-failure' 失敗したテストのみ動画を撮る
• 'on-first-retry' - リトライしたテストのみ動画を撮る

TIPS：撮影された動画を遅く見る場合には、以下の追加で対処できる。

//playwright.config.ts

/* 操作スピードを遅くする */
launchOptions: {
  slowMo: 1000, // 操作前一秒待つ
},

参考文献

• Playwright公式ドキュメント
• Playwright公式ドキュメント_video
• PlaywrightGitHubリポジトリ

まとめ

本記事では、Playwrightによるテスト結果の動画保存方法についてご紹介しました。

この記事を読んでいただきありがとうございます！

基本編

1.環境構築

2.テスト生成

3.テスト実行

4.テスト結果確認

応用編

5.Basic認証

6.Cookie認証

7.テスト結果動画保存方法 (本記事)

8.Nuxt(SSR)に対応した待機処理

是非、他の記事も閲覧頂けますと幸いです。