E2Eテストツール「playwright」

## はじめに

ありがたいことに、今いるチームにはテストチームがいるのですがシステムの規模が大きくなっていく中で、最近大変そうな様子を感じます。
E2Eテストツールを導入したら軽減できる部分もあるのかな？ということで **playwright** を試してみました。


## Playwrightとは

Microsoftが 2020年1月31日 に初回リリースがされたE2Eのためのテスト自動化ツールです。
Chromium、WebKit、Firefox などの最新のレンダリング エンジンをすべてサポートしています。

https://en.wikipedia.org/wiki/Playwright_(software)

一般的には劇作家という意味の単語でした。

https://ja.wikipedia.org/wiki/%E5%8A%87%E4%BD%9C%E5%AE%B6


## はじめかた
https://playwright.dev/docs/intro

```
yarn create playwright
```

インストールコマンドの選択はこんな感じにしました。
```
✔ 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) · false
✔ Install Playwright browsers (can be done manually via 'yarn playwright install')? (Y/n) · true
```

### テストコードの書き味
[jest](https://jestjs.io/), [testing-library](https://testing-library.com/) あたりととても書き味が似ていますね...:eyes:

```example.spec.ts
import { test, expect } from '@playwright/test';

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

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});
```

### サンプルテストを動かしてみます
```
npx playwright test
```

### テスト結果をブラウザで確認できます

次のコマンドを実行すると http://localhost:9323/ が開かれます。
```
npx playwright show-report
```

なんだかgithubみを感じるUIです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/e23654da-bc8a-98f3-82df-99a747342000.png)

### UI Mode

> UI モードでテストを実行すると、タイム トラベル デバッグやウォッチ モードなどの開発者エクスペリエンスが向上します。


```
npx playwright test --ui
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/e4332fce-5372-b798-9764-f66f72d370aa.png)

実際に再生ボタンを押してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/04fcec3f-c395-72b7-c4de-db5812ebe09c.png)

これは...開発者エクスペリエンスが向上しそうです:muscle:

### テストの生成

> Playwright には、すぐにテストを生成する機能が備わっており、テストをすぐに開始できる優れた方法です。2 つのウィンドウが開きます。1 つはテストしたい Web サイトと対話するためのブラウザー ウィンドウで、もう 1 つはテストの記録、テストのコピー、テストのクリア、およびテストの言語の変更を行うことができる Playwright Inspector ウィンドウです。
https://playwright.dev/docs/codegen-intro

操作からテストが生成できるなら、開発チームのリソースだけでなく、テストチームにも協力してもらってテストケースの作成ができていい感じになりそうですね:thinking:
早速試してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/761ba0f5-3999-b1d2-17e9-41951e084f8e.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/be01a960-dcf1-76ee-2791-49ece614af42.png)

なんかフォーカス変わると下に文字が出ますね :eyes: :

#### テストの生成方法を学びます

次の手順を試しますので、もっと詳細情報が知りたい方は是非みてみてください :bow: 
https://playwright.dev/docs/codegen#recording-a-test

次のVSCodeのプラグインをインストールします。

https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright

サイドバーからフラスコのようなマークをクリックして次の画面を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/c01a433f-2e7f-df33-ae15-a76d760ad2b2.png)

##### 操作を記録する

`Record new`をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/6520f09e-5ad3-0315-5050-87c5320bedb9.png)
こんな画面が開くので、テストしたい画面のURLを貼ります。

今回はお試しなので次の値をURLバーに貼り付けます。
`demo.playwright.dev/todomvc`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/66f8b868-8043-8a90-08d4-6e7518a82df4.png)

テストファイルにはこのように記録されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/2209ee1f-c535-d513-2d8b-011ce268da51.png)

早速いくつかの操作を行ってみます。 
値を入力して todo を追加してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/94f837d4-f94b-7e64-e069-ee2ae7c23146.png)

記録された操作を見てみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/090e3bdc-f8c1-8f87-51ae-e0b7bad09a12.png)

11〜13行目で適当にクリックしまくったのがばれちゃいましたね。
手動での修正もできるので、キャンセルを押して一度記録を止めます。

##### 手動修正

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/01db8c70-d98d-8eb0-909d-ac319e20e8f0.png)

3つのclickを削除しました。
(hogeの入力操作がうまく記録されてなかったのでこっそり足しました。)

##### 確認

Show trace viewerにチェックを入れて、テストケースの左横の再生マークをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/d1b2489e-d428-2602-4daf-57712ab89362.png)

実行時間も出してくれます。すごい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/2d796729-6295-1fa7-1fc7-a6e1029fc65a.png)

Show trace viewerにチェックを入れいたので、Trace Viewerも確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/38d30a89-bc4f-8e01-991b-dd064430b415.png)

##### アサーション

実際期待値通りになってるのか？を確認する処理を追加します。

1. 左側のテスト > PLAYWRIGHT > Show browserにチェックを入れて、テストを実行します。
1. 途中で処理を入れることもできるので、確認処理を入れたいところにカーソルをあわせ、 PLAYWRIGHT > Record at curserをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/19d7764b-5157-a2a5-5f62-f24ab6faa475.png)

1. 画面上部の abと書かれたアイコンをクリックします。テキストが一致するかの確認ができるやつです。
1. hogeをクリックすると、Assert that element contains textと書かれたダイアログが出てくるので緑のチェックマークをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/a4e1d445-c64f-e3ab-60ad-ae9ce2499470.png)

このようにテキストが含まれるかの確認ができます。 他には表示非表示など、いろいろ確認ができそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/c40b48a3-92e7-b893-84f9-38cdff274425.png)

実行してみたところ成功したので、今度は値を変えて、失敗するかを確認してみようと思います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/0f9b530a-803a-2538-ed47-cfd5093ec5a4.png)

waitingになっている...
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/5e39b84f-a4dc-29b9-5a13-6e540194565e.png)

失敗した結果も確認しやすそうです！ :smiley:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2952155/7ad5037d-6f69-cab2-a6ed-95bf2e254063.png)


#### 認証周りも整ってる

https://playwright.dev/docs/auth 


## 感想

操作した感じでは、スキルセット的にあまりギャップがなく、今の案件ですぐにでも導入できそうな気配を感じました。
テストコードの生成も大体操作でいけそうなのでそんなに時間はかからなそうだと思いました (いろいろなあれがあれで導入できるかわからないですが　:sweat: )

みていただきありがとうございました :santa: :v: