PlayWrightをつかってE2Eテストを書いてみる【超初級】

PlaywrightはE2Eテストの選択肢の一つって思っていましたが、そのほかにもさまざまな利用方法があることを知りました。
E2Eを実装する場合の選択肢はたくさんありますが、選択する際の一助になれれば幸いです！

:::note info
【本記事をオススメしたい人】
・Playwrightをこれから勉強したいと考えている人
・E2Eによる自動テストの導入を検討している人
:::

## Playwrightってなに？
ウェブアプリケーションの自動テストやスクレイピングなどのためのオープンソースのNode.jsライブラリです。Playwrightは、ブラウザコンテキスト内で動作することに特化しており、Chromium（Google ChromeとMicrosoft Edge）、WebKit（Safari）、およびFirefoxのエンジンをサポートしています。

さらに詳しく知りたい人は、「[Playwright](https://www.google.com/search?q=playwright&oq=Playwright&gs_lcrp=EgZjaHJvbWUqBggAEEUYOzIGCAAQRRg7MgYIARBFGDsyBggCEEUYOzIJCAMQABhDGIoFMgcIBBAAGIAEMgYIBRBFGDwyBggGEEUYPDIGCAcQRRg90gEINDQ5MGowajeoAgCwAgA&sourceid=chrome&ie=UTF-8)」で検索してみてください！

## Playwrightの特徴は？
Platwrightの主な特徴は下記の通りです。

- マルチブラウザサポート
- ブラウザと直接通信することで高速かつ安定した操作を実現
- 一般的なテストフレームワーク（例：Jest、Mocha、Jasmine）と統合することができる
- 様々なセレクタエンジンを提供しているため、テストやスクレイピングを行うことができる
- 非同期操作をスムーズに処理し、テストコードの記述を簡素化できる
- スマートフォン、タブレットなどのエミュレーションをサポートしており、レスポンシブデザインのテストやデバイス固有の振る舞いのテストが可能
- テストセッションの録画と再生をサポートしているため、問題の特定やデバッグを容易にする

## Playwrightを使えるようにしていく
早速インストールしていこうと思います！
ディレクトリを用意して[公式サイト](https://playwright.dev/docs/intro)を参考にインストールしていきます。

今回はあまり使ったことがなかったですが、`pnpm`でインストールを試みます。

`pnpm`については過去に書いた記事でも触れたことがあるのでよろしければご覧ください。

https://qiita.com/tanimoto-hikari/items/223e9922e99436a40beb

```javascript
pnpm create playwright
```

実行するといくつか質問されるので回答していきます。
質問事項は下記の通りです。

- TypeScriptかJavaScriptを選択（デフォルトはTypeScript）
- Tests フォルダの名前 (デフォルトは tests、またはプロジェクトに tests フォルダがある場合は e2e)
- GitHub Actionsワークフローを追加して、CI 上でテストを簡単に実行できるようにする
- Playwrightブラウザのインストール（デフォルトはtrue）

```javascript
Need to install the following packages:
  create-playwright@1.17.129
Ok to proceed? (y) y
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · TypeScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · true
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
```

基本的には、デフォルトで設定すれば良いと思います。
今回「Add a GitHub Actions workflow?」の項目だけあえて「true」にして実行しました。
問題がなければインストールが完了します。

:::note
npmのバージョンをアップデートするように求められたのでそれだけ対応しました。
```javascript
Run npm install -g npm@9.8.1 to update!
```
:::

## Playwrightでテストを実行してみる
Playwrightは、デフォルトで3つのブラウザでテストしてくれるように設定されているようです！
テストの対象になっているのは、chromium、firefox、webkitです。

サンプルにあったテストを実行してみます。
```javascript
npx playwright test

Running 6 tests using 4 workers
  6 passed (15.9s)

To open last HTML report run:

  npx playwright show-report
```

何やらテストが終わったそうなので言われるがまま次のコマンドを実行します。
```javascript
npx playwright show-report
```

すると　下記のような画面が立ち上がりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/76be72d3-5701-8b9f-db6c-0acc6f2d182c.png)

テストの結果がどうであったかのレポートを作成してくれるようです。
デフォルトではテストが失敗すると自動でレポートを開いてくれるとのことなので失敗しなければわざわざ開く必要はなさそうです！

:::note
まだテストが導入されていない環境に導入する場合は、既存の開発ワークフローに導入するのはハードルが高いと思います。

例えば、ローカルで実行してテスト結果をスクショしてissueに添付するなどで対応できるかもしれないな…なんて考えました。
:::

## Playwrightでテストを書いてみる
試しにサイトに流入した時に「title」に特定の文字があるか確認するテストを書きたいと思います。

下記のファイルを作成して単一テストを実行したいと思います。
```typescript
import { test, expect } from '@playwright/test';

test('has title', async ({ page }) => {
  await page.goto('https://hikkoshizamurai.jp/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(
    /引っ越し見積もりが一番安い業者を選べる無料比較サイト【引越し侍】/
  );
});
```

```javascript: 単一のテスト実行コマンド
npx playwright test checkTitle.spec.ts

Running 3 tests using 3 workers
  3 passed (7.2s)
```

成功したみたいです！
あえて含まれない文字にしてテストを実行してみます。

するとエラーになって自動でレポート画面が立ち上がりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/120ce03a-b928-90d1-6647-2f2715ded952.png)

詳細を確認するとtitleの箇所でエラーになっていることを確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/bebf88a8-885b-39f5-ddbc-d28616fcb24f.png)

テストの実行方法については下記のページに記載があるので詳細はそちらからご覧ください。

https://playwright.dev/docs/running-tests

また、`--debug`のオプションを実行コマンドの後ろにつけることでテストをデバックすることができます。
```javascript
npx playwright test checkTitle.spec.ts --debug
```

ブラウザが立ち上がり、デバックウィンドウの再生アイコンを押すことで記述した`await`ごとに実行していってくれるようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/c1810dfa-575b-5186-1352-0f186b0c7089.png)

## 【まとめ】PlayWrightをつかってE2Eテストを書いてみる
導入から簡単にテストを書くまでをやってみました。
本記事に書いてあることを実行するのにスムーズに行けば10分〜30分もあればできると思います。

業務でテストを個人で自動テストを導入する場合、簡単なものであれば時間をかけずに実装できる印象です。
自動テストでできるものは置き換えて、まずは自分の業務を圧縮できないか検討したいと思います。