こんにちは、 Leaner Technologies の石渡（@mishiwata1015）です。
Leaner では E2E テストに Playwright を使っています。
GitHub Actions 上で実行した Playwright がエラーとなったときのレポートを見る手順をまとめました。
Playwright の設定
CI 環境上ではエラー時に 2 回までリトライし、リトライ 1 回目の trace, video を取得するようにしておきます。
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 日保存するようにします。
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 のダンプやネットワーク通信状況もモニタリングできます。
あとは気合いでデバッグしましょう！ 🐛
Discussion