コマンド早見表

# インストール
npm init playwright@latest
# → テスト言語、ブラウザ、CIワークフローを選択

# テスト実行
npx playwright test                    # 全テスト実行
npx playwright test --headed           # ブラウザを表示しながら実行
npx playwright test example.spec.ts    # 特定ファイルのみ
npx playwright test --trace on         # トレース収集して実行
npx playwright show-report             # HTMLレポートを表示
npx playwright show-trace trace.zip    # トレースを表示

// tests/example.spec.ts
import { test, expect } from '@playwright/test';

test('トップページのタイトル確認', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

test('ログインフォームのテスト', async ({ page }) => {
  await page.goto('/login');

  // フォームに入力
  await page.getByLabel('メールアドレス').fill('user@example.com');
  await page.getByLabel('パスワード').fill('password');
  await page.getByRole('button', { name: 'ログイン' }).click();

  // ログイン後のURLを確認
  await expect(page).toHaveURL('/dashboard');
});

// playwright.config.ts（マルチブラウザ設定）
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox',  use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit',   use: { ...devices['Desktop Safari'] } },
  ],
  reporter: 'html',
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry',
  },
});

よくある詰まりポイント

Q. SeleniumやCypressとの違いは？ Seleniumはブラウザごとにドライバーの設定が必要で、APIが古くて書き方が冗長なことが多いよ。CypressはAPIがシンプルで人気だけど、Chromiumのみ・複数オリジンのテストが苦手・Node.jsプロセス外の操作が難しいという制限があるよ。Playwrightはこれらの課題を解消していて、2024年以降の新規プロジェクトではPlaywrightを選ぶケースが増えているんだ。

Q. テストが不安定（Flaky）になる。どうすれば安定する？ 一番多い原因は「要素がまだ描画されていないのにクリックしようとする」タイミング問題だよ。PlaywrightのLocatorは自動リトライするけど、それでも不安定なら await page.waitForLoadState('networkidle') でネットワークが静止するまで待つか、expect(locator).toBeVisible() で表示を確認してからアクションするといいよ。page.waitForTimeout(1000) みたいな固定スリープは最後の手段にしてね。

Q. ヘッドレスモードでないと遅い。CIでは必ずheadlessにすべき？ --headed オプション（ブラウザ表示あり）はデバッグ目的で使うもので、CI/CDではheadlessモード（デフォルト）で動かすのが正解だよ。ブラウザGUIの描画がない分だいぶ速くなるよ。ローカルでもデバッグが不要な通常実行はheadlessにして、テストが失敗したときだけ --headed か --debug（Playwright Inspector起動）で原因を調べるのが効率的だね。