Playwright と GitHub Actions｜push するだけでテストが走り、壊れたらトレースつきで分かる｜再入門 3

テストの道具 Playwright のテストを、GitHub Actions で push のたびに自動で走らせる回です。 見終わると、ファイルを1つ足すだけで push のたびにテストが走り、画面がテストの約束と変わった日は、だれも走らせなくても ✗ で気づけます。止まった瞬間の画面も、レポートのトレースで見られます。 ▼ サンプル（動画と同じ4コミット・workflow 入り） https://github.com/zun-tools/playwrig... 今夜の一手: clone して自分の公開リポへ push し、Actions のタブで緑を見たら、index.html のボタン名「追加」を「入れる」に変えてもう一度 push。約2分で ✗ が付きます。 git clone https://github.com/zun-tools/playwrig... cd playwright-ci npm ci gh repo create 自分の名前/playwright-ci --public git remote set-url origin https://github.com/自分の名前/playwright-c... git push ボタン名を変えたら: git commit -am "ボタン名を変える" git push ✗ が付いたら、レポートを落として開き、再試行1回目（Retry #1）のタブからトレースへ（番号は gh run list の ID）。 gh run list gh run download 番号 -n playwright-report -D ci-report npx playwright show-report ci-report gh なしなら、ログインして実行ページの Artifacts の欄から落とせます。つまずいたときは README へ。 ▼ リポに要る物（サンプルには全部入り） package-lock.json・main という名前のブランチ・.github/workflows/playwright.yml（Playwright を入れるときの質問に Yes で作られる公式の雛形。サンプルはブラウザを Chromium に絞り、アクションの版を v6 に） ▼ チャプター 00:00 オープニング 00:30 ファイルを1つ足して push で走らせる 02:48 ボタン名を変えて push して手を離す 05:09 レポートを落としてトレースで見る 06:58 締め ▼ 本編で参照した一次情報 ・CI で走らせる手順（GitHub Actions の雛形・ほかの CI の例） https://playwright.dev/docs/ci-intro ・再試行2回とトレースの既定 https://playwright.dev/docs/trace-vie... ・GitHub Actions の料金（非公開リポの枠の表も） https://docs.github.com/en/billing/co... ・Actions の通知の受け取り方 https://docs.github.com/en/subscripti... ▼ 試した環境と数字の条件 ・撮影: 2026年10月18日・GitHub Actions の ubuntu-24.04・Playwright 1.64.0・手元は Linux。Ubuntu 26.04 でも同じ結果でした（緑2回・赤1回）。Mac と Windows は確かめていません。 ・push から ✓ / ✗ まで、撮影の緑は 55 秒と 38 秒、赤は 130 秒。試走の赤4回も約2分です。待ち時間の設定は再入門 1 で扱いました。 ・知らせは、Settings → Notifications → System → Actions の3つ（On GitHub・Email・Only notify for failed workflows）にチェックの設定で、失敗のときだけ通知とメールに届きました（試走の赤2回）。 ・ログの行とレポートはログインが要ります。ログインなしで見えるのは、印と実行ページの要約、Artifacts の名前までです。 ・GitHub のスターは約9.8万（2026年10月18日時点）。 ▼ Playwright 再入門（この連載） ・再入門 1（テスト1本を読んで走らせる）    • Playwright 再入門｜画面が変わると、AI に書かせて残したテストが AI ...   ・再入門 2（Test Agents でテストを増やす）    • Playwright Test Agents｜AI に計画を書かせてテストを増やし、...   ・再入門 4（MCP と CLI、テスト以外の2つの顔）    • Playwright MCP と CLI｜テスト以外の2つの顔、AI に見させるかテ...   ―――――――――――――― このチャンネル「ずんだもんの実験道具箱」は、開発ツールをずんだもんが試す実験室です。 ―――――――――――――― 音声: VOICEVOX:ずんだもん / VOICEVOX:四国めたん 立ち絵: キャラクター差分素材（自作2次創作） / 東北ずん子・ずんだもんプロジェクト https://zunko.jp/ ※本動画は東北ずん子・ずんだもんプロジェクトのガイドラインに沿って制作しています Playwright は Microsoft による Apache-2.0 ライセンスの OSS です。説明は収録時点の公式資料と、明記した範囲の自家実測に基づきます。 GitHub Actions は GitHub のサービスです。 ▼ X（新作のお知らせ） https://x.com/zundamon_tools #Playwright #E2Eテスト #ClaudeCode #AIエージェント #ずんだもん #開発ツール解説