E2Eテストツール徹底比較: Cypress vs Nightwatch vs Puppeteer vs TestCafe

フロントエンド開発において、信頼性の高いE2E（End-to-End）テストは欠かせません。cypress、nightwatch、puppeteer、testcafeはいずれも人気のある選択肢ですが、アーキテクチャや使い勝手、対応範囲に大きな違いがあります。この記事では、実際の開発現場で直面する課題を軸に、各ツールの技術的特徴をコード例とともに詳しく見ていきます。

🧪 テスト記述スタイル：宣言的 vs 命令的

cypress は独自の非同期処理モデルを採用し、テストコードを同期的に記述できます。内部でPromiseチェーンを隠蔽しており、初心者にも書きやすいのが特徴です。

// cypress
it('ログインしてダッシュボードを表示', () => {
  cy.visit('/login');
  cy.get('#email').type('user@example.com');
  cy.get('#password').type('secret');
  cy.get('form').submit();
  cy.url().should('include', '/dashboard');
});

nightwatch はWebDriverプロトコルに基づき、命令的なスタイルで操作を記述します。非同期処理にはPromiseまたはコールバックを使用します。

// nightwatch
module.exports = {
  'ログインしてダッシュボードを表示': function (browser) {
    browser
      .url('/login')
      .setValue('#email', 'user@example.com')
      .setValue('#password', 'secret')
      .submitForm('form')
      .assert.urlContains('/dashboard')
      .end();
  }
};

puppeteer はChrome DevTools Protocol（CDP）を直接操作し、完全にプログラム可能な制御を提供します。Promiseベースで、細かいブラウザ操作が可能です。

// puppeteer
const puppeteer = require('puppeteer');

test('ログインしてダッシュボードを表示', async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.type('#email', 'user@example.com');
  await page.type('#password', 'secret');
  await page.click('form button[type="submit"]');
  expect(page.url()).toContain('/dashboard');
  await browser.close();
});

testcafe は独自の非同期ラッパーを使い、テストコードを同期的に記述できます。WebDriverに依存せず、HTTPプロキシ経由でブラウザを操作します。

// testcafe
import { Selector } from 'testcafe';

fixture`ログインテスト`.page`/login`;

test('ログインしてダッシュボードを表示', async t => {
  await t
    .typeText('#email', 'user@example.com')
    .typeText('#password', 'secret')
    .click('form button[type="submit"]')
    .expect(getLocation().pathname).contains('/dashboard');
});

🌐 ブラウザサポートと実行環境

cypress は当初Electron専用でしたが、現在はChrome、Edge、Firefoxをサポートしています。ただし、Safariやモバイルブラウザは非対応です。また、同一ドメイン外へのナビゲーション（例：OAuthフロー）には制限があります。

nightwatch はWebDriver準拠のため、Selenium Grid経由でほぼすべてのブラウザ（Chrome、Firefox、Safari、Edgeなど）をテストできます。クラウドテストサービス（BrowserStack、Sauce Labs）との連携も容易です。

puppeteer はChromium（またはChrome）専用です。他のブラウザをテストしたい場合は、Playwright（Puppeteerの後継プロジェクト）を検討する必要があります。

testcafe はWebDriverを使わず、独自のメカニズムでブラウザを操作するため、Chrome、Firefox、Safari、Edgeをネイティブにサポートしています。追加のドライバ設定不要で、複数ブラウザでの並列実行が可能です。

🔒 セキュリティとネットワーク制御

cypress はテストコードとアプリケーションが同一オリジンで実行されるため、CORSやCookieの扱いに注意が必要です。ただし、cy.intercept()でネットワークリクエストを簡単にモックできます。

// cypress: ネットワークリクエストのモック
cy.intercept('POST', '/api/login', { fixture: 'auth-success.json' }).as('login');
cy.get('form').submit();
cy.wait('@login');

nightwatch は標準のWebDriver APIを通じて動作するため、ネットワークモックには外部ツール（例：WireMock）やブラウザ拡張が必要です。直接的なリクエストインターセプト機能はありません。

puppeteer はpage.setRequestInterception(true)を有効にすることで、リクエストやレスポンスを細かく制御できます。

// puppeteer: リクエストのインターセプト
await page.setRequestInterception(true);
page.on('request', interceptedRequest => {
  if (interceptedRequest.url().includes('/api/login')) {
    interceptedRequest.respond({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ token: 'fake-token' })
    });
  } else {
    interceptedRequest.continue();
  }
});

testcafe はRequestMockクラスを使って、HTTPリクエストを簡単にモック・スタブできます。

// testcafe: リクエストモック
import { RequestMock } from 'testcafe';

const mock = RequestMock()
  .onRequestTo('http://localhost:3000/api/login')
  .respond({ token: 'fake-token' }, 200, { 'content-type': 'application/json' });

test.requestHooks(mock)('ログインAPIをモック', async t => {
  // ...
});

🛠️ デバッグと開発体験

cypress はタイムトラベリングデバッガを備え、テスト実行中のDOMスナップショットを再生できます。また、テストランナーUIが直感的で、失敗時のスクリーンショットや動画記録も標準でサポートされています。

nightwatch はCLI中心のツールで、GUIデバッガは提供していません。ただし、Seleniumのログやスクリーンショット機能を活用できます。

puppeteer はヘッドフルモードで実行すれば、実際のブラウザウィンドウを操作しながらデバッグ可能です。DevToolsとの連携も容易です。

testcafe はライブモード（--liveオプション）でテストを再実行せずに修正を反映でき、デバッグに便利です。また、失敗時に自動でスクリーンショットを保存します。

⚙️ 設定と拡張性

cypress はcypress.config.jsで設定を管理し、プラグインシステムでカスタマイズ可能です。ただし、カスタムレポーターの統合には少し工夫が必要です。

nightwatch はnightwatch.conf.jsで柔軟な設定が可能で、MochaやJasmineなどのテストランナーと統合できます。WebDriverの設定も詳細に制御できます。

puppeteer は単なるライブラリであり、テストフレームワークではありません。JestやMochaなど既存のテストランナーと組み合わせて使う必要があります。

testcafe は設定ファイル不要で即座にテストを書けますが、testcafe.config.jsで詳細設定も可能です。独自のテストランナーを内蔵しており、外部依存が少ないのが利点です。

📊 まとめ：各ツールの強みと適したケース

💡 最終的な判断基準

• チームが初心者中心で、迅速に信頼性の高いテストを書きたい → cypress
• 複数ブラウザ（特にSafari）でのテストが必須で、Seleniumインフラがある → nightwatch
• ブラウザ自動化そのものが目的（テスト以外の用途含む）で、Chromiumで十分 → puppeteer
• WebDriverに依存せず、シンプルにマルチブラウザテストを始めたい → testcafe

どのツールも成熟しており、メンテナンスも継続されています。プロジェクトの要件（対象ブラウザ、チームスキル、インフラ）に最も合うものを選ぶことが成功の鍵です。