Playwright vs Puppeteer vs Selenium WebDriver：E2Eテストとブラウザ自動化の実践的比較

フロントエンド開発者がE2Eテストやブラウザ自動化を実装する際、playwright、puppeteer、selenium-webdriver の3つが代表的な選択肢になります。これらは目的こそ似ていますが、設計思想や実装方法、サポート範囲に大きな違いがあります。現場で実際に使う観点から、深く掘り下げて比較します。

🌐 サポートブラウザ：1つだけ vs 複数 vs 全般

puppeteer は Chromium系のみ をサポートします。つまり、ChromeやMicrosoft Edge（Chromium版）は動作しますが、FirefoxやSafariは対象外です。

// puppeteer: Chromium系限定
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');

playwright は Chromium、Firefox、WebKit（Safariのエンジン）の3つを公式サポート しています。1つのテストコードで複数ブラウザでの動作確認が可能です。

// playwright: ブラウザごとに起動可能
const { chromium, firefox, webkit } = require('playwright');

const browser = await chromium.launch(); // または firefox.launch(), webkit.launch()
const page = await browser.newPage();
await page.goto('https://example.com');

selenium-webdriver は理論上 すべてのWebDriver準拠ブラウザ をサポートしますが、各ブラウザ用のドライバー（chromedriver、geckodriverなど）を別途インストール・管理する必要があります。

// selenium-webdriver: ドライバー依存
const { Builder, By } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

let driver = await new Builder()
  .forBrowser('chrome')
  .setChromeOptions(new chrome.Options())
  .build();

await driver.get('https://example.com');

💡 実務では、FirefoxやSafariでの動作検証が必要なら playwright 一択。Chromium系だけで十分なら puppeteer の軽さが魅力。レガシー環境やマルチ言語対応が必須なら selenium-webdriver を検討。

⚙️ API設計：直感的 vs 冗長

puppeteer と playwright はどちらもモダンで一貫性のあるPromiseベースのAPIを持ち、page.click() や page.fill() のように直感的に操作できます。

// puppeteer
await page.goto('https://example.com');
await page.type('#username', 'testuser');
await page.click('#submit');

// playwright
await page.goto('https://example.com');
await page.fill('#username', 'testuser');
await page.click('#submit');

一方、selenium-webdriver はWebDriverプロトコルに忠実なため、要素の取得と操作が分かれており、コードが冗長になりがちです。

// selenium-webdriver
await driver.get('https://example.com');
let username = await driver.findElement(By.id('username'));
await username.sendKeys('testuser');
let submit = await driver.findElement(By.id('submit'));
await submit.click();

また、selenium-webdriver は非同期処理を async/await で書くこともできますが、内部でコマンドキューを管理するため、エラーハンドリングやデバッグがやや複雑です。

🧪 テスト安定性：待機戦略の違い

不安定なE2Eテストの最大の原因は「タイミング」です。各ツールはこの問題に対し、異なるアプローチを取っています。

puppeteer は page.waitForSelector() や page.waitForFunction() を使って明示的に待機する必要があります。

// puppeteer: 手動待機
await page.click('#load-data');
await page.waitForSelector('#result'); // 要素が表示されるまで待つ

playwright は多くのアクション（click、fill など）に 自動待機機能 が組み込まれており、要素が操作可能になるまで内部で待機します。

// playwright: 自動待機
await page.click('#load-data');
await page.click('#result'); // 要素がクリック可能になるまで自動で待つ

selenium-webdriver は WebDriverWait のような明示的待機（Explicit Wait）を推奨しており、Implicit Wait（暗黙的待機）は非推奨です。

// selenium-webdriver: 明示的待機
const until = require('selenium-webdriver/until');

await driver.findElement(By.id('load-data')).click();
await driver.wait(until.elementLocated(By.id('result')), 5000);

💡 実務では、playwright の自動待機がテストの安定性を大幅に向上させ、メンテナンスコストを削減します。puppeteer や selenium-webdriver では待機ロジックの記述漏れがバグの温床になりやすいです。

📱 モバイル・ネットワークエミュレーション

モバイル端末や低速ネットワーク下での動作確認が必要な場合、ツール間でサポート状況が大きく異なります。

playwright はビルドインで デバイスエミュレーション と ネットワークスロットリング をサポートしています。

// playwright: デバイスエミュレーション
const { devices } = require('playwright');
const iPhone = devices['iPhone 13'];

const context = await browser.newContext({ ...iPhone });
const page = await context.newPage();

// playwright: ネットワーク制限
await context.setOffline(true);
await context.setGeolocation({ latitude: 35.6895, longitude: 139.6917 });

puppeteer もChromiumの機能を活用して同様のことが可能ですが、設定がやや低レベルです。

// puppeteer: ネットワーク制限
const client = await page.target().createCDPSession();
await client.send('Network.emulateNetworkConditions', {
  offline: false,
  latency: 100,
  downloadThroughput: 1.5 * 1024 * 1024 / 8,
  uploadThroughput: 1.5 * 1024 * 1024 / 8
});

selenium-webdriver は標準ではこれらの機能を提供せず、ブラウザ固有の拡張（例：Chrome DevTools Protocol経由）を使う必要があります。そのため、設定が複雑でポータビリティが低いです。

🛠️ デバッグと開発体験

playwright は PWDEBUG=1 環境変数でGUI付きデバッガーを起動でき、タイムトラベルデバッグやスクリーンショット比較も可能です。

PWDEBUG=1 npm test

puppeteer は headless: false オプションでブラウザを可視化できますが、高度なデバッグ機能は備えていません。

// puppeteer: 可視化
const browser = await puppeteer.launch({ headless: false });

selenium-webdriver も同様にヘッドフルモードで実行可能ですが、デバッグ支援機能は最小限です。

📦 インストールとセットアップの手間

puppeteer と playwright は npm install 時に必要なブラウザバイナリを自動でダウンロードします。追加設定不要で即座に使い始められます。

npm install playwright
# → Chromium, Firefox, WebKit が自動インストール

selenium-webdriver はブラウザドライバーを別途管理する必要があります。たとえばChromeを使うには chromedriver をインストールし、PATHを通すか、コード内でパスを指定する必要があります。

// selenium-webdriver: ドライバーの明示的指定
const service = new chrome.ServiceBuilder('/path/to/chromedriver').build();
chrome.setDefaultService(service);

これはCI環境でのセットアップを煩雑にし、チーム内での環境差異を生む原因になります。

🔄 非推奨状況と将来性

2024年現在、いずれのパッケージも 非推奨ではありません。puppeteer はGoogleが、playwright はMicrosoftが、selenium-webdriver はSeleniumプロジェクトがそれぞれ積極的にメンテナンスしています。

ただし、puppeteer は2023年にコミュニティ主導のプロジェクトとなり、Googleによる直接的な開発は終了しました。一方、playwright は活発な開発が続いており、新機能（例：Component Testing、Trace Viewer）が継続的に追加されています。

📊 まとめ：選択の指針

💡 最終的なアドバイス

• 新規プロジェクトでE2Eテストを始めるなら、まず playwright を試すべきです。安定性、機能、開発体験のすべてで現代的なニーズに応えています。
• Chromium系だけで十分で、軽量さを重視するなら puppeteer も有効。特にスクレイピングやPDF生成など、テスト以外の自動化タスクに向いています。
• selenium-webdriver は、既にSeleniumエコシステムに投資している組織や、複数言語でテストを統一したい場合に限って検討してください。純粋なNode.jsプロジェクトではオーバーヘッドが大きすぎます。

これらのツールは「どれが絶対に優れている」というより、「どんな課題を解決したいか」によって最適解が変わります。あなたのチームの技術スタック、テスト要件、保守コストを見極めて、賢く選んでください。