Github actions で playwright e2e を流す

はじめに

記事を見ていただきありがとうございます！
@HayatoHanaoka と申します。
今日は、個人的に興味があって学習して（遊んで）いる内容で学びがありました。
正直スーパー初歩的な内容ではあるのですが、あくまで自身の学びの履歴として残しておきます。
こういった小さな学びを残しておくことに意味があると信じて...笑

起こったこと

Github actions で playwright test をしたら動かなかった

個人的に気になっていた Next.js を使って簡単なアプリケーションを作成しようと考え、
🤪「Github actions を使って CI を導入してみよっか！ワクワクすっぞ！」
と思いつきやってみていました。
以下の公式Docs達を参考に、自分なりに作ったのが以下のyaml ファイルです。

.github/workflows/github-actions.yaml

name: nextjs app build workflow
run-name: Run test when ${{ github.actor }} is push ${{ github.ref_name}}
on:
  pull_request:
    types:
      - opened
      - reopened
jobs:
  RunE2ETests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: setup Node.js 23
        uses: actions/setup-node@v4
        with:
          node-version: '23.0'
          cache: npm
          cache-dependency-path: ./package-lock.json
      - name: Install dependencies
        run: npm install
      - name: run e2e
        run: npm run test:e2e

さて、試しにPushして動くことを確認してみると、 npm run test:e2e で失敗しました。
以下、エラーログです。

> test:e2e
> playwright test

Running 3 tests using 2 workers
[WebServer] <w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Unable to snapshot resolve dependencies
[WebServer] <w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Unable to snapshot resolve dependencies
××××FF××F

  1) [Desktop Chrome] › app.spec.ts:3:5 › should navigate to the about page ────────────────────────

    Error: browserType.launch: Executable doesn't exist at /home/runner/.cache/ms-playwright/chromium_headless_shell-1148/chrome-linux/headless_shell
    ╔═════════════════════════════════════════════════════════════════════════╗
    ║ Looks like Playwright Test or Playwright was just installed or updated. ║
    ║ Please run the following command to download new browsers:              ║
    ║                                                                         ║
    ║     npx playwright install                                              ║
    ║                                                                         ║
    ║ <3 Playwright Team                                                      ║
    ╚═════════════════════════════════════════════════════════════════════════╝

    Retry #1 ───────────────────────────────────────────────────────────────────────────────────────

    Error: browserType.launch: Executable doesn't exist at /home/runner/.cache/ms-playwright/chromium_headless_shell-1148/chrome-linux/headless_shell
    ╔═════════════════════════════════════════════════════════════════════════╗
    ║ Looks like Playwright Test or Playwright was just installed or updated. ║
    ║ Please run the following command to download new browsers:              ║
    ║                                                                         ║
    ║     npx playwright install                                              ║
    ║                                                                         ║
    ║ <3 Playwright Team                                                      ║
    ╚═════════════════════════════════════════════════════════════════════════╝

    attachment #1: trace (application/zip) ─────────────────────────────────────────────────────────
    test-results/app-should-navigate-to-the-about-page-Desktop-Chrome-retry1/trace.zip
    Usage:

        npx playwright show-trace test-results/app-should-navigate-to-the-about-page-Desktop-Chrome-retry1/trace.zip

    ────────────────────────────────────────────────────────────────────────────────────────────────

  〜 中略 〜

  3 failed
    [Desktop Chrome] › app.spec.ts:3:5 › should navigate to the about page ─────────────────────────
    [Mobile Chrome] › app.spec.ts:3:5 › should navigate to the about page ──────────────────────────
    [Mobile Safari] › app.spec.ts:3:5 › should navigate to the about page ──────────────────────────
Error: Process completed with exit code 1.

原因

playwright で使用するブラウザのインストールをしていなかった！

yaml を見た時点で気づいている方もいらっしゃるとは思うのですが、上記が原因でした。
では、どのようにインストールしたら良いかというと、これもまた公式Docsに書いてありました。

修正した yaml が以下となります。

name: nextjs app build workflow
run-name: Run test when ${{ github.actor }} is push ${{ github.ref_name}}
on:
  pull_request:
    types:
      - opened
      - reopened
jobs:
  RunE2ETests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: setup Node.js 23
        uses: actions/setup-node@v4
        with:
          node-version: '23.0'
          cache: npm
          cache-dependency-path: ./package-lock.json
      - name: Install dependencies
        run: npm install
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
      - name: run e2e
        run: npm run test:e2e

最後に

e2eテストをCIで行う際には、ブラウザが入っているかどうかは気にした方が良いですね。
既存のプロダクトに追加する形であればその心配はないかとは思うのですが、自分で新規に作成する際には要注意です。
引き続き学習を進めていきます！