Heroku での Playwright と Chrome ブラウザのテスト: 初心者向けガイド

私はいつも、ユニット テストが実行される (そして合格する) のを見るのが大好きでした。ユニット テストは高速で、テストに合格すると、個々の部分が想定どおりに動作するという確信が得られます。逆に、ブラウザーのエンドツーエンド テストの作成と実行に非常に時間がかかるため、その優先順位付けに苦労することがよくありました。 幸いなことに、エンドツーエンドのブラウザ内テスト用のツールは、ここ数年で大幅に改善され、高速化しています。また、ヘッドレス ブラウザのセットアップにより、ブラウザ テストを CI の一部として実行できます。 最近、Heroku CI 内でヘッドレス Chrome を使用してブラウザ内テストを自動化する方法について説明している 見つけました。Heroku にはヘッドレス Chrome をインストールするビルドパックがあり、CI パイプラインでテストに呼び出すことができます。 Heroku ブログ投稿を ブログ投稿のサンプル設定は、 と でテストされた React アプリでした。これは素晴らしいスタートですが、Puppeteer の代わりに 使用したらどうなるでしょうか? それは可能ですか? Puppeteer Jest Playwright を 調べてみることにしました。結局のところ、Playwright でも同じことができるのです! そこで、Heroku CI で使用されるヘッドレス Chrome ブラウザで Playwright テストを実行するために必要な手順をまとめました。この記事では、セットアップの手順を説明します。 エンドツーエンドテストのためのブラウザ自動化について エンドツーエンドのテストでは、ユーザーがブラウザで実際にアプリを操作する方法をキャプチャし、完全なワークフローを検証します。Playwright では、Chrome、Firefox、Safari でのテストにより、このプロセスを非常にシームレスに実行できます。もちろん、CI でブラウザ テストのフル スレートを実行するのはかなり負荷がかかるため、ヘッドレス モードが役立ちます。 Heroku の 、Heroku アプリに Chrome をインストールするので、非常に軽量なセットアップで Heroku CI で Playwright テストを実行できます。 Chrome for Testing ビルドパックは テスト申請の概要 ちょうど試してみたかったので、Heroku ブログ投稿で フォークしました。アプリケーションは、リンク、テキスト入力、送信ボタンを備えたシンプルな React アプリでした。テストは 3 つありました。 最初に参照された GitHub リポジトリを リンクが機能し、正しい場所にリダイレクトされることを確認します。 テキスト入力にユーザー入力が正しく表示されることを確認します。 フォームを送信すると、ページに表示されるテキストが更新されることを確認します。 とても簡単です。あとは、Puppeteer と Jest の代わりに Playwright を使用するようにコードを変更するだけです。あ、npm の代わりに も使いたいと思いました。こちらが へのリンクです。 pnpm フォークした GitHub リポジトリ Playwrightを使用するためにコードを変更する コードを変更するために私が実行した手順を見ていきましょう。私は リポジトリと同一のフォークされたリポジトリから始めました。 heroku-examples pnpmを使用する 私は npm ではなく pnpm を使いたかったのです。(個人的な好みです。) そこで、まず次の操作を実行しました。 ~/project$ corepack enable pnpm ~/project$ corepack use pnpm@latest Installing pnpm@9.12.3 in the project… … Progress: resolved 1444, reused 1441, downloaded 2, added 1444, done … Done in 14.4s ~/project$ rm package-lock.json ~/project$ pnpm install # just to show everything's good Lockfile is up to date, resolution step is skipped Already up to date Done in 1.3s プロジェクトに脚本家を追加する 次に、Puppeteer と Jest を削除し、Playwright を追加しました。 ~/project$ pnpm remove \ babel-jest jest jest-puppeteer @testing-library/jest-dom ~/project$ $ pnpm create playwright Getting started with writing end-to-end tests with Playwright: Initializing project in '.' ✔ Do you want to use TypeScript or JavaScript? · JavaScript ✔ Where to put your end-to-end tests? · tests ✔ Add a GitHub Actions workflow? (y/N) · false ✔ Install Playwright browsers (can be done manually via 'pnpm exec playwright install')? (Y/n) · false ✔ Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo pnpm exec playwright install-deps')? (y/N) · false Installing Playwright Test (pnpm add --save-dev @playwright/test)… … Installing Types (pnpm add --save-dev @types/node)… … Done in 2.7s Writing playwright.config.js. Writing tests/example.spec.js. Writing tests-examples/demo-todo-app.spec.js. Writing package.json. また、 から Jest 構成セクションも削除しました。 package.json Playwright を Chromium のみを使用するように設定 Playwright テストは、Chrome、Firefox、Safari で実行できます。Chrome に焦点を当てていたため、生成された ファイルの セクションから他のブラウザーを削除しました。 playwright.config.js projects /* Configure projects for major browsers */ projects: [ { name: 'chromium', use: { ...devices['Desktop Chrome'] }, }, // { // name: 'firefox', // use: { ...devices['Desktop Firefox'] }, // }, // // { // name: 'webkit', // use: { ...devices['Desktop Safari'] }, // }, ], … Puppeteer テストコードを Playwright テストコードと交換する 元のコードには に Puppeteer テスト ファイルがありました。そのファイルを に移動しました。次に、Playwright の規則を使用するようにテストを更新しました。これは非常にきれいにマッピングされました。新しいテスト ファイルは次のようになりました。 src/tests/puppeteer.test.js tests/playwright.spec.js const ROOT_URL = 'http://localhost:8080'; const { test, expect } = require('@playwright/test'); const inputSelector = 'input[name="name"]'; const submitButtonSelector = 'button[type="submit"]'; const greetingSelector = 'h5#greeting'; const name = 'John Doe'; test.beforeEach(async ({ page }) => { await page.goto(ROOT_URL); }); test.describe('Playwright link', () => { test('should navigate to Playwright documentation page', async ({ page }) => { await page.click('a[href="https://playwright.dev/"]'); await expect(page.title()).resolves.toMatch('| Playwright'); }); }); test.describe('Text input', () => { test('should display the entered text in the text input', async ({ page }) => { await page.fill(inputSelector, name); // Verify the input value const inputValue = await page.inputValue(inputSelector); expect(inputValue).toBe(name); }); }); test.describe('Form submission', () => { test('should display the "Hello, X" message after form submission', async ({ page }) => { const expectedGreeting = `Hello, ${name}.`; await page.fill(inputSelector, name); await page.click(submitButtonSelector); await page.waitForSelector(greetingSelector); const greetingText = await page.textContent(greetingSelector); expect(greetingText).toBe(expectedGreeting); }); }); 削除し、代わりに Playwright の webServer を使用します。 start-server-and-test React アプリをテストするには、まず別のプロセスで ( で) 起動してから、テストを実行する必要がありました。これは、Puppeteer を使用する場合でも Playwright を使用する場合でも同じです。Puppeteer の場合、Heroku の例では パッケージが使用されていました。 http://localhost:8080 start-server-and-test ただし、テストを実行する前にアプリを起動するように Playwright を設定できます。これは非常に便利です。 プロジェクトから 削除しました。 start-server-and-test ~/project$ pnpm remove start-server-and-test で、下部の webServer セクションのコメントを解除し、次のように変更しました。 playwright.config.js /* Run your local dev server before starting the tests */ webServer: { command: 'pnpm start', url: 'http://127.0.0.1:8080', reuseExistingServer: !process.env.CI, }, 次に、元の ファイルから スクリプトを削除しました。代わりに、テスト スクリプトは次のようになりました。 package.json test:ci "scripts": { … "test": "playwright test --project=chromium --reporter list" }, ローカルマシンに Playwright ブラウザをインストールする Playwright は、テストに使用する最新のブラウザ バイナリをインストールします。そのため、ローカル マシンでは、Playwright の Chromium バージョンをインストールする必要がありました。 ~/project$ pnpm playwright install chromium Downloading Chromium 130.0.6723.31 (playwright build v1140) from https://playwright.azureedge.net/builds/chromium/1140/chromium-linux.zip 164.5 MiB [====================] 100% Heroku の Chrome for Testing ビルドパックは、テストに使用するブラウザをインストールします。Playwright が独自のブラウザをインストールするのに時間とリソースを費やすのではなく、そのブラウザを使用するように CI を設定します。 注: ローカルでテストを実行する これで準備は完了です。次はローカルでテストを試してみる番です。 ~/project$ pnpm test > playwright test --project=chromium --reporter list Running 3 tests using 3 workers ✓ 1 [chromium] > playwright.spec.js:21:3 > Text input > should display the entered text in the text input (911ms) ✘ 2 [chromium] > playwright.spec.js:14:3 > Playwright link > should navigate to Playwright documentation page (5.2s) ✓ 3 [chromium] > playwright.spec.js:31:3 > Form submission > should display the "Hello, X" message after form submission (959ms) ... - waiting for locator('a[href="https://playwright.dev/"]') 13 | test.describe('Playwright link', () => { 14 | test('should navigate to Playwright documentation page', async ({ page }) => { > 15 | await page.click('a[href="https://playwright.dev/"]'); | ^ 16 | await expect(page.title()).resolves.toMatch('| Playwright'); 17 | }); 18 | }); ああ、その通りです。アプリ内のリンクが Puppeteer ではなく Playwright のドキュメントに移動することを期待するようにテストを変更しました。19 行目の 更新する必要がありました。 src/App.js Playwright Documentation さて、もう一度テストを実行する時間になりました... ~/project$ pnpm test > playwright test --project=chromium --reporter list Running 3 tests using 3 workers ✓ 1 [chromium] > playwright.spec.js:21:3 > Text input > should display the entered text in the text input (1.1s) ✓ 2 [chromium] > playwright.spec.js:14:3 > Playwright link > should navigate to Playwright documentation page (1.1s) ✓ 3 [chromium] > playwright.spec.js:31:3 > Form submission > should display the "Hello, X" message after form submission (1.1s) 3 passed (5.7s) テストに合格しました! 次は、Heroku CI に移行するときです。 CI パイプラインを使用するために Heroku にデプロイする Heroku ブログ投稿の指示に従って、Heroku CI パイプラインでアプリをセットアップしました。 Herokuパイプラインを作成する Heroku で新しいパイプラインを作成し、フォークした GitHub リポジトリに接続しました。 次に、アプリをステージングに追加しました。 次に、 タブに移動して、 をクリックしました。 「テスト」 「Heroku CI を有効にする」 最後に、 ファイルを変更して、 呼び出すように設定されたテスト スクリプトを削除しました ファイルから スクリプトはすでに削除してありました の スクリプトが使用されるようになり、Heroku CI はデフォルトでそのスクリプトを検索するようになりました。 app.json npm test:ci package.json test:ci package.json test Chrome for Testing ビルドパックを使用するように設定された私の ファイルは次のようになります。 app.json { "environments": { "test": { "buildpacks": [ { "url": "heroku-community/chrome-for-testing" }, { "url": "heroku/nodejs" } ] } } } 初期テスト実行 コードを GitHub にプッシュすると、Heroku CI でテスト実行がトリガーされました。 テスト実行は失敗しましたが、心配していませんでした。Playwright の設定がいくつか必要になることはわかっていました。 テスト ログを調べてみると、次のことがわかりました。 Error: browserType.launch: Executable doesn't exist at /app/.cache/ms-playwright/chromium-1140/chrome-linux/chrome Playwright は Chrome ブラウザ インスタンスを探していました。CI テスト セットアップの一部として、 コマンドを使用してインストール 。しかし、それでは Chrome for Testing ビルドパックの目的が台無しになってしまいます。Chrome はすでにインストールされていたので、それを適切に指定するだけで済みました。 playwright install chromium できました Heroku のテスト設定ログを振り返ってみると、次の行が見つかりました。 Installed Chrome dependencies for heroku-24 Adding executables to PATH /app/.chrome-for-testing/chrome-linux64/chrome /app/.chrome-for-testing/chromedriver-linux64/chromedriver Installed Chrome for Testing STABLE version 130.0.6723.91 つまり、私が使用したいブラウザは にありました。Playwright でそこを検索するだけで済みます。 /app/.chrome-for-testing/chrome-linux64/chrome Playwright がインストールされている Chrome ブラウザを見つけるのを手伝う ここでの細かい詳細に興味がない場合は、このセクションをスキップして、下にある完全な をコピーしてください。これで、Heroku CI で Playwright を起動して実行するために必要なものが揃います。 注: app.json Playwright のドキュメントで、 使用したかどうかを Playwright に伝える環境変数を設定できることが分かりました。その環境変数は です。そこから始めることにしました。 すべてのブラウザ インストールにカスタムの場所を PLAYWRIGHT_BROWSERS_PATH では、次のように 変数を設定します。 app.json env { "environments": { "test": { "env": { "PLAYWRIGHT_BROWSERS_PATH": "/app/.chrome-for-testing" }, ... CI でのテストで何が起こるかを確認するために、コードを GitHub にプッシュしました。 予想通り、再び失敗しました。ただし、ログ エラーには次のように表示されました。 Error: browserType.launch: Executable doesn't exist at /app/.chrome-for-testing/chromium-1140/chrome-linux/chrome かなり近づきました。私はこうすることにしました: Playwright が Chrome ブラウザを配置すると想定する場所に必要なフォルダを作成します。次のようなコマンドになります。 mkdir -p "$PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux" このフォルダに、Heroku ビルドパックによってインストールされた Chrome バイナリを指すシンボリックリンクを作成します。次のようになります。 ln -s \ $PLAYWRIGHT_BROWSERS_PATH/chrome-linux64/chrome \ $PLAYWRIGHT_BROWSERS_PATH/chromium-1140/chrome-linux/chrome しかし、これが将来にわたって有効かどうかは心配でした。 最終的に、Playwright は新しいバージョンの Chromium を使用するようになり、 フォルダーのようには見えなくなります。 Playwright がどこに表示されるかはどうすればわかるのでしょうか? chromium-1140 そのとき、ブラウザのインストールの予行演習ができることを発見しました。 ~/project$ pnpm playwright install chromium --dry-run browser: chromium version 130.0.6723.31 Install location: /home/alvin/.cache/ms-playwright/chromium-1140 Download url: https://playwright.azureedge.net/builds/chromium/1140/chromium-linux.zip Download fallback 1: https://playwright-akamai.azureedge.net/builds/chromium/1140/chromium-linux.zip Download fallback 2: https://playwright-verizon.azureedge.net/builds/chromium/1140/chromium-linux.zip 「インストール場所」の行は重要です。PLAYWRIGHT_BROWSERS_PATH 設定すると、次のようになります。 PLAYWRIGHT_BROWSERS_PATH ~/project$ PLAYWRIGHT_BROWSERS_PATH=/app/.chrome-for-testing \ pnpm playwright install chromium --dry-run browser: chromium version 130.0.6723.31 Install location: /app/.chrome-for-testing/chromium-1140 ... それが私が望んでいたことです。ちょっとした マジックを使って、これを実行しました: awk ~/project$ CHROMIUM_PATH=$( \ PLAYWRIGHT_BROWSERS_PATH=/app/.chrome-for-testing \ pnpm playwright install --dry-run chromium \ | awk '/Install location/ {print $3}' ) ~/project$ echo $CHROMIUM_PATH /app/.chrome-for-testing/chromium-1140 これらすべてを理解したら、あとは に スクリプトを追加するだけです。 はすでに に設定されているため、スクリプトは少しシンプルになります。最終的な ファイルは次のようになります。 app.json test-setup PLAYWRIGHT_BROWSERS_PATH env app.json { "environments": { "test": { "env": { "PLAYWRIGHT_BROWSERS_PATH": "/app/.chrome-for-testing" }, "buildpacks": [ { "url": "heroku-community/chrome-for-testing" }, { "url": "heroku/nodejs" } ], "scripts": { "test-setup": "CHROMIUM_PATH=$(pnpm playwright install --dry-run chromium | awk '/Install location/ {print $3}'); mkdir -p \"$CHROMIUM_PATH/chrome-linux\"; ln -s $PLAYWRIGHT_BROWSERS_PATH/chrome-lin ux64/chrome $CHROMIUM_PATH/chrome-linux/chrome" } } } } 何をするのかを簡単に説明します。 test-setup を考慮して、 と を使用して、Playwright が Chrome ブラウザを検索するルート フォルダを決定します。これを 変数の値として設定します。 PLAYWRIGHT_BROWSERS_PATH playwright install -- dry-run awk CHROMIUM_PATH に新しいフォルダー (および必要な親フォルダー) を作成します。これは、Playwright が バイナリを検索する実際のフォルダーです。 CHROMIUM_PATH/chrome-linux chrome そのフォルダーに、Chrome の Heroku ビルドパックのインストール ( ) を指すシンボリック リンクを作成します。 /app/.chrome-for-testing/chrome-linux64/chrome 再度テストを実行する 更新した ファイルを使用すると、Playwright はビルドパックから Chrome インストールを使用できるようになります。もう一度テストを実行するときが来ました。 app.json 成功！ スクリプトは期待どおりに実行されました。 test-setup Playwright は バイナリにアクセスしてテストを実行し、合格しました。 chrome 結論 私の Web アプリケーションのエンドツーエンドのテストは、それほど面倒ではなくなってきているので、ますます優先しています。最近では、Playwright も頻繁に使用しています。Playwright は柔軟で高速です。そして、Heroku CI の Chrome for Testing ビルドパックを使用して Playwright を稼働させるための作業 (私 ために!) が完了したので、ブラウザー自動化テスト スイートの構築を再び開始できます。 と皆さんの このウォークスルーのコードは私の で入手できます。 GitHub リポジトリ 楽しいコーディングを！