📄

GitHub Actions上で実行したPlaywrightのレポートを見る手順

こんにちは、 Leaner Technologies の石渡(@mishiwata1015)です。

Leaner では E2E テストに Playwright を使っています。
GitHub Actions 上で実行した Playwright がエラーとなったときのレポートを見る手順をまとめました。

Playwright の設定

CI 環境上ではエラー時に 2 回までリトライし、リトライ 1 回目の trace, video を取得するようにしておきます。

playwright.config.ts
const config: PlaywrightTestConfig = {
  ...

  retries: process.env.CI ? 2 : 0, // CI 上ではエラー時に2回まで retry する
  use: {
    trace: process.env.CI ? 'on-first-retry' : 'on',
    video: process.env.CI ? 'on-first-retry' : 'on',
  },

  ...
}

export default config;

GitHub Actions の workflow 設定

エラー時に Playwright のレポートを upload-artifact で 1 日保存するようにします。

.github/workflows/playwright.yml
name: Playwright Tests
on:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]

jobs:
 test:
   timeout-minutes: 60
   runs-on: ubuntu-latest
   steps:
   - uses: actions/checkout@v2
   - uses: actions/setup-node@v2
     with:
       node-version: '14.x'
   - name: Install dependencies
     run: yarn
   - name: Install Playwright
     run: npx playwright install --with-deps
   - name: Run Playwright tests
     run: yarn playwright test
   - uses: actions/upload-artifact@v2
     if: failure()
     with:
       name: playwright-report
       path: playwright-report/
       retention-days: 1

Playwright レポートをダウンロード

GitHub Actions で Playwright 実行後、 Actions ページの Artifacts セクションにリンクがあるのでダウンロードしてください。

zip ファイルになっているので解凍しておきます。
解凍後の data ディレクトリ内にも zip ファイルがあって、それも解凍しておく必要があるので注意してください。 trace のスクリーンショットはここに入っています。

Playwright レポートを見る

解凍した Playwright レポートを playwright show-report で閲覧します。
例) $ npx playwright show-report /Users/mishiwata1015/Downloads/playwright-report

これで、おなじみのレポート画面が立ち上がります。

エラーとなったテスト詳細ページの Retry #1 タブに trace と video があります。

Trace Viewer では、各テストステップ時点の DOM のダンプやネットワーク通信状況もモニタリングできます。


あとは気合いでデバッグしましょう! 🐛

参考

リーナーテックブログ

Leaner Technologiesのテックブログです! 採用情報: careers.leaner.co.jp/

Discussion

ログインするとコメントできます