Cypress vs Nightwatch vs Playwright vs Puppeteer vs TestCafe: ブラウザ自動化ツールの実践的比較

フロントエンド開発において、UIの信頼性を保つには強固なE2Eテスト戦略が不可欠です。しかし、cypress、nightwatch、playwright、puppeteer、testcafe の5つの主要ツールは、それぞれ異なる哲学と技術的トレードオフを持っています。この記事では、実際のコード例を交えながら、各ツールの核心的な違いを掘り下げます。

🧪 テスト実行モデル：インブラウザ vs ドライバーベース vs プロキシベース

cypress はテストコードをブラウザ内で直接実行します。これにより、DOM操作やネットワークリクエストへの介入が極めて自然になります。

// cypress: ネットワークリクエストのモック
it('ログインAPIをモック', () => {
  cy.intercept('POST', '/api/login', { fixture: 'login-success.json' }).as('login');
  cy.visit('/login');
  cy.get('#email').type('user@example.com');
  cy.get('#password').type('pass');
  cy.get('form').submit();
  cy.wait('@login'); // モックされたレスポンスを待機
  cy.url().should('include', '/dashboard');
});

nightwatch はSelenium WebDriver を介してブラウザを制御します。テストコードはNode.js上で実行され、HTTP経由でブラウザドライバーと通信します。

// nightwatch: 基本的なUI操作
module.exports = {
  'ログインテスト': function (browser) {
    browser
      .url('https://example.com/login')
      .setValue('#email', 'user@example.com')
      .setValue('#password', 'pass')
      .click('form button[type=submit]')
      .assert.urlContains('/dashboard')
      .end();
  }
};

playwright は各ブラウザベンダーと密接に連携し、ネイティブな自動化プロトコルを使用します。これにより、高速かつ安定した操作が可能になります。

// playwright: 複数ブラウザ対応のテスト
import { test, expect } from '@playwright/test';

test('ログイン成功', async ({ page }) => {
  await page.route('**/api/login', route => route.fulfill({
    json: { success: true, user: { id: 1 } }
  }));
  await page.goto('/login');
  await page.fill('#email', 'user@example.com');
  await page.fill('#password', 'pass');
  await page.click('form button[type=submit]');
  await expect(page).toHaveURL(/dashboard/);
});

puppeteer も同様にChromiumのDevTools Protocolを直接使用しますが、Chromium系ブラウザ専用です。

// puppeteer: 基本的な操作
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com/login');
  await page.type('#email', 'user@example.com');
  await page.type('#password', 'pass');
  await page.click('form button[type=submit]');
  await page.waitForNavigation();
  console.assert(page.url().includes('/dashboard'));
  await browser.close();
})();

testcafe は独自のプロキシサーバーを介してブラウザと通信します。テストコードはNode.js上で実行されますが、ブラウザ内に挿入されたスクリプトが実際の操作を行います。

// testcafe: 直感的なAPI
import { Selector } from 'testcafe';

fixture`ログイン`
  .page`https://example.com/login`;

test('ログイン成功', async t => {
  await t
    .typeText('#email', 'user@example.com')
    .typeText('#password', 'pass')
    .click('form button[type=submit]')
    .expect(Selector('h1').innerText).eql('ダッシュボード');
});

🌐 ブラウザサポート範囲

• cypress: Chromium系（Chrome, Edge）、Firefox（制限あり）。Safariは非対応。
• nightwatch: WebDriver対応ブラウザすべて（Chrome, Firefox, Safari, Edge）。
• playwright: Chromium、WebKit（Safari）、Firefox をフルサポート。各ブラウザの最新版だけでなく、特定バージョンも指定可能。
• puppeteer: Chromium系のみ（Chrome, Edge）。Firefoxサポートは実験的で非推奨。
• testcafe: Chrome, Firefox, Safari, Edge をサポート。内部でWebDriverやプロキシを自動選択。

Playwrightは唯一、Safari（WebKit）を本格的にサポートする現代的ツールです。

🔌 ネットワーク操作とモックの柔軟性

cypress と playwright はネットワークのインターセプトとモックが非常に洗練されています。

// cypress: レスポンスの遅延やステータスコード変更
cy.intercept({
  method: 'GET',
  url: '/api/user',
}, {
  statusCode: 500,
  body: { error: 'Server down' }
});

// playwright: 同様の機能
await page.route('**/api/user', route => route.fulfill({
  status: 500,
  body: JSON.stringify({ error: 'Server down' })
}));

一方、puppeteer は page.setRequestInterception(true) を有効にする必要があり、コードが冗長になります。

// puppeteer: リクエストインターセプト
await page.setRequestInterception(true);
page.on('request', interceptedRequest => {
  if (interceptedRequest.url().includes('/api/user')) {
    interceptedRequest.respond({
      status: 500,
      body: JSON.stringify({ error: 'Server down' })
    });
  } else {
    interceptedRequest.continue();
  }
});

nightwatch と testcafe はネットワークモックのサポートが限定的です。NightwatchはSeleniumの制約を受け、TestCafeは基本的なモックのみ提供します。

⚙️ 設定と初期導入の手間

• cypress: npx cypress open で即時起動。設定ファイルは最小限。
• nightwatch: Seleniumサーバーやブラウザドライバーのインストールが必要。nightwatch.conf.js の設定が複雑。
• playwright: npx playwright install で全ブラウザを一括インストール。設定は直感的。
• puppeteer: npm install puppeteer だけでChromiumが自動ダウンロード。追加設定不要。
• testcafe: npm install testcafe で完了。テストファイルを書くだけで実行可能。

TestCafeとPuppeteerはゼロコンフィグに近い体験を提供しますが、Nightwatchは最も設定が面倒です。

📸 ビジュアルテストとスクリーンショット

playwright はビジュアルリグレッションテストを組み込みサポートしています。

// playwright: スナップショットテスト
import { test, expect } from '@playwright/test';

test('UIスナップショット', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage.png');
});

cypress は公式プラグイン（cypress-plugin-snapshots）経由で対応可能ですが、標準機能ではありません。

puppeteer はスクリーンショット取得は可能ですが、差分検出は自前実装が必要です。

// puppeteer: スクリーンショット
await page.screenshot({ path: 'screenshot.png' });

NightwatchとTestCafeはビジュアルテストのサポートが弱いです。

🔄 非同期処理の扱い方

cypress は独自のコマンドキューを使用するため、Promiseチェーンやasync/awaitとは異なる記述が必要です。

// cypress: コマンドチェーン（async/await不可）
cy.get('#button').click().then(() => {
  // 別の操作
});

一方、playwright、puppeteer、testcafe は標準的なasync/await を全面的にサポートします。

// playwright: 標準的なasync/await
await page.click('#button');
const text = await page.textContent('#result');

Nightwatchはコールバックまたはasync/awaitの両方をサポートしますが、一貫性に欠けることがあります。

🛑 デバッグと開発体験（DX）

• cypress: テスト実行中のタイムトラベルデバッグが最大の強み。各ステップのDOM状態を再生可能。
• playwright: VS Code拡張によるインタラクティブデバッグ、テストジェネレーター、トレースビューアを提供。
• testcafe: テスト失敗時に自動でスクリーンショットとコンソールログを保存。
• puppeteer: DevToolsを直接開いてデバッグ可能（headless: false 時）。
• nightwatch: デバッグ機能は限定的。主にログ出力に依存。

CypressとPlaywrightは、現代的なDXを最も重視した設計になっています。

📊 まとめ：各ツールの強みと用途

💡 最終的な判断基準

• 「すぐに始めたい、設定は最小限に」 → testcafe または puppeteer（Chromium限定なら）
• 「最高の開発体験とデバッグ機能が欲しい」 → cypress
• 「Safari含む全ブラウザで信頼性の高いテストが必要」 → playwright
• 「既存のSeleniumインフラがある」 → nightwatch（ただし新規プロジェクトでは避けるべき）

現代的なフロントエンド開発では、playwright が最もバランスの取れた選択肢となっています。一方、cypress はDXを最優先するチームにとって依然として魅力的です。プロジェクトのスケール、ブラウザ要件、メンテナンスコストを総合的に考慮して選んでください。