playwright

このスキルを使用する場面

ユーザーが次のことを希望する場合は、このスキルを使用します。

• Playwright（Chromium、Firefox、WebKit）でエンドツーエンドのブラウザーテストを作成する
• 自動待機するロケーターと組み込みアサーションを使用する
• 複数のページ、タブ、ブラウザーコンテキストを扱う
• トレースとスクリーンショットを使った CI 実行向けに Playwright プロジェクトを設定する
• 保守しやすいテストのためにページオブジェクトモデルのパターンを実装する

このスキルの使用方法

ワークフロー

1. Playwright を初期化する：npm init playwright を実行して、設定とサンプルテストを生成します
2. 自動待機ロケーター（getByRole、getByLabel、getByText）を使ってテストを作成する
3. ヘッドレスモード、ヘッド付きモード、または UI モードでテストを実行する：npx playwright test
4. トレース、スクリーンショット、Playwright Inspector を使って失敗をデバッグする

1. 基本的なテスト

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

test('homepage has title', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

test('login flow', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.getByLabel('Username').fill('testuser');
  await page.getByLabel('Password').fill('secret');
  await page.getByRole('button', { name: 'Sign in' }).click();
  await expect(page.getByText('Dashboard')).toBeVisible();
});

2. ページオブジェクトモデル

class LoginPage {
  constructor(private page: Page) {}

  async login(username: string, password: string) {
    await this.page.getByLabel('Username').fill(username);
    await this.page.getByLabel('Password').fill(password);
    await this.page.getByRole('button', { name: 'Sign in' }).click();
  }
}

3. 設定

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

export default defineConfig({
  testDir: './tests',
  retries: 2,
  use: {
    baseURL: 'https://example.com',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
  ],
});

4. テストの実行

npx playwright test                    # Run all tests headless
npx playwright test --headed           # Run with browser visible
npx playwright test --ui               # Interactive UI mode
npx playwright show-report             # View HTML report

ベストプラクティス

• 壊れやすい XPath や CSS セレクターよりも、ロールベースのロケーター（getByRole、getByLabel）を優先します
• テストは独立させ、繰り返し実行できるようにします。状態の準備には beforeEach またはフィクスチャを使用します
• CI ではブラウザーと依存関係をインストールします（npx playwright install --with-deps）
• デバッグに備えて、失敗時のトレースとスクリーンショットを保持します
• Playwright に組み込まれている expect アサーションを使用します。自動的に再試行されます

リソース

• 公式ドキュメント：https://playwright.dev/docs/intro
• API リファレンス：https://playwright.dev/docs/api/class-playwright
• ベストプラクティス：https://playwright.dev/docs/best-practices

キーワード

playwright、E2E、エンドツーエンドテスト、クロスブラウザー、自動待機、ロケーター、getByRole、トレース、ページオブジェクトモデル、Chromium、Firefox、WebKit