
Playwrightは2020年1月、米マイクロソフトのレドモンド本社で公開されたマルチブラウザE2Eテストフレームワークです。中心メンバーはGoogleでPuppeteerを開発していたAndrey LushnikovとPavel Feldmanらで、彼らが2019年にMicrosoftへ移籍した直後に立ち上がりました。Chromium・WebKit・Firefoxを単一APIで操作でき、各ブラウザにパッチを当てた専用ビルドを同梱することでブラウザ間の挙動差を最小化しています。Cypress一強だったJS製E2Eテスト市場の構図を塗り替えた立役者です。
この記事の目次
- Playwrightの設計上の強み
- Puppeteerチーム合流から生まれた経緯
- 現場での使い方
- Cypress・Selenium・Puppeteerとの比較
- まとめ
Playwrightの設計上の強み

Playwright最大の特徴は、Chromium・WebKit・Firefoxの3エンジンをほぼ同じAPIで操作できる点です。特にWebKitはSafariと同等のエンジンビルドが含まれており、Mac/iOS Safari固有のレンダリング差異を検証できます。他のテストツールでは外部のクラウドサービスを使わないと再現しにくいレイアウト崩れを、ローカル環境で確認可能です。
もうひとつの強みがTrace Viewerで、テスト実行中の各アクション・DOMスナップショット・ネットワーク要求・コンソールログを1ファイルにまとめ、後からタイムライン形式で再生できます。CIで失敗したテストもtrace.zipをダウンロードしてplaywright show-traceで開けば、ローカルで現象を再現する手間が省け、デバッグ時間が大幅に短縮されます。
Puppeteerチーム合流から生まれた経緯

Playwrightの起源は、2017年にGoogleが公開したChrome専用ライブラリPuppeteerにあります。Puppeteerの主要メンバーであるAndrey LushnikovとPavel Feldmanは、Chromium限定であるという制約とGoogleの開発方針に限界を感じ、2019年にMicrosoftへ移籍。「全主要ブラウザを同じ抽象で操作する」というビジョンを引き継いだ後継として、2020年1月にPlaywright 1.0を公開しました。
公開後はリリースペースが極めて速く、2020年内にPython・C#・Javaへのバインディングを追加。2022年公開の1.20以降、コードジェネレータ(playwright codegen)やUIモード、Storybook・Vite・Next.jsと連携するコンポーネントテストなどの開発者体験機能が次々と整備されました。2023年〜2024年にかけて、各社のCypressからの移行事例(Stack Overflow、Adobeなど)が公開され、JavaScript製E2Eテストの主役交代が進んでいます。
現場での使い方

Playwrightの導入はnpm init playwright@latestを叩くだけで、TypeScript設定・サンプル・GitHub Actionsのワークフローまで含めて生成されます。テストは@playwright/testパッケージを使い、test.describe / test('name', async ({ page }) => {...})という構造で書きます。page.gotoでURLを開き、page.getByRole('button', { name: 'Sign in' }).click()のようにアクセシビリティ属性ベースのセレクタを使うことで、セレクタが壊れにくい安定したテストになります。
playwright codegenを実行すると、ブラウザでの操作がリアルタイムでコードに記録され、初学者でも対話的にテストを起こせます。ログインなど共通前処理はstorageStateを保存して各テストで使い回せ、テストデータ用のfixtureも組みやすい設計です。CIではmatrix戦略でChromium・WebKit・Firefoxを並列実行し、HTML reporter出力をGitHub Pagesに公開する運用が定番。Microsoft自身のEdge開発、Visual Studio Code、GitHubなどでも内部テストに採用されています。
Cypress・Selenium・Puppeteerとの比較

JS/TSベースE2Eテストでの最大の比較対象はCypressです。Cypressはブラウザ内JSランタイムで動く設計上、cross-originやマルチタブの扱いに制約がありましたが、Playwrightは外部プロセスから複数ブラウザコンテキストを操作するため、iframeや別ドメイン、複数タブを跨ぐシナリオが書きやすいのが利点です。Cypress側もv12以降で改善を続けていますが、アーキテクチャ上の差は依然として残ります。
歴史あるSeleniumと比べると、PlaywrightはW3C標準にこだわらない代わりに、専用ビルドのブラウザを使うことで挙動の安定性とAPIの一貫性を確保しています。Puppeteerとは血縁関係にありますが、現在のMicrosoft版PlaywrightのほうがエンジンとAPIともに進化しており、新規プロジェクトであればPlaywrightを選ぶ理由が増えています。他言語のテストコードと統一したい場合は、PythonやJava、.NETのバインディングが整備されている点も移行ポイントです。
まとめ
Playwrightは「Puppeteerの作者チームがMicrosoftで作り直した次世代テストフレームワーク」というルーツを持ち、3ブラウザ統一とTrace Viewerでデファクトの座を奪いつつあります。新規でE2Eテストを始めるなら、まず候補に挙げて損のないツールです。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。

コメント