ReportPortalにPlaywrightのテスト結果を流し込み美しいダッシュボードで見える化する / 不安定なテスト（Flaky）もバッチリ

ReportPortalは自動テスト結果の分析や、リアルタイムモニタリングを行うサービス。AIを活用したダッシュボードを簡単に作成できる。こういったレポート作成はPlaywrightだとAllureで十分だけど、作成したレポートをどこにホスティングするか設計する必要がある。その点、こういったダッシュボードサービスを使えば、パーマリンクが作成されるので、そのURLをみんなで共有すればいい。

インストール

ReportPortalは、オープンソースで利用できる。SaaSやオンプレも選べる。

インストールはInstallation guideを参考に進める。

Dockerをインストール
ReportPortalをデプロイ
docker-composeでコンテナ実行
http://localhost:8080 にアクセス

デフォルトで以下のユーザが作成される。

id: default, pass: 1q2w3e
id: superadmin, pass: erebus

defaultユーザはdefault_personal というプロジェクトにアサインされている。これは以下のURLから確認できる。

URL： http://localhost:8080/ui/#default_personal/settings/general

このプロジェクト名はAPIで使うが、プロジェクト名は全部小文字になるので注意。プロジェクト名は今回の例だとdefault_personalになる（空白は使えない）。

プロジェクトの権限は、superadminでログインして、以下のURLから行う。

URL： http://localhost:8080/ui/#default_personal/members

PlaywrightからReportPortalに接続するためにはMEMBER以上のロールが必要。権限がないと以下のように怒られる。

Failed to finish suite. Error: Request failed with status code 403: {"errorCode":4003,"message":"You do not have enough permissions. Access is denied"}

次にReportPortalにつなぐエージェント（クライアント）をインストールする。

npm install --save-dev @reportportal/agent-js-playwright

.envに秘密の情報を書き込んでおく。

REPORT_PORTAL_API_KEY='${YOUR_KEY}'
REPORT_PORTAL_URL='http://localhost:8080/api/v1'
REPORT_PORTAL_PROJECT_NAME='${PROJECT_NAME}'
REPORT_PORTAL_LAUNCH_NAME='${LAUNCH_NAME}'

APIキーは http://localhost:8080/ui/#userProfile/apiKeys で作成する。

Launchはテストスイートのような実行するテスト郡のこと。プロジェクトの中にLaunchを複数持つ形になる。Launch名は空白が入っても動いた（例： E2E regression test）。

playwright.config.tsにReportPortalにつなぐ設定を追加。

import { defineConfig, devices } from '@playwright/test';
import 'dotenv/config'

...

// See https://github.com/reportportal/agent-js-playwright?tab=readme-ov-file#configuration
export const rpConfig = {
  apiKey: process.env.REPORT_PORTAL_API_KEY,
  endpoint: process.env.REPORT_PORTAL_URL,
  project: process.env.REPORT_PORTAL_PROJECT_NAME,
  launch : process.env.REPORT_PORTAL_LAUNCH_NAME,
  attributes: [
    {
      key: 'platform',
      value: 'web',
    },
    {
      key: 'testType',
      value: 'e2e',
    },
  ],
};

export default defineConfig({

...

  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: [
    ['@reportportal/agent-js-playwright', rpConfig],
  ],

...
});

設定のサンプルはGitHub（ちょっと書き方が古い）やhttp://localhost:8080/ui/#userProfile/configExamplesにある。

attributesで属性などをReportPortalに渡せるので、このLaunchがどんな種類のテストなのか？環境は？といった情報を入れておけば、レポート分析するときに属性ごとに確認できるようになる。

設定ができたらpackage.jsonに以下を追記する。

{
  "scripts": {
    "test": "npx playwright test --config=playwright.config.ts"
  }
}

サンプルはGitHubにあるので参考までに。サンプルをベースにテスト実行すると以下のようになる。

npx playwright test ./tests/sample.spec.ts:8

Running 1 test using 1 worker

(node:95847) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
  1 passed (1.4s)

ReportPortal Launch Link: http://localhost:8080/ui/#playwrightwithreportportalproject/launches/all/16

レポートを開くと以下のようになる。ログの最後にリンクでてくるのでそこからもアクセスできる。

スクショもちゃんとアップロードされている。動画などファイル添付もAPI経由でできそう。

ダッシュボードを作成する

上記のようにテスト結果のアップロードはできたので、これらのデータを分析するためにダッシュボードを作る。ダッシュボードがこのツールの肝かもしれない。

ダッシュボードは「E2Eリグレッションテスト用のダッシュボード」や「UTレベルのダッシュボード」など、いろんな切り口で複数作成可能。

ダッシュボードには上記のようなウィジェットを追加できる。「Platform属性を持ったものだけ表示」や「Webではなくモバイル属性だけ表示」や「特定のLaunchのみ表示」のようにそれぞれ細かく設定できる。

データを作っていくとこのような表示に。見える化視点ではバッチリなUI。

不安定なテスト（Flaky Test）を見るWidgetもある。とても見やすいが、不安定なテストを検知してくれると言うより、見る人で判断してねって感じ。

Playwrightはログに

  2 flaky
    [chromium] › flaky.spec.ts:8:7 › Test flaky tests › flaky test 
    [Google Chrome] › flaky.spec.ts:8:7 › Test flaky tests › flaky test 
  5 passed (32.1s)

とか出してくれるので、独自の観点でInsightを作ってくれるともっとよさそう。

ReportPortal以外にも似たようなサービスは以下のようにたくさんある。

＊

ReportPortalを立ててテスト結果を流し込むだけで使えるのが素晴らしい。これだけできれいなダッシュボードがノーコードでできるので、テスト結果用のBIツールとも言える。

さらに、バグ管理システムにつなぐこともできるので、ここからバグ管理、テスト結果ステータス管理も可能。

テスト動画やデバッグに使えそうな情報を追加し、Slackとかに結果リンクをポストするようにすれば、問題検知からFixまでのサイクルをReportPortal中心に作ることができる。