Cypress vs Nightwatch vs Puppeteer vs TestCafe vs WebdriverIO：アーキテクチャと実装の深掘り

Web アプリケーションの品質を保証するため、cypress、nightwatch、puppeteer、testcafe、webdriverio はそれぞれ異なる技術アプローチを採用しています。単に「テストができる」という点では同じですが、ブラウザをどう制御し、どうコードを実行するかという根本的な部分で大きな違いがあります。ここでは、実務的な観点からこれら 5 つのツールを比較します。

🏗️ 実行アーキテクチャ：ブラウザ制御の仕組み

ツールがブラウザをどう動かすかは、テストの安定性や速度に直結します。

cypress はアプリケーションと同じランタイム（ブラウザ内）でテストコードを実行します。

• サーバーとブラウザの間にプロキシを挟み、コマンドを注入します。
• これにより、ネットワークリクエストの制御が容易ですが、複数タブの同時操作などは制限されます。

// cypress: ブラウザ内で実行
cy.visit('/login');
cy.get('#username').type('user');
cy.get('#password').type('pass');
cy.get('button').click();

nightwatch は Selenium WebDriver プロトコルを使用します。

• テストコードは Node.js で実行され、HTTP リクエストを通じてブラウザを遠隔操作します。
• 標準的なアプローチであり、様々なブラウザドライバーと互換性があります。

// nightwatch: WebDriver プロトコル
browser.url('http://localhost/login');
browser.setValue('#username', 'user');
browser.setValue('#password', 'pass');
browser.click('button');

puppeteer は Chrome DevTools Protocol (CDP) を直接叩きます。

• ブラウザインスタンスを直接Spawn し、低レベルな制御が可能です。
• ヘッドレス実行がデフォルトで、非常に高速ですが、主に Chrome/Chromium に限定されます。

// puppeteer: CDP 直接制御
const page = await browser.newPage();
await page.goto('http://localhost/login');
await page.type('#username', 'user');
await page.type('#password', 'pass');
await page.click('button');

testcafe は WebDriver を使わず、独自の技術で動作します。

• テストランナーがページにスクリプトを注入し、ユーザーアクションをシミュレートします。
• ドライバーのインストールが不要で、セットアップが最も簡単です。

// testcafe: 独自の注入方式
await t.navigateTo('/login');
await t.typeText('#username', 'user');
await t.typeText('#password', 'pass');
await t.click('button');

webdriverio は WebDriver プロトコルをベースにしつつ、CDP も併用できます。

• 標準的な WebDriver コマンドに加え、Chrome 固有の機能も利用可能です。
• 設定の柔軟性が高く、大規模なシステム統合に向いています。

// webdriverio: WebDriver + CDP
await browser.url('http://localhost/login');
await $('#username').setValue('user');
await $('#password').setValue('pass');
await $('button').click();

⏳ 非同期処理と待機機制：明示的 vs 自動

テストの安定性は、要素が描画されるのをどう待つかにかかっています。

cypress は自動的にリトライと待機を行います。

• 要素が見つかるまでコマンドを再試行するため、wait を明示的に書く必要がほとんどありません。
• コードが簡潔になりますが、制御を細かく行いたい場合には注意が必要です。

// cypress: 自動リトライ
cy.get('.loaded-element').should('be.visible');
// 要素が現れるまで自動的に待機しリトライ

nightwatch はコマンドチェーン内で待機を管理します。

• waitForElementVisible などの明示的な待機コマンドを使用します。
• 制御は明確ですが、コードが長くなりやすい傾向があります。

// nightwatch: 明示的待機
browser.waitForElementVisible('.loaded-element', 5000);
browser.click('.loaded-element');

puppeteer は Promise ベースで、待機を明示的に記述します。

• waitForSelector などを使って、特定の条件が満たされるまで待機します。
• 細かな制御が可能ですが、書き忘れによるフレーキーテストのリスクがあります。

// puppeteer: Promise 待機
await page.waitForSelector('.loaded-element');
await page.click('.loaded-element');

testcafe も自動待機機制を持ちます。

• アクション実行前に要素の準備を自動的に待ちます。
• cypress に近い開発者体験を提供しつつ、アーキテクチャは異なります。

// testcafe: 自動待機
await t.click('.loaded-element');
// 要素が操作可能になるまで自動的に待機

webdriverio は設定により自動待機を有効にできます。

• waitForTimeout などの設定でグローバルな待機動作を定義可能です。
• コマンドレベルでも明示的な待機関数を利用できます。

// webdriverio: 設定または明示的待機
await $('.loaded-element').waitForDisplayed();
await $('.loaded-element').click();

🐛 デバッグ体験：タイムトラベル vs ログ出力

テストが失敗したとき、原因を特定するまでの時間が開発効率を左右します。

cypress はタイムトラベルデバッグを提供します。

• コマンドログをクリックすると、その時点の DOM スナップショットを確認できます。
• ブラウザ上で直接デバッグできるため、問題特定が非常に高速です。

// cypress: コマンドログで状態確認
cy.get('button').debug(); 
// 実行を一時停止し、DevTools で状態を調査可能

nightwatch はコンソールログとスクリーンショットに依存します。

• 失敗時にスクリーンショットを自動保存する設定が一般的です。
• 外部のレポートツールと連携して視覚化することが多いです。

// nightwatch: スクリーンショット保存
browser.saveScreenshot('./logs/error.png');
console.log('Error occurred at login step');

puppeteer は DevTools プロトコルを活用したデバッグが可能です。

• slowMo オプションで動作を遅くしたり、DevTools ウィンドウを表示したりできます。
• スクリーンショットやトレースの取得も容易です。

// puppeteer: 低速モードでデバッグ
const browser = await puppeteer.launch({ headless: false, slowMo: 100 });
// ブラウザが実際に操作されている様子を目視確認

testcafe はテストランナー上にエラー情報を表示します。

• 失敗箇所のスクリーンショットやビデオ録画を簡単に設定できます。
• コマンドラインでの出力が明確で、CI 環境での確認に向いています。

// testcafe: ビデオ録画設定
// testcafe "chrome" tests/ --video ./videos
// 失敗時に該当部分のビデオを確認可能

webdriverio は豊富なレポートオプションを持ちます。

• wdio-spec-reporter などで詳細なログ出力が可能です。
• ブラウザのコンソールログを取得してアサーションに含めることもできます。

// webdriverio: ログ取得
const logs = await browser.getLogs('browser');
console.log(logs);
// コンソールエラーをテスト出力に含める

🌐 クロスブラウザとモバイル対応

どのブラウザやデバイスでテストする必要があるかも選定基準になります。

cypress は主要デスクトップブラウザをサポートします。

• Chrome、Firefox、Edge、Electron に対応しています。
• モバイルブラウザのネイティブテストはサポートされていません（レスポンシブ確認は可能）。

// cypress: ブラウザ指定
// cypress run --browser chrome
// cypress run --browser firefox

nightwatch は Selenium グリッドを通じて広範なブラウザをカバーします。

• モバイルテストには Appium と統合できます。
• レガシーな Internet Explorer のサポートも可能です。

// nightwatch: 環境設定
// nightwatch.conf.js で desiredCapabilities を設定
// browserName: 'safari', platform: 'MAC'

puppeteer は基本的に Chrome/Chromium です。

• Firefox のサポートは実験的です。
• モバイルエミュレーションは可能ですが、実機テストではありません。

// puppeteer: モバイルエミュレーション
await page.emulate(iPhone);
// デバイス仕様を模倣して表示確認

testcafe はインストール済みのブラウザを自動的に検出します。

• モバイルデバイスへのリモート実行もサポートしています。
• 追加のドライバー設定なしで幅広いブラウザを扱えます。

// testcafe: ブラウザ指定
testcafe 'chrome,firefox,safari' tests/
// コマンドラインで複数ブラウザを同時に指定可能

webdriverio は WebDriver 対応ブラウザすべてを扱えます。

• Appium との統合により、iOS/Android の実機テストも可能です。
• クラウドテストサービス（BrowserStack など）との連携が容易です。

// webdriverio: モバイル設定
// wdio.conf.js
// capabilities: [{ browserName: 'Chrome', platformName: 'Android' }]

📊 比較サマリー

💡 結論：プロジェクトに合わせた選択

これら 5 つのツールに絶対的な正解はありません。プロジェクトの要件とチームの状況に合わせて選ぶ必要があります。

cypress は、モダンな Web アプリケーションの開発中で、開発者がテストを書きながらデバッグしたい場合に最適です。特にフロントエンド中心のプロジェクトで力を発揮します。

nightwatch は、Selenium エコシステムへの依存や、モバイルテストを含む幅広いカバレッジが必要な場合に適しています。確実性を求めるエンタープライズ環境でよく選ばれます。

puppeteer は、テストというよりはブラウザ自動化、スクレイピング、または Chrome 固有の機能検証を目的とする場合に選択すべきです。E2E テストフレームワークとして使うこともできますが、用途は限定的です。

testcafe は、環境構築の手間を極限まで減らしたいチームや、WebDriver の不安定さを避けたい場合に有効です。セットアップの速さと安定性のバランスが良いです。

webdriverio は、大規模で複雑なテストインフラを構築する場合に最も適しています。拡張性が高く、様々なプロトコルやサービスと統合できるため、長期的なメンテナンス性を重視するプロジェクトに向いています。

最終的には、チームがどのツールで最も生産的に働けるか、そしてプロジェクトの技術スタックとどのツールが最も自然にフィットするかで判断しましょう。