自動テストを運用していると、「このテストケース、先週も失敗していたような…」「全体的にテストの安定性が下がっている気がする」と感じることはありませんか。Playwright の標準レポートだけでは、過去の実行結果との比較や長期的なトレンド分析が難しく、テストの品質改善に活かしきれないことがあります。

そんな課題を解決するのが Allure Report です。Allure は、テスト実行履歴やトレンドグラフ、失敗分析などを豊富に可視化できるレポートツールです。本記事では、Playwright と Allure を組み合わせた運用方法を、セットアップから実際の活用シーンまで段階的に解説します。

背景

テスト結果レポートの重要性

E2E テストは、アプリケーションの品質を保証する重要な役割を担います。しかし、テストケース数が増えるほど、以下のような運用課題が顕在化してきます。

• 失敗したテストが偶発的なものか、恒常的な問題なのか判断しづらい
• テスト実行時間の推移を追いにくい
• 過去の実行結果と比較できず、リグレッションの検出が遅れる
• チーム全体でテスト結果を共有する仕組みが不十分

Playwright は標準で HTML レポート機能を提供していますが、単一実行の結果を見るには便利でも、時系列での変化や傾向分析には向いていません。

Allure Report の特徴

Allure Report は、テスト結果を多角的に分析・可視化できるオープンソースのレポートツールです。主な特徴は以下の通りです。

#	項目	説明
1	履歴管理	過去の実行結果を保持し、テストケースごとに履歴を表示
2	トレンドグラフ	成功率、実行時間の推移をグラフで可視化
3	失敗分析	同じエラーでまとめ、失敗の傾向を把握しやすくする
4	カテゴリ分類	テストケースを機能別・優先度別に整理できる
5	スクリーンショット添付	失敗時のスクリーンショットやトレースを自動添付

以下の図は、Playwright のテスト実行結果を Allure で可視化する全体の流れです。

mermaidCopy codeflowchart LR
  pw["Playwright<br/>テスト実行"] -->|結果出力| allure_results["allure-results<br/>ディレクトリ"]
  allure_results -->|レポート生成| allure_report["allure-report<br/>HTML"]
  allure_report -->|ブラウザで表示| viewer["開発者・チーム"]
  allure_results -.->|履歴保持| history["allure-results/history<br/>過去データ"]

図で理解できる要点:

• Playwright が生成した結果データを Allure が読み込み、HTML レポートを生成
• 過去の実行結果（history）を保持することで、トレンドや履歴を追跡可能
• 生成されたレポートはブラウザで閲覧でき、チーム全体で共有しやすい

課題

Playwright 標準レポートの限界

Playwright の標準 HTML レポートは、単一実行の結果を見るには便利ですが、以下の点で不足があります。

履歴管理ができない

毎回のテスト実行で新しいレポートが生成されるため、過去の結果と比較できません。「先週は成功していたのに今週は失敗している」といった変化を追うには、手動で過去のレポートを保存・比較する必要があります。

トレンド分析が困難

テスト全体の成功率や実行時間の推移をグラフで確認する機能がありません。長期的な品質改善の効果測定や、パフォーマンス劣化の早期発見が難しくなります。

失敗原因の集約ができない

同じエラーで失敗しているテストケースを自動でグルーピングする機能がないため、「どのエラーが最も影響が大きいか」を把握するのに時間がかかります。

以下の図は、標準レポートと Allure レポートの機能差を表しています。

mermaidCopy codeflowchart TB
  subgraph standard["Playwright 標準レポート"]
    single["単一実行結果のみ"]
    no_history["履歴なし"]
    no_trend["トレンドなし"]
  end

  subgraph allure["Allure レポート"]
    multi["複数実行結果を保持"]
    with_history["履歴管理"]
    with_trend["トレンドグラフ"]
    failure_analysis["失敗分析"]
  end

  standard -.->|機能拡張| allure

図で理解できる要点:

• 標準レポートは単発の結果表示に限定
• Allure は履歴・トレンド・失敗分析を備え、継続的な品質改善をサポート

運用における具体的な困りごと

実際の開発現場では、以下のような困りごとが発生します。

• フレーキーテストの特定が遅れる: 偶発的に失敗するテストを見つけるには、複数回の実行履歴が必要です
• チーム共有が煩雑: レポートファイルを毎回メールやチャットで共有するのは非効率です
• 原因調査に時間がかかる: スクリーンショットやトレースが散在し、失敗原因の特定に手間取ります
• 改善効果が見えにくい: テスト改善施策の効果を数値で示すことが難しく、継続的な取り組みのモチベーション低下につながります

解決策

Allure Report の導入

Allure Report を Playwright に統合することで、上記の課題を解決できます。具体的には、以下のステップで実現します。

1. allure-playwright パッケージのインストール
2. playwright.config.ts での Allure レポーター設定
3. テスト実行と結果データの蓄積
4. Allure CLI でのレポート生成・閲覧
5. 履歴データの保持と継続的な更新

それぞれのステップを順番に見ていきましょう。

ステップ 1: パッケージのインストール

まず、Allure Playwright レポーターと Allure コマンドラインツールをインストールします。

bashCopy codeyarn add -D allure-playwright
yarn add -D allure-commandline

パッケージの役割:

• allure-playwright: Playwright のレポーターとして動作し、テスト結果を Allure 形式で出力します
• allure-commandline: Allure レポートの生成・表示を行う CLI ツールです

ステップ 2: Playwright 設定ファイルの編集

playwright.config.ts に Allure レポーターを追加します。

typescriptCopy codeimport { defineConfig } from '@playwright/test';

export default defineConfig({
  // 既存の設定...

  reporter: [
    ['html'], // 標準HTMLレポートも併用可能
    [
      'allure-playwright',
      {
        detail: true,
        outputFolder: 'allure-results',
        suiteTitle: false,
      },
    ],
  ],
});

設定オプションの説明:

• detail: true にすると、各ステップの詳細情報を記録します
• outputFolder: テスト結果の出力先ディレクトリを指定します
• suiteTitle: false にすると、テストファイル名をスイート名として使用します

複数のレポーターを配列で指定することで、標準の HTML レポートと Allure レポートを同時に生成できます。開発中は HTML レポート、CI/CD では Allure レポートといった使い分けも可能です。

ステップ 3: テストの実行と結果蓄積

設定が完了したら、通常通り Playwright のテストを実行します。

bashCopy codeyarn playwright test

テスト実行後、allure-results ディレクトリに JSON 形式の結果ファイルが生成されます。このディレクトリには、以下のようなファイルが含まれます。

bashCopy codeallure-results/
├── 0a1b2c3d-test-result.json  # 各テストケースの結果
├── 1b2c3d4e-test-result.json
├── categories.json             # 失敗カテゴリの定義
└── environment.properties      # 実行環境情報

結果ファイルの内容: 各 JSON ファイルには、テスト名、ステータス、実行時間、エラー情報、添付ファイル（スクリーンショット等）への参照が含まれています。

ステップ 4: Allure レポートの生成

蓄積された結果データから、Allure レポートを生成します。

bashCopy codeyarn allure generate allure-results --clean -o allure-report

コマンドオプションの説明:

• generate: レポート生成コマンド
• allure-results: 入力データのディレクトリ
• --clean: 既存の allure-report を削除してから生成
• -o allure-report: 出力先ディレクトリ

レポート生成後、allure-report ディレクトリに HTML ファイルが作成されます。

ステップ 5: レポートの表示

生成されたレポートをブラウザで表示します。

bashCopy codeyarn allure open allure-report

このコマンドを実行すると、ローカルサーバーが起動し、ブラウザで Allure レポートが開きます。デフォルトでは http:​/​​/​localhost:45678 にアクセスできます。

以下の図は、レポート生成から閲覧までの一連の流れを表しています。

mermaidCopy codesequenceDiagram
  participant Dev as 開発者
  participant CLI as Playwright CLI
  participant Results as allure-results
  participant Allure as Allure CLI
  participant Report as allure-report
  participant Browser as ブラウザ

  Dev->>CLI: yarn playwright test
  CLI->>Results: 結果JSON出力
  Dev->>Allure: yarn allure generate
  Allure->>Results: 結果データ読み込み
  Allure->>Report: HTMLレポート生成
  Dev->>Allure: yarn allure open
  Allure->>Browser: ローカルサーバー起動
  Browser->>Dev: レポート表示

図で理解できる要点:

• テスト実行と レポート生成は分離されており、再実行せずに再生成可能
• Allure CLI がローカルサーバーを立ち上げ、ブラウザで対話的に閲覧できる

ステップ 6: 履歴データの保持

Allure の最大の強みは、過去の実行履歴を保持できることです。履歴を有効にするには、以下の手順で実施します。

前回のレポートから履歴データをコピー:

bashCopy code# 前回のレポートから履歴データを取得
mkdir -p allure-results/history
cp -r allure-report/history/* allure-results/history/

テスト実行後、レポートを再生成:

bashCopy codeyarn playwright test
yarn allure generate allure-results --clean -o allure-report

これにより、allure-results​/​history に保存された過去データを基に、履歴グラフやトレンドが表示されるようになります。

CI/CD での自動化スクリプト例

継続的に履歴を蓄積するには、CI/CD パイプラインでの自動化が効果的です。以下は GitHub Actions の例です。

yamlCopy codename: Playwright Tests with Allure

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'yarn'

      - name: Install dependencies
        run: yarn install --frozen-lockfile

依存関係のインストール: --frozen-lockfile オプションで、yarn.lock と一致するバージョンをインストールします。

yamlCopy code- name: Download previous Allure history
  uses: actions/download-artifact@v3
  if: always()
  continue-on-error: true
  with:
    name: allure-history
    path: allure-results/history

履歴データの取得: 前回の実行で保存した allure-history アーティファクトをダウンロードし、allure-results​/​history に配置します。初回実行時はアーティファクトが存在しないため、continue-on-error: true でエラーを無視します。

yamlCopy code- name: Run Playwright tests
  run: yarn playwright test

テストの実行: Playwright のテストを実行し、結果を allure-results に出力します。

yamlCopy code- name: Generate Allure Report
  if: always()
  run: yarn allure generate allure-results --clean -o allure-report

レポートの生成: テストの成否に関わらず（if: always()）、Allure レポートを生成します。

yamlCopy code- name: Upload Allure Report
  uses: actions/upload-artifact@v3
  if: always()
  with:
    name: allure-report
    path: allure-report
    retention-days: 30

レポートのアップロード: 生成されたレポートをアーティファクトとして保存します。retention-days で保存期間を指定できます。

yamlCopy code- name: Upload Allure history
  uses: actions/upload-artifact@v3
  if: always()
  with:
    name: allure-history
    path: allure-report/history
    retention-days: 90

履歴データのアップロード: 次回実行で使用するため、allure-report​/​history をアーティファクトとして保存します。履歴データは長期間保存するため、retention-days: 90 に設定しています。

このワークフローにより、各実行の履歴が蓄積され、トレンドや傾向を長期的に追跡できるようになります。

具体例

基本的なレポートの見方

Allure レポートを開くと、ダッシュボード画面が表示されます。主要なセクションを見てみましょう。

Overview（概要）

テスト実行全体のサマリーが表示されます。

• Total: 実行されたテストケースの総数
• Passed: 成功したテスト数
• Failed: 失敗したテスト数
• Broken: エラーで中断したテスト数
• Skipped: スキップされたテスト数

円グラフで視覚的に成功率を確認でき、一目でテストの健全性を把握できます。

Suites（スイート）

テストファイル（スイート）ごとの結果を確認できます。各スイートをクリックすると、含まれるテストケースの詳細が表示されます。

Graphs（グラフ）

以下のようなグラフが用意されています。

#	グラフ名	説明
1	Status	テスト結果のステータス別割合
2	Severity	重要度別のテスト分布
3	Duration	実行時間の分布
4	Categories	失敗カテゴリ別の集計

以下の図は、Allure レポートの主要画面構成を示しています。

mermaidCopy codeflowchart TB
  dashboard["Dashboard<br/>ダッシュボード"]
  overview["Overview<br/>全体サマリー"]
  suites["Suites<br/>テスト一覧"]
  graphs["Graphs<br/>グラフ分析"]
  timeline["Timeline<br/>タイムライン"]
  behaviors["Behaviors<br/>機能別"]

  dashboard --> overview
  dashboard --> suites
  dashboard --> graphs
  dashboard --> timeline
  dashboard --> behaviors

図で理解できる要点:

• ダッシュボードから各種分析画面へ遷移できる
• 目的に応じて適切な画面を選択し、多角的に分析可能

履歴とトレンドの活用

テストケース単位の履歴

個別のテストケースをクリックすると、そのテストの実行履歴が表示されます。履歴グラフには以下の情報が含まれます。

• 過去の実行結果（成功/失敗のパターン）
• 実行時間の推移
• 失敗時のエラーメッセージの変化

これにより、「このテストは週に 1 回程度失敗する傾向がある」といったフレーキーテストを容易に発見できます。

全体トレンドの確認

Trends（トレンド）画面では、複数回の実行結果を時系列で表示します。

• 成功率の推移: 品質改善の効果を可視化できます
• 実行時間の推移: パフォーマンス劣化を早期に検出できます
• 失敗数の推移: リグレッションの傾向を把握できます

例えば、以下のようなシナリオで活用できます。

シナリオ 1: フレーキーテストの特定

あるテストが 10 回中 3 回失敗している場合、履歴グラフを見れば一目瞭然です。失敗パターンを分析することで、タイムアウト設定の見直しや待機処理の追加など、適切な対策を講じられます。

シナリオ 2: パフォーマンス劣化の検出

トレンドグラフで実行時間が徐々に増加している場合、アプリケーションのパフォーマンス劣化やテストコードの非効率化が疑われます。早期に気づくことで、大きな問題になる前に対処できます。

失敗分析の活用

Categories（カテゴリ）機能

Allure は、失敗したテストを自動的にカテゴリ分類します。allure-results​/​categories.json を作成することで、カスタムカテゴリも定義できます。

jsonCopy code[
  {
    "name": "Network errors",
    "matchedStatuses": ["failed"],
    "messageRegex": ".*network.*|.*timeout.*"
  },
  {
    "name": "Assertion errors",
    "matchedStatuses": ["failed"],
    "messageRegex": ".*expect.*|.*assertion.*"
  }
]

設定の説明:

• name: カテゴリ名
• matchedStatuses: 対象とするステータス（failed、broken など）
• messageRegex: エラーメッセージの正規表現パターン

この設定により、失敗したテストが「ネットワークエラー」「アサーションエラー」などに自動分類され、どのエラーが最も多いかを把握できます。

失敗分析の実例

例えば、100 件のテストのうち 15 件が失敗した場合、カテゴリ分析により以下のような内訳が分かります。

#	カテゴリ	件数	割合
1	Network errors	8	53%
2	Assertion errors	5	33%
3	その他	2	14%

この結果から、「ネットワークエラーの対策が最優先」と判断でき、効率的に改善に取り組めます。

以下の図は、失敗分析のプロセスを表しています。

mermaidCopy codeflowchart TB
  failed["失敗したテスト"] --> categorize["カテゴリ分類"]
  categorize --> network["Network errors<br/>8件"]
  categorize --> assertion["Assertion errors<br/>5件"]
  categorize --> other["その他<br/>2件"]

  network --> priority_high["優先度: 高"]
  assertion --> priority_mid["優先度: 中"]
  other --> priority_low["優先度: 低"]

図で理解できる要点:

• 失敗をカテゴリ別に集計し、影響の大きい問題を優先的に対処
• データドリブンな改善アプローチを実現

スクリーンショットとトレースの添付

Playwright は失敗時に自動でスクリーンショットやトレースを取得できます。これらを Allure レポートに添付するには、テストコード内で明示的に添付処理を行います。

typescriptCopy codeimport { test } from '@playwright/test';
import { allure } from 'allure-playwright';

test('商品詳細ページの表示', async ({ page }) => {
  await page.goto('https://example.com/products/123');

  // スクリーンショットを添付
  const screenshot = await page.screenshot();
  await allure.attachment(
    '商品詳細ページ',
    screenshot,
    'image/png'
  );
});

コードの説明:

• allure.attachment(): Allure レポートにファイルを添付します
• 第 1 引数: 添付ファイルの名前
• 第 2 引数: 添付するデータ（バッファまたは文字列）
• 第 3 引数: MIME タイプ

失敗時のみスクリーンショットを取得する場合は、テストフック（afterEach）を活用します。

typescriptCopy codeimport { test } from '@playwright/test';
import { allure } from 'allure-playwright';

test.afterEach(async ({ page }, testInfo) => {
  // テストが失敗した場合のみスクリーンショットを添付
  if (testInfo.status !== testInfo.expectedStatus) {
    const screenshot = await page.screenshot();
    await allure.attachment(
      `失敗時のスクリーンショット - ${testInfo.title}`,
      screenshot,
      'image/png'
    );
  }
});

フックの説明:

• test.afterEach(): 各テストケース実行後に呼び出されます
• testInfo.status: テストの実際の結果ステータス
• testInfo.expectedStatus: 期待されるステータス（通常は passed）

この設定により、失敗したテストのみスクリーンショットが Allure レポートに自動添付され、原因調査が格段に効率化されます。

カスタムメタデータの追加

Allure レポートには、テストの重要度や機能タグなどのメタデータを追加できます。これにより、レポート上でテストをフィルタリングしやすくなります。

typescriptCopy codeimport { test } from '@playwright/test';
import { allure } from 'allure-playwright';

test('ログイン機能のテスト', async ({ page }) => {
  // 重要度を設定
  await allure.severity('critical');

  // エピック、フィーチャー、ストーリーを設定
  await allure.epic('認証機能');
  await allure.feature('ログイン');
  await allure.story('ユーザー名とパスワードでログイン');

  // タグを追加
  await allure.tag('smoke');
  await allure.tag('authentication');

  // テスト実装...
  await page.goto('https://example.com/login');
});

メタデータの種類:

• severity: 重要度（blocker、critical、normal、minor、trivial）
• epic: 大機能カテゴリ
• feature: 中機能カテゴリ
• story: 小機能カテゴリ（ユーザーストーリー）
• tag: 任意のタグ（複数設定可能）

これらのメタデータを設定することで、Allure レポートの Behaviors（機能別）画面で、機能階層ごとにテストを整理して閲覧できます。

以下の図は、メタデータによる階層構造を示しています。

mermaidCopy codeflowchart TB
  epic["Epic: 認証機能"]
  feature1["Feature: ログイン"]
  feature2["Feature: パスワードリセット"]
  story1["Story: ユーザー名でログイン"]
  story2["Story: メールでログイン"]
  story3["Story: メール送信"]

  epic --> feature1
  epic --> feature2
  feature1 --> story1
  feature1 --> story2
  feature2 --> story3

図で理解できる要点:

• Epic → Feature → Story の 3 階層でテストを整理
• 機能単位での成功率や実行時間を把握しやすくなる

チーム共有の実践例

Allure レポートをチーム全体で共有する方法として、以下のアプローチがあります。

静的ホスティングサービスへのデプロイ

GitHub Pages や Netlify、Vercel などに Allure レポートをデプロイすることで、チームメンバーが常に最新のレポートにアクセスできます。

yamlCopy code# GitHub Pages へのデプロイ例
- name: Deploy to GitHub Pages
  uses: peaceiris/actions-gh-pages@v3
  if: always()
  with:
    github_token: ${{ secrets.GITHUB_TOKEN }}
    publish_dir: ./allure-report
    keep_files: false

CI/CD アーティファクトとしての保存

GitHub Actions や GitLab CI では、アーティファクトとしてレポートを保存できます。実行完了後、アーティファクトをダウンロードしてローカルで閲覧可能です。

Slack 通知との連携

テスト実行後、Slack にレポートの URL を通知することで、チームメンバーがすぐに確認できます。

yamlCopy code- name: Notify Slack
  uses: 8398a7/action-slack@v3
  if: always()
  with:
    status: ${{ job.status }}
    text: |
      テスト実行が完了しました
      レポート: ${{ steps.deploy.outputs.url }}
    webhook_url: ${{ secrets.SLACK_WEBHOOK_URL }}

これにより、テスト結果が自動的にチーム全体で共有され、品質への意識が高まります。

運用のベストプラクティス

Allure レポートを継続的に活用するためのベストプラクティスを紹介します。

定期的な履歴データのバックアップ

履歴データは CI/CD のアーティファクト保持期限に依存するため、長期保存が必要な場合は別途バックアップを取りましょう。クラウドストレージ（S3、Google Cloud Storage など）への定期的なアップロードが推奨されます。

カテゴリ定義の継続的な改善

プロジェクトが進むにつれ、新しいエラーパターンが出現します。定期的に categories.json を見直し、カテゴリ定義を更新することで、より精度の高い失敗分析が可能になります。

レポートレビューの習慣化

週次や月次でチーム全体でレポートをレビューする時間を設けることで、以下のような効果が得られます。

• フレーキーテストの早期発見と対処
• テスト実行時間の最適化ポイントの特定
• チーム全体のテスト品質への意識向上

メタデータの統一ルール策定

epic、feature、story の命名規則をチームで統一することで、レポートの可読性が向上します。プロジェクトの初期段階でルールを決めておくことをおすすめします。

まとめ

本記事では、Playwright と Allure Report を組み合わせた運用方法について解説しました。重要なポイントを振り返りましょう。

Allure Report がもたらす価値

• 履歴管理: 過去の実行結果を保持し、テストケースごとの傾向を把握できます
• トレンド分析: 成功率や実行時間の推移をグラフで可視化し、品質改善の効果を測定できます
• 失敗分析: エラーをカテゴリ別に集約し、影響の大きい問題を優先的に対処できます
• チーム共有: 静的ホスティングや CI/CD 連携により、チーム全体で結果を共有できます

導入のステップ

1. allure-playwright と allure-commandline をインストール
2. playwright.config.ts にレポーター設定を追加
3. テスト実行後、allure generate でレポート生成
4. allure open でブラウザ表示
5. CI/CD に履歴データ保持の仕組みを組み込む

運用のポイント

• スクリーンショットやトレースを自動添付し、原因調査を効率化
• カスタムメタデータで機能別にテストを整理
• 定期的なレポートレビューで継続的な品質改善を実現

Playwright の強力なテスト機能に Allure の豊富な可視化機能を組み合わせることで、テストの運用品質が飛躍的に向上します。ぜひ、あなたのプロジェクトでも導入を検討してみてください。履歴データが蓄積されるほど、その価値は高まっていきますよ。

関連リンク

• Playwright 公式ドキュメント
• Allure Report 公式サイト
• allure-playwright GitHub リポジトリ
• Allure コマンドラインツール
• GitHub Actions - アーティファクトのアップロード