Playwright Test

Playwright はブラウザ自動化ツールとしてだけでなく、独自の完全なテストフレームワークも備えています —— Playwright Test。

Playwright Test はテストケースの整理、レポート生成、並列実行、失敗時リトライなどを可能にし、機能が充実しており、そのまま使用できます。

1. Playwright Test は統合されたテストフレームワークです追加の依存関係は不要です。
2. 設定ファイルでは、タイムアウト、リトライ、レポート、ブラウザプロジェクトなどを設定できます。
3. テストケースではグループ化、フック、データ駆動がサポートされ、。
4. 以下並列実行、HTMLレポート、失敗時リトライといった高度な機能を提供します。

テストフレームワーク概要

• 統合テストフレームワーク: テストランナーを内蔵しており、Jest や Mocha を追加インストールする必要はありません。
• 組み込みアサーションライブラリ: 対応expectアサーション。
• テスト分離: 各テストはtestデフォルトで新しいブラウザコンテキストで実行され、互いに干渉しません。
• 豊富な機能: 並列実行、リトライ、スクリーンショット、録画、HTMLレポートなど。

インストール方法:

npm init playwright@latest

プロジェクト構成を自動生成し、設定ファイルを含みます。playwright.config.js。

1. 設定ファイルの詳細

Playwright Test はplaywright.config.js（または.ts）を設定の入り口として使用します。

// playwright.config.js
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './tests',         // 测试目录
  timeout: 30 * 1000,         // 单个测试超时时间
  retries: 2,                 // 失败重试次数
  reporter: [['html'], ['list']], // 测试报告类型
  use: {
    headless: true,           // 是否无头模式
    screenshot: 'only-on-failure', // 失败时截图
    video: 'retain-on-failure',    // 失败时保留视频
    baseURL: 'https://example.com', // 基础 URL
  },
  projects: [
    { name: 'Chromium', use: { browserName: 'chromium' } },
    { name: 'Firefox',  use: { browserName: 'firefox' } },
    { name: 'WebKit',   use: { browserName: 'webkit' } },
  ],
});

2. テストスクリプトの構造

Playwright Test スクリプトには通常、以下が含まれます：

1、テストライブラリのインポート

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

2、テストケースの記述

test('示例测试', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle('Example Domain');
});

3、グループ化とフック

• 使用するdescribeテストを整理する
• 使用するbeforeEach / afterEach前後処理を行う

テストケースの作成

1. test()関数の使用

test('页面标题验证', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveTitle(/Playwright/);
});

2. describe()グループ化

test.describe('用户登录模块', () => {
  test('输入正确账号密码', async ({ page }) => {
    // 登录逻辑...
  });

  test('输入错误密码', async ({ page }) => {
    // 验证错误提示...
  });
});

3. テストフック

test.describe('购物车模块', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('https://example.com/cart');
  });

  test.afterEach(async ({ page }) => {
    await page.screenshot({ path: 'cart.png' });
  });

  test('添加商品', async ({ page }) => {
    await page.click('#add-item');
    await expect(page.locator('#cart-count')).toHaveText('1');
  });
});

4. テストデータの準備

パラメータ化テストをサポート：

const users = [
  { name: 'admin', password: '123456' },
  { name: 'guest', password: 'guest' },
];

for (const user of users) {
  test(`用户 ${user.name} 登录`, async ({ page }) => {
    await page.goto('https://example.com/login');
    await page.fill('#username', user.name);
    await page.fill('#password', user.password);
    await page.click('#submit');
    await expect(page.locator('.welcome')).toBeVisible();
  });
}

実行とレポート

1. テスト実行コマンド

npx playwright test          # 运行全部测试
npx playwright test login.spec.js   # 运行单个文件
npx playwright test -g "登录"       # 运行指定用例

2. 並列テスト

Playwright はデフォルトでファイル単位で並列実行します、設定ファイルで workers 数を指定することもできます：

npx playwright test --workers=4

3. テストレポート生成

実行後に生成されるHTMLレポート：

npx playwright show-report

4. 失敗時リトライ機構

設定ファイルplaywright.config.jsで設定します：

retries: 2

テストが失敗した場合に自動的にリトライされ、偶発的なエラーの処理に適しています。

1. Playwright Test は統合されたテストフレームワークです追加の依存関係は不要です。
2. 設定ファイルでは、タイムアウト、リトライ、レポート、ブラウザプロジェクトなどを設定できます。
3. テストケースではグループ化、フック、データ駆動がサポートされ、。
4. 以下並列実行、HTMLレポート、失敗時リトライといった高度な機能を提供します。

完全なテストスイートの例

1、プロジェクト構成

playwright-demo/
├─ playwright.config.ts           # 全局配置（多项目、多浏览器、报告、重试…）
├─ package.json
├─ tests/
│  ├─ auth.setup.ts               # 一次性登录，生成 storageState
│  ├─ smoke/
│  │  └─ home.spec.ts             # 冒烟用例：标题/URL/截图对比
│  └─ e2e/
│     └─ cart.spec.ts             # 端到端：添加购物车、断言、附件、步骤
├─ fixtures/
│  ├─ pages.ts                    # 页面对象（PO）
│  └─ test.extend.ts              # 自定义 fixtures
└─ snapshots/                     # 视觉基线（自动生成）

2、設定ファイル（playwright.config.ts）

ポイント:projects を使用すると、同じテストセットを異なるブラウザ/設定で実行できます。use はグローバル/プロジェクト/テストの3レベルで上書き可能。レポートとリトライは設定で一元的に管理します。

3、フィクスチャとページオブジェクト

fixtures/test.extend.ts（カスタムフィクスチャ + 共通手順のカプセル化）

test.extend() に基づいてカスタムフィクスチャを追加し、任意のテストケースで home や cart のインスタンスを直接注入できるようにします。

fixtures/pages.ts（ページオブジェクト）

4、事前ログイン（storageState を一度だけ生成）

tests/auth.setup.ts（"setup" プロジェクトでのみ実行）

5、スモークテスト（タイトル/URL/ビジュアル比較）

tests/smoke/home.spec.ts

ビジュアル比較には toHaveScreenshot の使用を推奨します（page.screenshot() + toMatchSnapshot による手書き方式よりも優先）。

6、E2Eテスト（手順、添付、アサーション）

tests/e2e/cart.spec.ts

test.step で手順を階層的に記録し、test.info().attach() でデバッグデータ/スクリーンショットをレポートに添付すると調査が容易になります。並列モードは describe.configure({ mode: 'parallel' }) を使用できます。

7、実行とレポート

よく使うコマンド：

npx playwright test                # 运行全部
npx playwright test tests/e2e      # 运行目录
npx playwright test -g "Cart"      # 按标题过滤
npx playwright test --project="Chromium"   # 指定项目
npx playwright show-report         # 打开HTML报告
npx playwright test --update-snapshots     # 更新视觉基线
npx playwright test --debug        # 调试模式（Inspector）

CLI のフィルタリング、プロジェクト選択、レポート表示、スナップショット更新などは、公式の CLI/レポート/スナップショットドキュメントを参照してください。

よく使う関連 API 早見表（Playwright Test）

1、テストとグループ化

2、フィクスチャと設定

fixtures / use / 設定項目と projects の詳細は、公式ドキュメント "Fixtures / Use options / Configuration / Projects" を参照してください。(Playwright)

3、アサーション（expect）

アサーションとビジュアルスナップショットの推奨プラクティスは、Assertions と Snapshots のドキュメントを参照してください。(Playwright)

4、手順と添付

添付ファイルはステップレベルにも適用できます（TestStep / TestStepInfo を参照）。(Playwright)

5、レポートとCLI

完全なCLIとReporterオプションは公式ドキュメントを参照してください。(Playwright)