playwright-testing

Playwright テスト

Playwright は、Web アプリケーション向けの最新のエンドツーエンドテストフレームワークです。優れた開発者体験とともに、信頼性が高く高速なクロスブラウザテストを提供します。

このスキルを使う場面

次の場合にこのスキルを使います…	次の場合は別のスキルを使います…
E2E ブラウザーテストを書く	単体テストを書く場合（vitest-testing を使います）
Chromium、Firefox、WebKit を対象にテストする	Python コードをテストする場合（python-testing を使います）
ビジュアルリグレッションテストを設定する	テスト品質を分析する場合（test-quality-analysis を使います）
E2E テストでネットワークリクエストをモックする	プロパティベーステストを生成する場合（property-based-testing を使います）
モバイルのビューポートをテストする	API コントラクトのみをテストする場合（api-testing を使います）

主な専門分野

• クロスブラウザ：Chromium、Firefox、WebKit（Safari）でテストできます
• 信頼性：自動待機、自動再試行により、不安定なテストを防ぎます
• 高速：並列実行、ブラウザーコンテキストの分離に対応します
• モダン：TypeScript を第一に設計し、async/await と自動補完に対応します
• マルチプラットフォーム：Windows、macOS、Linux に対応します

インストール

bun create playwright                  # Initialize (recommended)
bun add --dev @playwright/test         # Or install manually
bunx playwright install                # Install browsers
bunx playwright install --with-deps    # With system deps (Linux)
bunx playwright --version              # Verify

設定（playwright.config.ts）

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

export default defineConfig({
  testDir: './tests',
  timeout: 30000,
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
});

基本的なコマンド

bunx playwright test                           # Run all tests
bunx playwright test tests/login.spec.ts       # Specific file
bunx playwright test --headed                  # See browser
bunx playwright test --debug                   # Debug mode
bunx playwright test --project=chromium        # Specific browser
bunx playwright test --ui                      # UI mode
bunx playwright codegen http://localhost:3000  # Record tests
bunx playwright show-report                    # Last report
bunx playwright show-trace trace.zip           # Trace viewer
bunx playwright test --update-snapshots        # Update snapshots

テストの作成

基本的なテスト構造

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

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

test.describe('login flow', () => {
  test('should login successfully', async ({ page }) => {
    await page.goto('/login');
    await page.fill('input[name="email"]', '[email protected]');
    await page.fill('input[name="password"]', 'password123');
    await page.click('button[type="submit"]');
    await expect(page).toHaveURL('/dashboard');
  });
});

セレクターとロケーター

// Text/Role selectors (recommended)
await page.getByText('Sign in').click();
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByLabel('Email').fill('[email protected]');
await page.getByPlaceholder('Enter your name').fill('John');
await page.getByTestId('login-button').click();

// CSS/XPath selectors
await page.locator('.button-primary').click();
await page.locator('xpath=//button[text()="Submit"]').click();

// Chaining
await page.locator('.card').filter({ hasText: 'Product' }).getByRole('button').click();

主なアサーション

アサーション	説明
toHaveTitle(title)	ページタイトル
toHaveURL(url)	ページ URL
toBeVisible()	要素が表示されている
toBeEnabled()	要素が有効になっている
toHaveText(text)	要素のテキスト
toContainText(text)	テキストの一部
toHaveAttribute(name, value)	属性の値
toHaveClass(class)	CSS クラス
toHaveValue(value)	入力値
toBeEmpty()	入力欄が空
toHaveCount(n)	要素数
not.toBeDisabled()	否定

エージェント向けの最適化

コンテキスト	コマンド
テストをすばやく実行	bunx playwright test --reporter=line --bail
CI テスト	bunx playwright test --reporter=github
単一ブラウザー	bunx playwright test --project=chromium --reporter=line
失敗をデバッグ	bunx playwright test --trace on --reporter=line
ブラウザー表示でデバッグ	bunx playwright test --headed --debug

詳しい例、高度なパターン、ベストプラクティスについては、REFERENCE.md を参照してください。

GPU のない CI ランナーで WebGL アプリ（CesiumJS、three.js、MapLibre）をテストする場合は、GPU のない CI での WebGL アプリを参照してください。SwiftShader のフラグ、lhci の chromeFlags 文字列に関する注意点、フレームレートの上限設定について説明しています。

参考資料

• 公式ドキュメント：https://playwright.dev
• 設定：https://playwright.dev/docs/test-configuration
• API リファレンス：https://playwright.dev/docs/api/class-test
• ベストプラクティス：https://playwright.dev/docs/best-practices
• CI/CD：https://playwright.dev/docs/ci
• トレースビューアー：https://playwright.dev/docs/trace-viewer