Playwrightのサードパーティレポーターを試してみる

Playwrightでは標準でテスト結果を出力するレポーターを提供していますが、サードパーティレポーターのライブラリのAllureとMonocartを試してみようと思います。

下準備

まずはNext.jsをインストールします。

$ npx create-next-app@latest --typescript

次にPlaywrightをインストールします。

$ npm init playwright@latest

今回はPlaywrightをインストールしたときに作成される、tests-examples/demo-todo-app.spec.tsをテストしていこうと思いますので、demo-todo-appをtestsディレクトリに移動します。

$ mv tests-examples/demo-todo-app.spec.ts tests/

また、今回はchromiumのみテストするのでplaywright.config.tsでfirefoxとwebkitをコメントアウトします。

playwright.config.ts

  projects: [
    {
      name: "chromium",
      use: { ...devices["Desktop Chrome"] },
    },

+   // {
+   //   name: "firefox",
+   //   use: { ...devices["Desktop Firefox"] },
+   // },

+   // {
+   //   name: "webkit",
+   //   use: { ...devices["Desktop Safari"] },
+   // },

    /* Test against mobile viewports. */
    /* [...] */
  ],

Playwrightのレポーター

AllureとMonocartを試す前にまずはPlaywright標準のレポーターを出力してみたいと思います。

demo-todo-appのテスト実行

$ npx playwright test tests/demo-todo-app.spec.ts --reporter=html

テストレポートの表示

$ npx playwright show-report

ブラウザ表示

testの内容が一覧で表示されます。testをグルーピングしたdescribeが階層になっておらず、ちょっとみづらいです。

各testをクリックするとActionやAssertionの内容をTest Stepsとして確認することもできます。

Allure

Allureをインストールします。

MacOS

$ brew install allure

Windows

$ scoop install allure

allure-playwrightもインストール

$ npm i -D @playwright/test allure-playwright

allure-playwrightのテスト実行

$ npx playwright test tests/demo-todo-app.spec.ts --reporter=allure-playwright

テストレポート生成

$ allure generate allure-results -o allure-report --clean

テストレポート表示

$ allure open allure-report

ブラウザ表示

グラフで描画されており、ステータスが視覚的に分かりやすいです。タイムラインもあり、どのテストにどれくらいの時間がかかっているのか確認することもできます。

Monocart

monocart-reporterをインストール

$ npm i -D monocart-reporter

monocart-reporterのテスト実行

$ npx playwright test tests/demo-todo-app.spec.ts --reporter=monocart-reporter

テストレポート表示

$ npx monocart show-report test-results/report.html

MonocartもAllure同様、ステータスのグラフ描画やタイムラインをみることができ便利です。加えてメモリ・CPUの使用率も確認でき、負荷状態もチェックすることができます。