Playwrightで遊んでみる

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

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

![スクリーンショット 2024-06-21 9.57.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175426/ca2c2b83-d1be-419c-0c17-87c34cff4d77.png)

https://npmtrends.com/cypress-vs-playwright-vs-puppeteer

# 環境

- [@playwright/test](https://github.com/microsoft/playwright) 1.40.1

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

- [Next.js](https://nextjs.org/) 13.4.19
- [React](https://react.dev/) 18.2.0
- [Node.js](https://nodejs.org/) 20.11.0

# インストール


```sh
npm init playwright@latest
```

or

```sh
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](https://github.com/playwright-community/eslint-plugin-playwright) があるので使いましょう。
以下、設定例。

```js:.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`　を使うと、ブラウザが起動して、テスト実行時に画面遷移が確認できるので、利用頻度が高いです。

```json: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](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) が、VSCode からテストを実行やデバッグするのに有用です。

# テストコードの生成

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

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

## サンプル

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

![スクリーンショット 2024-02-09 14.55.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/175426/ce393d4c-f26e-9908-16b6-165124300bb1.png)


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

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

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

```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](https://playwright.dev/docs/ci)）に書かれている通り、pre-built Playwright Docker image の `mcr.microsoft.com/playwright:v1.41.1-jammy` を使うことです。
必要なものが全て入っています。

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

```sh
# 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
```