株式会社TAIANでソフトウェアエンジニアをしている ふびらい といいます。
E2Eテスト自動化ツールの技術選定に際して調査した結果を備忘録として共有します。
E2Eテストを自動化するにあたり、AutifyなどのAIベースのSaaSを使用するか、Playwrightなどのコードベースのフレームワークを使用するかが大きな焦点になるかと思います。今回はコードベースのフレームワークに絞って比較します。
前回は「スタートアップの1人目QAとして、QA組織の立ち上げ１ヶ月でやったこと」という記事を書いたので、そちらもあわせてご覧いただければと思います。
PlaywrightとCypressについて
Playwright
PlaywrightはMicrosoft謹製のオープンソースのE2Eフレームワークです。Puppeteerを開発していたチームが中心となって開発しています。Chromium、Firefox、WebKitという主要なブラウザエンジンを単一のAPIでサポートし、クロスブラウザテストが容易です。また、テストの並列実行も標準で備わっています。
Cypress
ブラウザの内部でテストを実行するという独特なアーキテクチャのE2Eテストフレームワークです。JavaScriptでテストを動かすので、クライアントサイドのJSのAPIを利用できたり、デバッグ機能が強力といったメリットがあります。コンポーネントテストにも対応しています。
npm trends
npm trendsの2025年6月時点での直近2年間のダウンロード数です。Cypressのダウンロード数が伸び悩んでいる一方、Playwrightは順調にダウンロード数を伸ばし、昨年は遂にCypressのダウンロード数を抜きました。
Playwright vs Cypress
⭕️：使える。
🔺：使用するには一手間必要。もしくは試験的な機能。
❌：使用できない機能。
| 比較観点 | Playwright | Cypress | 備考 |
|---|---|---|---|
| 実行速度 | ⭕️ | ⭕️ | 並列実行でややPlaywright有利か。 |
| テスト並列実行 | ⭕️ | 🔺 | Playwrightは標準機能。Cypressは有料のCypress Cloudとの連携が必要。 |
| クロスブラウザ | ⭕️ | 🔺 | Playwrightは3大エンジン対応。CypressはWebKit(Safari)に非対応。 |
| 複数タブ/ウィンドウ | ⭕️ | 🔺 | Playwrightは標準対応。Cypressはアーキテクチャ上の制限がある。 |
| モバイル対応 | ⭕️ | ⭕️ | Playwrightはデバイス指定等の高度なエミュレーションが可能。Cypressはビューポート変更によるレスポンシブ表示が主。 |
| 自動待機機能 | ⭕️ | ⭕️ | どちらも標準搭載。 |
| GUIテストランナー | ⭕️ | ⭕️ | CypressのGUIテストランナーは中核機能。PlaywrightもUI Modeで追随。 |
| コード自動生成（レコード機能） | ⭕️ | 🔺 | Playwrightのcodegenは非常に強力。Cypress Studioは実験的な位置付け。 |
| 多言語対応 | ⭕️ | ❌ | PlaywrightはJavaScript/TypeScriptの他にJava、Python、C#などに対応。CypressはJavaScript/TypeScriptのみ。 |
実行速度
サンプルコードで実行速度を比較することも可能ですが、どうしても実運用のE2Eテストと実体が乖離してしまうので、ここではそれは行いません。
どちらも並列実行が可能ですが、Cypressは有料サービスのCypress Cloudと連携することで実現します。Cypress Cloudはテスト結果の管理や分析など多くのメリットを提供しますが、純粋に並列実行だけを目的とする場合、追加のコストが必要なことは頭に入れておきたいです。
クロスブラウザ
| ブラウザエンジン | Playwright | Cypress |
|---|---|---|
| Chromium (Chrome, Edge) | ✅ 対応 | ✅ 対応 |
| Firefox | ✅ 対応 | ✅ 対応 |
| WebKit (Safari) | ✅ 対応 | ❌ 非対応 |
Safariへの対応が大きな違いです。PlaywrightはSafariのエンジンであるWebKitをサポートしている一方、CypressはWebKitに対応していません。クロスブラウザのテストが必要な場合はPlaywrightに軍配が上がりそうです。
複数タブ/ウィンドウ
Cypressはアーキテクチャの都合上、別タブや別ウィンドウを使用するテストができません。
これは公式のドキュメントでもトレードオフとして言及されています。
コード自動生成（レコード機能）
Playwrightは、npx playwright codegen <URL>コマンドで起動する、強力なレコーディング機能を備えています。この機能は比較的歴史も長く安定して稼働しています。Cypressにも「Cypress Studio」がありますがやや実験的な位置付けです。
まとめ
Playwrightは公式のMCPも公開されており、かつ自動テストの実装体験が変わるのではないかという期待をしているのもあり、Playwrightに優位性があると感じました。CypressにもGUIテストランナー等の魅力的な機能はありますが、業務のWebアプリケーションでは、クロスブラウザ対応がほぼ必須となるので、Playwright一択な状況になっている気がします。
We are hiring!
TAIANでは、このような開発・技術・思想に向き合い、未来をつくる仲間を一人でも多く探しています。少しでも興味を持っていただいた方は弊社の紹介ページをご覧ください。
株式会社TAIANのテックブログです。ブライダル業界向けのVertical SaaSを中心に、お祝いに関するプロダクトを開発中。「日本の未来をもっとアツく、あたたかく」そんな意気込みのメンバーで投稿しています。
Discussion