ReactアプリをPlaywrightでテストする〜レポート機能〜

今回は、テスト結果を成果物として残すことを意識して、レポート機能をやってみます。
playwrightにもともとあるレポーターの他に、Third Partyとして紹介されているAllureも少し試そうと思います。

## 環境
- macOS Monterey 12.2.1
- Visual Studio Code 1.66.2
- Node.js 16.13.0
- React 18.0.0
- playwright 1.21.1
- Allure 2.17.2
- java 1.8.0_211
- allure-playwright 2.0.0-beta.16

## 前回書いた実装でのレポート

前回の簡単なテストコードはこうでした。

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

test('basic test', async ({ page, context }) => {   // ①
  await page.goto('http://localhost:3000/');   // ③
  await expect(page).toHaveTitle(/React App/); // ④

  const text = page.locator('p');
  await expect(text).toHaveText(/Edit src\/App.js and save to reload./);  // ⑤

  const [newPage] = await Promise.all([
    context.waitForEvent('page'),
    page.click('a[target="_blank"]')  // ⑥
  ]);
  await newPage.waitForLoadState();   // ⑦
  await expect(newPage).toHaveURL('https://reactjs.org/');  // ⑧
  await expect(newPage).toHaveTitle(/React/);   // ⑨
});
```

これをデフォルトのレポート機能で表示するとこのように出力されます。

![playwright-report.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116042/4d8d03d6-67ef-b0ff-5ff2-6a9e00ff7fa1.png)

ぱっと見、何のテストをしているのかわかりにくいので、`test.step()`を書き足してみます。

## ステップ内容を書いてみる
最初の２行分を、`test.step()`でまとめてみます。
```ts
test('reactデモページをテストする', async ({ page, context }) => {
  await test.step('Topページにアクセスすると、タイトルにReactAppと表示されること', async () => {
    await page.goto('http://localhost:3000/');
    await expect(page).toHaveTitle(/React App/);
  });
　　　...
});
```
ひとまずテストを再実行して、レポートを再度出力してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116042/6f954c3a-dcf6-f1c4-34e3-3ca800bbb415.png)
テストのタイトルと、テストの手順が記載した通り、出力されました。
こんなふうに残りのテスト手順も追記していきます。
```ts
import { test, expect } from '@playwright/test';

test('reactデモページをテストする', async ({ page, context }) => {
  await test.step('Topページにアクセスすると、タイトルにReactAppと表示されること', async () => {
    await page.goto('http://localhost:3000/');
    await expect(page).toHaveTitle(/React App/);
  });

  await test.step('"Edit src/App.js and save to reload."と表示されること', async () => {
    const text = page.locator('p');
    await expect(text).toHaveText(/Edit src\/App.js and save to reload./);
  });

  await test.step('リンクをクリックすると別タブが開かれること', async () => {
    const [newPage] = await Promise.all([
      context.waitForEvent('page'),
      page.click('a[target="_blank"]')
    ]);
    await test.step('別タブにReactサイトが表示されること', async() => {
      await newPage.waitForLoadState();
      await expect(newPage).toHaveURL('https://reactjs.org/');
      await expect(newPage).toHaveTitle(/React/);
    });
  });
});
```
`test.step()` は入れ子で書けます。
出力されるレポートはこういうふうに出力されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116042/a686bc85-c874-2e27-61b7-14a4237bf3e7.png)

これでも十分わかりやすいレポートになったかと思います。
次はAllureを導入してみることにします。

## Allure Reportで出力する

playwright のドキュメントにも、Third Party製レポートとして唯一紹介されてるものです。
[こちら](https://playwright.dev/docs/test-reporters#third-party-showcase)を参考に、インストールしてみます。

```shell
yarn add -D allure-playwright
```
また、Allure自体はHomebrewでインストールします。（実行に必要なJavaのランタイムも一緒にインストールされます）詳しくは[本家サイト](https://docs.qameta.io/allure/)を参照ください。
```shell
brew install allure
```


テストコードに、epicとstoryを書いてみます。
```ts
test('reactデモページをテストする', async ({ page, context }) => {
  allure.epic('reactデモページをテストする');
  allure.story('初期表示の確認');
  ...
});
```
Allureのレポートとして出力するには、`reporter`オプションを追加してテストを実行します。
```shell
yarn playwright test --reporter=line,allure-playwright 
```
Allureのレポート出力は以下のコマンドを実行します。
```shell
allure generate ./allure-results --clean && allure open ./allure-report
```
以下のようなWebページが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116042/184ef84f-9730-2e4a-8599-4914911939fe.png)
FEATURES BY STORIESの「reactでもページをテストする」がリンクになってるので、そちらをクリックするとPlaywrightのレポートのような構造のテストステップが出力されたページに移動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/116042/5eb03281-e80c-9e56-37f1-ca8ff22897a0.png)

左側はallureの機能で記載した内容で出力されて、右側はPlaywrightのレポートとほぼ同様の内容が出るようです。とてもきれいなレポートが出力されるので、成果物としてはこちらの方が良さそうだな、と個人的には思ってます。

今回は簡単にレポート機能を試してみました。
次は、Playwrightの機能をもっと試していこうと思ってます。

## リンク
Playwright レポート機能 https://playwright.dev/docs/test-reporters
Allure Framework https://docs.qameta.io/allure/
allure-playwright(npm) https://www.npmjs.com/package/allure-playwright