IVYXON
記事一覧に戻る
ワークフロー中級🧪 Recipe

Playwright E2Eテスト、PRで自動実行するやつ、Claudeに丸投げでいける？

Next.jsアプリのPlaywright E2EテストをCIで自動実行。デスクトップとモバイルの並行テストもClaudeに作らせる方法を紹介するよ。

2026年6月1日6分で読めます
#Playwright#テスト#CI/CD#実録

うちのNext.jsアプリにPlaywrightのE2Eテスト入れたいんだけど、PR出したらGitHub Actionsで自動実行するようにしたいやん？ しかもデスクトップとモバイル両方で並行テストとか、ちょっと凝ったことやりたいときでも、Claude Codeに雑に投げたらええねん。

一番雑な投げ方

まずはこれ、コピペして投げてみて。

Next.jsアプリにPlaywrightのE2Eテスト入れたいねん。PR出したらCIで自動実行するようにしといて。デスクトップとモバイルで並行でテスト回るようにしてな。

これだけで動くで。Claude CodeがPlaywrightのセットアップからCIの設定ファイルまで、ぜーんぶ考えて提案してくれるから、ホンマ楽やわ。

もうちょい具体的に投げるパターン

もうちょっと細かく要件を伝えたいときは、こんな感じで投げてみてな。

パターン1：具体的なブラウザとか環境を指定したいとき

「デスクトップはChromiumとFirefox、モバイルはiPhone 13で見たいねん！」みたいに具体的に言うと、それに対応した設定を組んでくれるで。

Next.jsのPlaywright E2Eテスト、PR時にCIで自動実行できるようにしてくれへん？デスクトップはChromiumとFirefox、モバイルはiPhone 13で並行テストしたいねん。GitHub Actionsで頼むわ。

パターン2：テスト対象のURLとか、動かすコマンドを指定したいとき

アプリをどんなURLで動かすか、テストをどう起動するかを指定できるよ。特に開発サーバーでテストを回すなら重要やね。

Playwright E2Eテスト、CIで回すやつお願い。Next.jsアプリはlocalhost:3000で動かす。PR作成時に自動でテストして、ChromiumとSafari（Mac）とPixel 5（Android）で見てほしい。

パターン3：簡単なテストファイルも一緒に作ってほしいとき

「テスト環境作って終わりじゃなくて、なんか簡単なテストも一つ作っといてくれへんかな？」ってときも、遠慮なく頼んでみて。

Next.jsアプリにPlaywrightのE2Eテストを導入して、PRでCIが動くようにしてほしいねん。デスクトップとモバイル（iPhone）で並行テスト。あと、簡単なログインページのテストファイルも1つ作っといてくれる？

実践例 / 実録

うちのNext.jsアプリ「くぐる」でも、PlaywrightのE2EテストをCIで回してるんやけど、これも最初はClaude Codeに丸投げして作ったんよ。

最初はE2Eテストなくてな。でもやっぱ、新しい機能追加したり修正したりするたびに、ちゃんと動くかデプロイ前に確認したいやん？ 手動で確認するのも手間やし、見落としも怖いから、CIで自動化したいなって思っててん。

それでClaude Codeに、「Next.jsアプリにPlaywright入れて、PR時にCIで自動実行して。デスクトップとモバイル両方見てな」って一番雑なプロンプトを投げたんよ。

そしたら、もう完璧な回答が返ってきたわ。

まず、Playwrightのセットアップとして、playwright.config.ts を提案してくれはった。この設定ファイルの中で、projects っていう項目を使って、Desktop Chromium、Mobile Chrome、Mobile Safari って感じで、デスクトップとモバイルそれぞれでテストが並行で動くように組んでくれたんよ。各プロジェクトでviewportとかユーザーエージェントがちゃんと設定されてて、これには感動したわ。

次に、GitHub Actionsのワークフローファイル、github/workflows/playwright.yml も作ってくれた。これの中身がまたすごいねん。

  1. actions/checkout@v4 でコードをチェックアウトして。
  2. actions/setup-node@v4 でNode.jsの環境を整えてくれる。
  3. npm install で依存関係をインストール。
  4. npm run build:cf っていう、うちのプロジェクト特有のビルドコマンドまで認識して（これはCLAUDE.mdに書いてたからやと思う）、本番ビルドを走らせてくれた。
  5. そして、npm run test:e2e コマンドでPlaywrightのテストを実行。ここがミソやねんけど、webServer っていう設定をちゃんと入れてくれてて、Next.jsアプリが立ち上がってからテストが始まるようにしてくれてたわ。これがないと、テストがアプリにアクセスできひんからコケるんよ。

ホンマにPR出したら、GitHubのチェックでPlaywrightのテストがガーッと動き出して、全部パスしたらマージできるようになったんよ。これで安心してデプロイできるようになったし、開発効率も爆上がりしたわ。

つまずきポイント

Claude Codeが優秀や言うても、ちょっとハマりやすいポイントもあるから気を付けてな。

  • webServer の設定不足: Playwrightのテストは、アプリがちゃんと動いてないとアクセスできひんからコケるんよ。playwright.config.ts の webServer 設定で、command: 'npm run dev' とか url: 'http://localhost:3000'、あと timeout: 120 * 1000 みたいに、アプリが完全に立ち上がるまでのコマンドとURL、待機時間をしっかり設定してもらうのが大事やね。Claude Codeも基本はこれやってくれるけど、環境によってアプリの起動が遅いとかあるから、適宜調整してな。

  • 環境変数の渡し忘れ: テストでAPIキーとかDB接続情報みたいな環境変数が必要な場合、CI環境（GitHub Actionsとか）にそれを渡すの忘れたらアカンで。GitHub ActionsのSecretsを使うとか、適切な方法で安全に渡すようにしてな。

  • ビルド失敗: Playwrightテストの前に npm run build が必要な場合、CIのワークフローにそれが含まれてないと、テストサーバーが立ち上がらへんこともあるから注意やね。Claude Codeはだいたい入れてくれるけど、npm run build:cf みたいに特殊なビルドコマンドを使うときは、ちゃんとプロンプトで伝えておくか、出力されたYAMLを修正する必要があるかも。

  • タイムアウト: テストケースが増えたり、アプリの起動が遅かったりすると、CIの実行時間がタイムアウトしてしまうことがあるねん。そういうときは、playwright.config.ts で各テストのタイムアウト時間を調整するか、CI自体の実行時間設定を見直してみてな。