Playwrightとは？
Playwright（プレイライト）は、Microsoftが2020年にオープンソースで公開した、Webアプリのブラウザ自動操作・e2eテストフレームワークです。
「playwright」は英語で「劇作家」という意味。ブラウザという"舞台"の上で、テストという"演劇"を書く人、というイメージです。
公式サイト: https://playwright.dev/
開発元: Microsoft
初回リリース: 2020年1月
対応言語: TypeScript / JavaScript / Python / Java / C#
なぜPlaywrightが生まれたのか？
e2eテストツールの歴史と課題
Playwright以前にも、Webブラウザを自動操作するツールはありました。
Selenium（2006年〜）
最も古くから使われてきた定番ツール。多くのブラウザに対応していますが、セットアップが複雑で動作が不安定になりやすい（"Flaky test"問題）という悩みがありました。
Puppeteer（2018年〜）
Googleが開発。ChromeをヘッドレスモードでNode.jsから操作できます。ただしChrome（Chromium）専用で、FirefoxやSafariには対応していません。
Cypress（2018年〜）
開発者体験（DX）を重視した設計で人気を博しました。しかしChrome系ブラウザのみ対応で、iframeや複数タブ操作に弱い面がありました。
Playwrightが解決したこと
MicrosoftのエンジニアはPuppeteerチームの経験者を含んでおり、これらの課題をすべて克服する形でPlaywrightを設計しました。
| 課題 | Playwright の解決策 |
|---|---|
| ブラウザが限定される | Chromium・Firefox・WebKitを1つのAPIで操作 |
| テストが不安定（Flaky） | auto-wait機能で要素が操作可能になるまで自動待機 |
| セットアップが複雑 |
npm init playwright@latest 1コマンドで完了 |
| 並列実行がしにくい | ワーカーによる並列テスト実行を標準サポート |
| デバッグが難しい | Trace Viewer / UI Mode などの強力なデバッグ機能 |
Playwrightの最大の特徴：auto-wait
e2eテストが壊れやすい（Flaky）最大の原因は、「まだ画面に表示されていない要素を操作しようとしてしまうこと」です。
旧来の方法（手動でsleepを入れる）
await page.click('#submit-button')
await sleep(2000) // とりあえず2秒待つ（環境によっては足りない）
await page.fill('#result', 'done')
- 環境が遅いと2秒でも足りず失敗する
- 環境が速いと無駄に待ち続けて遅くなる
Playwrightの方法（auto-wait）
await page.click('#submit-button')
// ← sleepなし！要素が操作可能になるまで自動で待ってくれる
await page.fill('#result', 'done')
Playwrightは内部で以下のすべてを自動チェックします。
- 要素がDOMに存在するか？
- 要素が画面に表示されているか？
- 要素が操作可能（クリックできる）状態か？
- アニメーションが完了しているか？
Playwrightの便利な機能
1. コードジェネレーター（codegen）
ブラウザを手動操作するだけでテストコードを自動生成してくれます。
npx playwright codegen https://example.com
実際にブラウザを操作すると、右側にTypeScriptコードがリアルタイムで生成されます。テストを書くスピードが劇的に上がります。
2. Trace Viewer（トレースビューア）
テストが失敗したとき、操作のすべての過程を録画したトレースファイルを確認できます。
npx playwright show-report
トレースビューアでは以下が確認できます。
- 各ステップのスクリーンショット
- ネットワークリクエスト
- コンソールログ
- DOMの状態
「なぜ失敗したのか」がひと目でわかります。
3. UI Mode
バージョン1.32で追加されたインタラクティブなテスト実行画面です。
npx playwright test --ui
- テストをGUI上で1件ずつ実行できる
- ステップごとにブラウザの状態を確認できる
- ホットリロードでコード変更が即反映される
4. スクリーンショット・動画の自動保存
テストが失敗したとき、証拠を自動で残してくれます。
// playwright.config.ts
export default defineConfig({
use: {
screenshot: 'only-on-failure', // 失敗時のみスクショ
video: 'retain-on-failure', // 失敗時のみ動画
trace: 'on-first-retry', // リトライ時にトレース
},
})
5. APIテストも同じコードで書ける
ブラウザ操作だけでなく、REST APIのテストもPlaywrightで書けます。
test('APIが正しいデータを返すこと', async ({ request }) => {
const response = await request.get('/api/users/1')
expect(response.status()).toBe(200)
const body = await response.json()
expect(body.name).toBe('Alice')
})
e2eテストとAPIテストを1つのフレームワークに統一できるのは大きなメリットです。
6. 複数タブ・認証状態の保存
複数タブを同時に操作したり、ログイン状態を使い回したりすることも得意です。
// ログイン状態をファイルに保存
// → 2回目以降はログイン操作をスキップして高速化
test.use({ storageState: 'auth.json' })
test('ログイン済みページが見られる', async ({ page }) => {
await page.goto('/dashboard')
// すでにログイン済みの状態でテストが始まる！
})
セットアップは本当に簡単
# 1. 既存プロジェクトに追加する場合
npm init playwright@latest
# → 対話形式でいくつか質問される（TypeScript使う？ tests/フォルダの場所は？など）
# → playwright.config.ts と サンプルテストファイルが自動生成される
# → ブラウザのバイナリも自動ダウンロードされる
セットアップ後のファイル構成：
your-project/
├── tests/
│ └── example.spec.ts ← サンプルテスト
├── playwright.config.ts ← 設定ファイル
└── package.json
テスト実行コマンド早見表
# すべてのテストを実行
npx playwright test
# 特定のファイルだけ実行
npx playwright test tests/login.spec.ts
# UIモードで実行（おすすめ）
npx playwright test --ui
# 画面ありで実行（デバッグに便利）
npx playwright test --headed
# テストレポートを表示
npx playwright show-report
# ブラウザを操作してコードを自動生成
npx playwright codegen https://your-app.com
Playwrightを使うべき場面
こんなときに特に効果的です。
- 会員登録 → 購入 → 完了メールのような複数ページをまたがるフロー
- ログイン認証が絡むページのテスト
- **複数ブラウザ（Chrome・Safari・Firefox）**での動作確認
- CIパイプライン（GitHub Actionsなど）への自動テスト組み込み
向いていないケース
- 単一の関数やコンポーネントのロジックのテスト → Vitestなどのユニットテストが適切
- バックエンドのロジック単体テスト → JestやRSpecなどで
まとめ
| 項目 | 内容 |
|---|---|
| 何者か | Microsoftが開発したWebブラウザ自動操作・e2eテストフレームワーク |
| なぜ生まれた | 旧来ツール（Selenium等）の不安定・遅さ・ブラウザ限定問題を解決するため |
| 最大の強み | auto-waitによる安定した動作と、マルチブラウザ対応 |
| 便利な機能 | codegen・Trace Viewer・UI Mode・動画録画・APIテスト |
| セットアップ |
npm init playwright@latest の1コマンドで完了 |
Playwrightは「書きやすく・安定していて・デバッグしやすい」という三拍子が揃った現代的なe2eテストツールです。まずは codegen でブラウザを操作するだけでコードが生成される体験から始めてみるのがおすすめです！