Playwrightで遊んでみる

何故 playwright なのか？（playwright vs cypress vs puppeteer）

e2eテストツールとしては、他に cypress や puppeteer が有名且つ歴史がありますが、 Chromium, Firefox, WebKit に対応している点（単一コードで動かせる）と、npm trends の勢い（2023年7月頃から、急激にダウンロード数が増えている）を見て、使ってみました。
※ 2024/6時点で、playwright が cypress を超えています。

環境

• @playwright/test 1.40.1

以下のバージョンは関係ないはずだが、実際に使った環境を記載。

• Next.js 13.4.19
• React 18.2.0
• Node.js 20.11.0

インストール

npm init playwright@latest

or

yarn create playwright

これで、以下が行われます。

• 必要なパッケージ（@playwright/test)のインストール
• config（playwright.config.ts）の追加
• サンプルコード（e2e/example.spec.ts, tests-examples/demo-todo-app.spec.ts）の追加
  • 不要であれば、削除してしまってもいいでしょう
• .gitignore への追加

eslint plugin

eslint-plugin-playwright があるので使いましょう。
以下、設定例。

.eslintrc.js

  overrides: [
    :
    {
      files: ['e2e/**/*.spec.[jt]s?(x)'],
      extends: ['plugin:playwright/recommended'],
      rules: {
        // NOTE: testing-library and playwright have the same functions (e.g. getByRole), so disable rules for testing-library.
        'testing-library/prefer-screen-queries': 'off',
       },
    },
  ],

起動方法

色んな起動オプションが用意されていますが（オプションの詳細は https://playwright.dev/docs/running-tests を参照）、以下のような形で scripts に登録しています。

特に、playwright test --ui　を使うと、ブラウザが起動して、テスト実行時に画面遷移が確認できるので、利用頻度が高いです。

package.json

  "scripts": {
    :
    "test:e2e": "playwright test --trace on",
    "test:e2e:trace-off": "playwright test",
    "test:e2e:debug": "playwright test --debug",
    "test:e2e:headed": "playwright test --headed",
    "test:e2e:report": "playwright show-report",
    "test:e2e:ui": "playwright test --ui"

• ポイント（お好みで要変更）
  • デフォルトで、--trace on にしています。
    • test-results ディレクトリ配下に、テスト結果が格納され、失敗時に画面遷移を確認できるようになります。
    • テスト x ブラウザ毎に最新のファイルしか残らないので、ファイルが無限に増えていくことはありません。

VSCode extension

Playwright Test for VSCode が、VSCode からテストを実行やデバッグするのに有用です。

テストコードの生成

以下のコマンドを実行することにより、「ブラウザ」と「Playwright Inspector」が立ち上がります。
<テストコードを生成した対象URL> は省略可能で、後でブルウザに打ち込むことも可能です。

npx playwright codegen <テストコードを生成した対象URL>

サンプル

以下は、試しに npx playwright codegen https://playwright.dev/ を実行し、「Playwright enables ...」という h1 タグをクリックした時の例です。
右の「Playwright Inspector」の 5行目に、それを反映した行が追加されているのが分かります。

config（playwright.config.ts）のカスタマイズ

テスト起動前に、アプリサーバーも起動させる

この設定をすることで、「アプリサーバー起動」 → 「テスト実行」とすることなく、単に「テスト実行」で済むようになります。

  /* Run your local dev server before starting the tests */
  webServer: {
    command: 'yarn dev',
    url: 'http://127.0.0.1:3000',
    reuseExistingServer: !process.env.CI,
  },

playwright の実行環境（CI環境での実行時）

必要なもの

https://playwright.dev/docs/browsers に書かれている通り、以下をインストールする必要があります。

• 特定バージョンのブラウザのバイナリ
• System dependencies

ローカルで動かす時は、初期インストール時に完了していますが、CI環境で動かす場合は、これらをインストールする必要があります。

インストール方法

最も簡単な方法は、ドキュメント（Continuous Integration）に書かれている通り、pre-built Playwright Docker image の mcr.microsoft.com/playwright:v1.41.1-jammy を使うことです。
必要なものが全て入っています。

これ以外の環境で動かしたい場合は、これも↑のドキュメントに書いている通り、以下のコマンドを使ってインストールする必要があります。

# Install Playwright browsers and dependencies
npx playwright install --with-deps

ちなみに、System dependencies としては、以下が必要なようです（System dependencies をインストールしなかった場合に出たCircleCIのログより）。

    ║ Host system is missing dependencies to run browsers. ║
    ║ Please install them with the following command:      ║
    ║                                                      ║
    ║     sudo yarn playwright install-deps                ║
    ║                                                      ║
    ║ Alternatively, use apt:                              ║
    ║     sudo apt-get install libatk1.0-0\                ║
    ║         libatk-bridge2.0-0\                          ║
    ║         libcups2\                                    ║
    ║         libdrm2\                                     ║
    ║         libxcb1\                                     ║
    ║         libxkbcommon0\                               ║
    ║         libatspi2.0-0\                               ║
    ║         libx11-6\                                    ║
    ║         libxcomposite1\                              ║
    ║         libxdamage1\                                 ║
    ║         libxext6\                                    ║
    ║         libxfixes3\                                  ║
    ║         libxrandr2\                                  ║
    ║         libgbm1\                                     ║
    ║         libpango-1.0-0\                              ║
    ║         libcairo2\                                   ║
    ║         libasound2