Playwright｜HTMLレポートの見方

PlaywrightはHTMLでテスト結果をレポートしてくれます。
レポートの見方をまとめました。
Playwrightのレポート画面が開いてみたけど、よくわからない方の参考になれば嬉しいです。

HTMLレポートは下記コマンドで表示できます。

npx playwright show-report

レポートの左上（example.spec.ts）には実行したテストのファイル名が表示されます。
右上に「Passed⑥」と表示されています。6つのテストが成功しています。

example.spec.tsはこのようなコードになっています。

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

test('has title', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);
});

test('get started link', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Click the get started link.
  await page.getByRole('link', { name: 'Get started' }).click();

  // Expects page to have a heading with the name of Installation.
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

このコードでは下記２つのテストが実行されています。

test(‘has title’ -> タイトルの有無を確認するテスト
est(‘get started link -> リンクの有無を確認するテスト

デフォルトでは下記3つのブラウザでテスト実行します。

chromium
firefox
webkit

2つのテストを3つのブラウザで実行しているため、テスト結果が6つ表示されます。

テスト結果をクリックすると、詳細画面を表示します。

トグルを開くと、どのようなことをしたのかが確認できます。

簡単ですが、まずはレポートの見方をまとめました。
Playwrightの学習を進める過程で、レポートの見方については随時アップデートしていく予定です。