主要な E2E テストフレームワーク：アーキテクチャと実装の深掘り

nightwatch、protractor、testcafe、webdriverio は、Web アプリケーションの自動テストを支える代表的なツールですが、その内部構造と開発体験は大きく異なります。単に「テストができる」という点では同じでも、プロジェクトの規模や要件によって最適な選択は変わります。ここでは、実際のコードと技術的な違いに焦点を当てて比較します。

🏗️ アーキテクチャ：WebDriver 依存 vs ドライバー不要

テストツールがブラウザをどう制御するかは、安定性とセットアップの手間に直結します。

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

• ブラウザごとにドライバー（ChromeDriver など）の管理が必要です。
• ブラウザのネイティブなイベントをシミュレートするため、挙動が実ユーザーに近いです。

// nightwatch: WebDriver ベース
module.exports = {
  'Demo Test': function (browser) {
    browser
      .url('https://example.com')
      .waitForElementVisible('body')
      .assert.titleContains('Example');
  }
};

protractor も WebDriver を使用しますが、Angular 専用でした。

• Angular の内部状態（ゾーンなど）を自動で待機する機能がありました。
• 現在は非推奨であり、新しいプロジェクトでは使用できません。

// protractor: Angular 専用（非推奨）
browser.get('https://example.com');
element(by.css('h1')).getText().then((text) => {
  expect(text).toBe('Welcome');
});

testcafe はドライバーを必要としません。

• URL を介してテストスクリプトをページに注入して実行します。
• ドライバーのバージョン管理が不要で、セットアップが非常に高速です。

// testcafe: ドライバー不要
import { Selector } from 'testcafe';

fixture `My Fixture`
  .page `https://example.com`;

test('My Test', async t => {
  await t.expect(Selector('h1').innerText).eql('Welcome');
});

webdriverio は WebDriver と DevTools プロトコルの両方をサポートします。

• 状況に応じて最適なプロトコルを選択でき、実行速度を最適化できます。
• 設定の自由度が高く、カスタマイズ性が抜群です。

// webdriverio: 柔軟なプロトコル選択
import { remote } from 'webdriverio';

(async () => {
  const browser = await remote({ capabilities: { browserName: 'chrome' } });
  await browser.url('https://example.com');
  const title = await browser.getTitle();
  console.log(title);
  await browser.deleteSession();
})();

⏳ 非同期処理：コマンドチェーン vs async/await

JavaScript の非同期処理をどう扱うかは、コードの読みやすさに影響します。

nightwatch は以前コマンドチェーンが主流でしたが、現在は async/await が推奨されています。

• 明示的な await により、処理の順序が明確になります。
• 設定により、従来のチェーンスタイルも維持可能です。

// nightwatch: async/await サポート
module.exports = {
  'Async Test': async (browser) => {
    await browser.url('https://example.com');
    const visible = await browser.isVisible('body');
    console.log(visible);
  }
};

protractor は Promise と async/await の両方に対応していましたが、制御フロー管理が複雑でした。

• browser.waitForAngular() などの独自待機機構があり、時に予期せぬ待機を引き起こしました。

// protractor: async/await
it('should check title', async () => {
  await browser.get('https://example.com');
  const title = await browser.getTitle();
  expect(title).toEqual('Example');
});

testcafe は最初から async/await を前提に設計されています。

• テストアクション（t.click など）はすべて Promise を返します。
• 自然な流れでコードが書けるため、学習コストが低いです。

// testcafe: 自然な async/await
test('User Interaction', async t => {
  await t
    .click('#submit-button')
    .typeText('#name', 'John Doe')
    .expect(Selector('.result').innerText).eql('Success');
});

webdriverio は完全な async/await サポートを提供します。

• コマンドはすべて非同期であり、明示的な待機が必須です。
• これにより、テストの失敗箇所が特定しやすくなります。

// webdriverio: 明示的な非同期処理
it('checks element', async () => {
  await browser.url('https://example.com');
  const elem = await $('#myElement');
  await elem.waitForDisplayed();
  await elem.click();
});

🔍 セレクターと要素操作

要素をどう特定し、操作するかはテストの安定性を決めます。

nightwatch は CSS セレクターと XPath を標準でサポートします。

• 独自のカスタムコマンドを作成して、セレクターロジックを拡張できます。

// nightwatch: カスタムコマンド例
browser.perform(async () => {
  const element = await browser.findElement('css selector', '#app');
  await browser.elementIdClick(element.value.ELEMENT);
});

protractor は Angular 固有のロケーター（by.binding など）を持っていました。

• 一般 Web アプリでは標準的な CSS セレクターを使用します。

// protractor: Angular 固有ロケーター（非推奨）
const user = element(by.binding('username'));
await user.click();

testcafe は強力な Selector API を提供します。

• DOM ツリーを traverse するメソッドが豊富で、動的な要素取得が容易です。

// testcafe: 強力な Selector API
const button = Selector('button').withText('Submit');
await t.click(button);

webdriverio は $ と $$ を使った jQuery 風の構文を採用しています。

• 要素チェーン操作が直感的で、コード量が少なくて済みます。

// webdriverio: jQuery 風構文
const button = await $('button=Submit');
await button.click();

🛠️ 保守性とエコシステム

長期的なプロジェクトでは、ツールの将来性とコミュニティの大きさが重要です。

nightwatch は統合されたソリューションを提供します。

• 追加プラグインが少なくても一通りのことが完結します。
• 保守は継続されていますが、コミュニティ規模は中程度です。

protractor はメンテナンスが終了しています。

• 新規採用は避けるべきです。Angular チームも他のツールを推奨しています。
• セキュリティアップデートも期待できません。

testcafe は DevExpress によってメンテナンスされています。

• 商用サポートが受けられる点が企業向けに安心材料です。
• プラグインエコシステムは WebDriverIO に比べると小規模です。

webdriverio はオープンソースコミュニティが非常に活発です。

• 多数のサービス（SauceLabs, BrowserStack など）と公式に統合されています。
• 問題が起きた際の解決策が見つかりやすいです。

📊 比較サマリー

💡 結論と推奨

protractor は過去のものとなりました。Angular プロジェクトであっても、現在は webdriverio や cypress、playwright などの移行が標準です。

testcafe は、インフラ管理の手間を省き、とにかく早くテストを書きたい場合に最適です。セットアップの苦しみを味わいたくないチームに向いています。

nightwatch は、設定を最小限に抑えつつ、WebDriver の信頼性を確保したい場合に有効です。組み込み機能が充実しているため、追加ライブラリを探し回る必要がありません。

webdriverio は、最も柔軟で強力な選択肢です。大規模な自動化システム、モバイルテスト、あるいは特定のブラウザ機能への深いアクセスが必要な場合は、これが最終的な着地点になることが多いです。

最終的なアドバイス：新しいプロジェクトを始めるなら、webdriverio または testcafe を検討してください。特に、長期的な拡張性を考えるなら webdriverio のエコシステムの強さは無視できません。