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

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

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

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/);   // ⑨
});

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

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

ステップ内容を書いてみる

最初の２行分を、test.step()でまとめてみます。

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

ひとまずテストを再実行して、レポートを再度出力してみます。

テストのタイトルと、テストの手順が記載した通り、出力されました。
こんなふうに残りのテスト手順も追記していきます。

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() は入れ子で書けます。
出力されるレポートはこういうふうに出力されました。

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

Allure Reportで出力する

playwright のドキュメントにも、Third Party製レポートとして唯一紹介されてるものです。
こちらを参考に、インストールしてみます。

yarn add -D allure-playwright

また、Allure自体はHomebrewでインストールします。（実行に必要なJavaのランタイムも一緒にインストールされます）詳しくは本家サイトを参照ください。

brew install allure

テストコードに、epicとstoryを書いてみます。

test('reactデモページをテストする', async ({ page, context }) => {
  allure.epic('reactデモページをテストする');
  allure.story('初期表示の確認');
  ...
});

Allureのレポートとして出力するには、reporterオプションを追加してテストを実行します。

yarn playwright test --reporter=line,allure-playwright 

Allureのレポート出力は以下のコマンドを実行します。

allure generate ./allure-results --clean && allure open ./allure-report

以下のようなWebページが表示されます。

FEATURES BY STORIESの「reactでもページをテストする」がリンクになってるので、そちらをクリックするとPlaywrightのレポートのような構造のテストステップが出力されたページに移動します。

左側は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