Skip to content
Published on

ブラウザ & モバイル E2E 自動化 2026 ディープダイブ:Playwright、Cypress、Selenium 4、WebDriverIO、Maestro、Detox、Appium 2 完全比較

🇰🇷KO🇺🇸EN🇯🇵JA
Split View필사 모드
Authors

2026 年の E2E 自動化ランドスケープ:BiDi がゲームのルールを書き換えた

2026 年のブラウザ自動化は二つの大きな変化を迎えた。第一に、W3C WebDriver BiDi が 2024 年後半からすべての主要ブラウザ(Chrome、Firefox、Edge、Safari)で GA に達し、15 年もの間続いた JSON Wire Protocol と WebDriver Classic を実質的に置き換えた。第二に、Microsoft Playwright が GitHub スター 65k を突破し、npm ダウンロード数で初めて Cypress を抜いた。一方で Cypress.io は Cloud + Component Testing を中心にビジネスモデルを再構築した。モバイルでは Maestro が Detox と Appium に挑戦状を叩きつけた。本記事は 12 のツールを実コードと共に比較する。

E2E テストが解くべき本当の問題

ユニットテストが関数を検証し、結合テストがサービス境界を検証するならば、E2E テストは「実際のユーザーが見る画面」を検証する。問題はコストだ。ブラウザの起動、ネットワーク往復、DOM レンダリング、アニメーションすべてが非決定性を生む。2010 年代の Selenium の flakiness は業界全体のトラウマだった。2020 年以降、Playwright の auto-waiting、Cypress の retry-ability、WebDriver BiDi の双方向イベントストリームが順に問題を解決してきた。

WebDriver BiDi:15 年ぶりの標準刷新

従来の WebDriver Classic は HTTP リクエスト/レスポンス型の単方向プロトコルだった。ブラウザイベント(console.log、network request)を受け取るにはポーリングが必要で、これが flaky テストの根源だった。WebDriver BiDi は WebSocket ベースの双方向プロトコルで、Chrome DevTools Protocol(CDP)の強力さと W3C 標準の互換性を組み合わせる。2026 年現在、Selenium 4.20+、Puppeteer 22+、Playwright 1.50+ がすべて BiDi をファーストクラスでサポートする。

// Selenium 4 + BiDi イベントリスナー
import { Builder, By, LogInspector, NetworkInspector } from 'selenium-webdriver'

const driver = await new Builder()
  .forBrowser('chrome')
  .setChromeOptions(new chrome.Options().enableBidi())
  .build()

// BiDi ログインスペクターで console メッセージをリアルタイム取得
const logInspector = await LogInspector(driver)
await logInspector.onConsoleEntry((entry) => {
  console.log(`[${entry.level}] ${entry.text}`)
})

// BiDi ネットワークインスペクターでリクエスト/レスポンスを傍受
const networkInspector = await NetworkInspector(driver)
await networkInspector.onBeforeRequestSent((req) => {
  if (req.request.url.includes('/api/orders')) {
    console.log('Order API called:', req.request.method)
  }
})

await driver.get('https://example.com/checkout')
await driver.findElement(By.id('pay-button')).click()
await driver.quit()

Playwright:Microsoft が作った次世代標準

Playwright は 2020 年に Microsoft からリリースされ、毎年ダウンロード数を倍増させ続けてきた結果、2026 年 Q1 に npm 週間ダウンロード 1,200 万を突破した。差別化ポイントは三つ。第一に、Chromium/Firefox/WebKit すべてを単一 API で制御できる(WebKit は Safari のエンジン)。第二に、auto-waiting がデフォルトで、waitFor の明示呼び出しがほぼ不要だ。第三に、@playwright/test には並列化、シャーディング、リトライ、スクリーンショット、動画、トレースが一つのパッケージに収まっている。

// tests/checkout.spec.ts — Playwright Test v1.50
import { test, expect } from '@playwright/test'

test.describe('Checkout flow', () => {
  test.beforeEach(async ({ page }) => {
    // 認証状態は storageState で再利用(auth.setup.ts で生成)
    await page.goto('/cart')
  })

  test('completes order under 5 seconds', async ({ page }) => {
    // Locator は lazy — 呼び出し時点で評価され、自動でリトライ
    await page.getByRole('button', { name: 'Checkout' }).click()
    await page.getByLabel('Card number').fill('4242424242424242')
    await page.getByLabel('Expiry').fill('12/29')

    // route ハンドラでネットワークをモック
    await page.route('**/api/payments', async (route) => {
      await route.fulfill({ json: { status: 'success', orderId: 9001 } })
    })

    await page.getByRole('button', { name: 'Pay' }).click()
    await expect(page.getByText(/Order #9001 confirmed/)).toBeVisible({ timeout: 5000 })
  })
})

Playwright auto-waiting の秘密

Playwright のすべての Locator アクション(click、fill、check)は内部で「actionability checks」を実行する。要素が attached、visible、stable(アニメーション終了)、receives events(他の要素に隠れていない)、enabled をすべて満たすまでデフォルトで 30 秒待機する。これは Cypress の retry-ability と似ているが、単純な <button> 要素から React Portal 内の動的モーダルまで同じように動くため、より強力だ。

Cypress:同一プロセスアーキテクチャの両刃

Cypress は 2014 年のリリース以来、「テストがブラウザの中で動く」という独特なアーキテクチャを維持してきた。これによりデバッグ体験は圧倒的だ — Chrome DevTools でそのままテストをデバッグでき、time-travel デバッガで各コマンドの DOM スナップショットを見られる。しかし同一オリジン制約、マルチタブ非対応、iframe の制限が付随する。2024 年の Cypress 13 でオリジン制約が緩和され、2026 年の Cypress 14 では WebDriver BiDi モードが実験的に導入された。

// cypress/e2e/checkout.cy.js — Cypress v14
describe('Checkout flow', () => {
  beforeEach(() => {
    // セッションキャッシュ — Cypress 12+ の cy.session()
    cy.session('user-alice', () => {
      cy.visit('/login')
      cy.get('[data-cy=email]').type('alice@example.com')
      cy.get('[data-cy=password]').type('s3cret')
      cy.get('[data-cy=submit]').click()
      cy.url().should('include', '/dashboard')
    })
  })

  it('completes payment with intercepted API', () => {
    cy.intercept('POST', '/api/payments', {
      statusCode: 200,
      body: { status: 'success', orderId: 9001 },
    }).as('payment')

    cy.visit('/cart')
    cy.get('[data-cy=checkout]').click()
    cy.get('[data-cy=card-number]').type('4242424242424242')
    cy.get('[data-cy=pay]').click()

    cy.wait('@payment').its('response.statusCode').should('eq', 200)
    cy.contains('Order #9001 confirmed').should('be.visible')
  })
})

Playwright vs Cypress:アーキテクチャが決める違い

最も多い質問は「Playwright と Cypress、どちらを選ぶか」だ。答えの核はアーキテクチャにある。Playwright は out-of-process — テストコードは Node.js で動き、ブラウザを CDP/BiDi で遠隔操作する。マルチブラウザ、マルチタブ、マルチオリジン、真の並列化が可能だ。Cypress は in-process — テストがブラウザ内で動くため DevTools に親和的だが、同一マシン内の並列化は難しい(Cypress Cloud のマシン単位シャーディングで回避)。トス(Toss)QA チームは 2024 年 SLASH で決済フロー E2E を Cypress から Playwright へ移行し、フルスイート実行時間が 23 分から 6 分に短縮されたと発表した。

並列化とシャーディング戦略

Playwright は workers オプションで同一マシン内に N ワーカーを立て、--shard=1/4 のような CLI で CI マシン間に分割する。Cypress はマシン内では 1 ワーカーだが、Cypress Cloud がスペックファイル単位で機械を自動分配する。WebDriverIO は maxInstances と maxInstancesPerCapability で細かく制御できる。カカオペイは決済 E2E 1,200 件を GitHub Actions matrix strategy.matrix.shard: [1,2,3,4,5,6,7,8] で 8 ランナーに分割し、平均 7 分以内で完了すると 2025 年 if(kakao)で共有した。

認証状態の共有:storageState パターン

E2E テストが毎回ログインフォームを埋めると 5 分のスイートが 50 分になる。Playwright は storageState で Cookie / localStorage を JSON として保存し、すべてのテストで再利用する。Cypress は cy.session() が同じ役割を果たす。Selenium では明示コードが必要だ。

// auth.setup.ts — Playwright のグローバル setup
import { test as setup } from '@playwright/test'

setup('authenticate as admin', async ({ page }) => {
  await page.goto('/login')
  await page.getByLabel('Email').fill('admin@example.com')
  await page.getByLabel('Password').fill(process.env.ADMIN_PW || '')
  await page.getByRole('button', { name: 'Sign in' }).click()
  await page.waitForURL('/dashboard')
  await page.context().storageState({ path: 'playwright/.auth/admin.json' })
})

// playwright.config.ts ですべてのテストが storageState を使う
export default {
  projects: [
    { name: 'setup', testMatch: /.*\.setup\.ts/ },
    {
      name: 'chromium',
      use: { storageState: 'playwright/.auth/admin.json' },
      dependencies: ['setup'],
    },
  ],
}

Selenium 4:標準の復活

2009 年に始まった Selenium はかつて「遅くて flaky なツール」の代名詞だった。Selenium 4(2021)と 4.20(2025)がすべてを変えた。第一に、W3C WebDriver と BiDi をファーストクラスでサポート。第二に、Selenium Manager がブラウザドライバを自動インストールし(chromedriver 手動ダウンロード時代の終焉)。第三に、Selenium Grid 4 の分散アーキテクチャと Kubernetes ネイティブのデプロイ。エンタープライズと Java エコシステムにおいては今でも Selenium が標準で、100 以上のモバイル/組込ブラウザを単一マトリックスで扱えるのは Selenium だけだ。

// Selenium 4 + Java — ブラウザマネージャ自動 + BiDi
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.bidi.log.LogInspector;

ChromeOptions options = new ChromeOptions();
options.setCapability("webSocketUrl", true); // BiDi 有効化
WebDriver driver = new ChromeDriver(options);

try (LogInspector logInspector = new LogInspector(driver)) {
  logInspector.onConsoleEntry(entry ->
    System.out.printf("[%s] %s%n", entry.getLevel(), entry.getText())
  );

  driver.get("https://example.com/checkout");
  driver.findElement(By.id("pay-button")).click();
} finally {
  driver.quit();
}

WebDriverIO:Node 陣営の Selenium クライアント

WebDriverIO は Node.js ベースの Selenium / WebDriver クライアントで、BiDi と Appium を両方サポートするため「Web + モバイル」を単一コードベースに統合できる。2026 年の v9 は Vitest スタイル API と React Native ヘルパーを追加した。Ionic、Cordova、Capacitor をベースとしたハイブリッドアプリ自動化では実質的な標準となっている。

// test/specs/checkout.e2e.js — WebDriverIO v9
describe('Checkout E2E', () => {
  it('processes payment', async () => {
    await browser.url('/cart')
    await $('[data-test=checkout]').click()
    await $('#card').setValue('4242424242424242')

    // ネットワークモック(BiDi ベース)
    await browser.mock('**/api/payments', { method: 'POST' }).respond({
      status: 'success',
      orderId: 9001,
    })

    await $('button=Pay').click()
    await expect($('=Order #9001 confirmed')).toBeDisplayed()
  })
})

Puppeteer & Chrome DevTools Protocol

Puppeteer は Google Chrome チームが作った Node ライブラリで、Chrome / Edge を CDP で制御する。実質的に Playwright の祖先だ — Playwright の創設者たちが Google で Puppeteer を作り、Microsoft に移って多ブラウザに拡張したものが Playwright だ。2026 年の Puppeteer 23 は BiDi モードを GA させ、Firefox サポートを安定化させた。ただしテストランナーがないため Jest / Vitest と組み合わせる必要があり、「スクレイピング + 自動化」の用途で使われることが多い。

TestCafe & Nightwatch.js

TestCafe(DevExpress)は WebDriver を使わずプロキシで動作する独特なツールで、モバイル端末の実 Safari / Firefox を駆動できる。Nightwatch.js は Selenium 上の軽量ラッパーで BDD / AC との相性が良い。両方とも市場シェアは小さいが、特定のニーズ(レガシー Safari 自動化、BDD 構文)で今も選ばれる。2026 年時点の npm ダウンロード数は Playwright の 1/50 程度だ。

Maestro:モバイル E2E の新標準

Maestro(Mobile.dev、2022 年公開)は YAML ベースのモバイル E2E ツールで、「1 行で終わるテスト」をモットーとする。iOS Simulator、Android Emulator、実機、React Native、Flutter、ネイティブアプリを単一ツールで扱える。核心は冪等性 — コマンドは安定するまで自動リトライし、テキスト / 画像ベースのマッチャで変更に強い。

# .maestro/login.yaml — Maestro v1.40
appId: com.example.shop
---
- launchApp
- tapOn: 'Sign in'
- tapOn:
    id: 'email_field'
- inputText: 'alice@example.com'
- tapOn:
    id: 'password_field'
- inputText: 'hunter2'
- tapOn: 'Continue'
- assertVisible: 'Welcome, Alice'
- takeScreenshot: 'after-login'
- runFlow: 'checkout.yaml'

LINE は 2024 年に自社モバイルスーパーアプリの主要フロー 80% を Maestro で自動化し、メルカリも 2025 年に iOS / Android の回帰テストを Detox から Maestro へ部分移行したと、公式エンジニアリングブログで公表している。

Detox:React Native 専用のグレーボックステスト

Detox は Wix が作った React Native 専用の E2E ツールで、「グレーボックス」アプローチ(アプリと同期信号をやり取り)が特徴だ。つまりアニメーション、fetch 呼び出し、setTimeout がすべて完了したという信号を受け取ってから次のコマンドを実行することで、RN 特有の flakiness を根本から減らす。2026 年の Detox 21 は New Architecture(Fabric / TurboModules)を GA でサポートする。

// e2e/checkout.test.js — Detox 21
describe('Checkout', () => {
  beforeAll(async () => {
    await device.launchApp({ newInstance: true })
  })

  beforeEach(async () => {
    await device.reloadReactNative()
  })

  it('completes payment', async () => {
    await element(by.id('cart-button')).tap()
    await element(by.id('checkout-button')).tap()
    await element(by.id('card-input')).typeText('4242424242424242')
    await element(by.text('Pay')).tap()
    await expect(element(by.text('Order #9001 confirmed'))).toBeVisible()
  })
})

Appium 2:モバイルの Selenium

Appium は 2012 年から「モバイルの Selenium」を目標としてきたが、2022 年公開の Appium 2 でドライバモデルが完全に再設計された。今では appium driver install xcuitest のようにドライバを npm モジュールのように管理する。iOS は XCUITest、Android は UiAutomator2 / Espresso、Windows は WinAppDriver、macOS は Mac2 ドライバが標準だ。2026 年時点、ポリグロットモバイル自動化において互換性の広さで Appium に並ぶものはない。

Appium vs Detox vs Maestro

三つのツールの違いは明確だ。Appium は WebDriver 標準の上にあり、最も広いデバイス / プラットフォームをカバーするがセットアップが重い。Detox は RN 専用で RN チームに圧倒的な DX を与えるが、RN 以外では使えない。Maestro は YAML で最も速く始められるが、複雑な分岐 / 計算が苦手だ。カカオバンクは 2025 年のカンファレンスで、バックオフィス自動化に Appium、バンキングアプリ回帰に Detox、マーケティングキャンペーン検証に Maestro を併用していると共有した。

ネットワークモック比較:route vs intercept vs mock

E2E テストの 80% はネットワーク応答の制御だ。Playwright の page.route() は WebSocket まで傍受でき、fulfill / abort / continue が可能。Cypress の cy.intercept() は XHR / fetch に強力だが WebSocket は別ライブラリが必要だ。WebDriverIO / Selenium の browser.mock() は BiDi ベースで統一されている。MSW(Mock Service Worker)は E2E とユニットテストでハンドラを共有できる点が強みだ。

ビジュアル回帰:Percy、Chromatic、Applitools

機能テストが通っても「ボタンが紫になった」という回帰は捕まえられない。ビジュアル回帰ツールがピクセル diff と AI ベースの変更分類でこの領域を埋める。Percy(BrowserStack)は GitHub PR との統合が自動で、Chromatic は Storybook との一級統合でコンポーネント単位ビジュアルテストの事実上の標準だ。Applitools Eyes は「Visual AI」で動的コンテンツを自動無視するアルゴリズムが強みだ。

// Playwright + Percy 統合
import { test } from '@playwright/test'
import percySnapshot from '@percy/playwright'

test('homepage visual', async ({ page }) => {
  await page.goto('/')
  await page.waitForLoadState('networkidle')
  await percySnapshot(page, 'Homepage @ 1280', { widths: [375, 768, 1280] })
})

楽天は 2024 年からすべての E コマースフロントエンドに Percy を導入し、平均で週 8 件の回帰をマージ前にキャッチしていると、公式エンジニアリングブログで共有している。

クラウドデバイスファーム:BrowserStack、Sauce Labs、LambdaTest

自社デバイスラボの運用は天文学的にコストがかかる。BrowserStack は 3,000 以上の実機を SaaS として提供し、Apple Vision Pro まで網羅する。Sauce Labs はエンタープライズセキュリティと分析に強みがあり、LambdaTest は価格競争力でインディー / スタートアップ層のシェアを伸ばしている。2026 年時点で BrowserStack は月額 $99 から、Sauce Labs は月額 $149 から、LambdaTest は月額 $39 から開始する。

AI コードジェネと自己治癒テスト

2026 年最もホットなカテゴリだ。Playwright Codegen はユーザーのブラウザ操作をリアルタイムでコードに変換し、Cypress Studio も同等機能を提供する。Reflect.ai と Mabl は「自己治癒(self-healing)」アルゴリズムでセレクタが壊れたときにテキスト / 視覚 / DOM コンテキストで自動マッチしてテストを生かす。Chromatic は AI Visual Diff でインテントのない変更(フォント読込差など)を自動無視する。サイボウズは 2024 年に Mabl を導入し、非開発者の QA が自動化を作成できるようになったと発表した。

CI 統合:GitHub Actions のパターン

# .github/workflows/e2e.yml — Playwright シャーディングパターン
name: E2E Tests
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        shard: [1, 2, 3, 4]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: pnpm
      - run: pnpm install --frozen-lockfile
      - run: pnpm exec playwright install --with-deps chromium
      - run: pnpm exec playwright test --shard=${{ matrix.shard }}/4
        env:
          BASE_URL: http://localhost:3000
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report-${{ matrix.shard }}
          path: playwright-report/
          retention-days: 14

並列化の鍵は冪等なテストデータだ。各ワーカーが自分のユーザー / 注文を作成し、グローバル setup で共有リソースを事前に準備する。カカオの決済チームはワーカーごとの prefix(worker-${process.env.TEST_WORKER_INDEX}-${uniqueId})をすべてのテストデータに付けて衝突を完全に排除した。

Vitest browser mode とコンポーネントテストの領域

E2E とユニットテストの間に「コンポーネントテスト」がある。Cypress Component Testing、Playwright Component Testing(experimental)、そして 2026 年に GA となった Vitest 1.x の browser mode がこの領域の強者だ。Vitest browser mode は実 Chromium / WebKit で Vitest テストを動かし、JSDOM の制限(レイアウト、ピクセル、CSS)なくコンポーネントを検証する。Storybook との統合がファーストクラスだ。

マイグレーション戦略:Cypress から Playwright へ

大規模マイグレーションはビッグバンよりも段階的にすべきだ。トス QA チームが共有したパターン:(1)新規テストは Playwright で書く、(2)既存 Cypress テストは保存する、(3)flaky トップ 20 を Playwright へ最初に移植、(4)cypress-to-playwright 変換器で 90% を自動変換し残りを手作業で仕上げる。第五に、同じ CI で両方を並行実行して統計を比較する。6 か月かけて 800 件のテストを移行し、flakiness 比率が 8% から 1.2% に下がった。

セキュリティ & シークレット管理

E2E テストは結局のところ本番に近いデータへアクセスする。シークレットをコードに埋め込むのは SOC2 / ISO27001 監査で即失格だ。パターンは:(1)GitHub Secrets / AWS Secrets Manager から動的にロード、(2)テスト専用 IDP(test-only tenant)、(3)PII は合成データで置き換え、(4)BrowserStack Local で社内網アクセス時に mTLS。カカオバンクはすべての E2E テストアカウントを毎実行ごとに IAM 動的発行で作り、30 分後に自動失効させている。

どのツールを選ぶべきか

要約すると:(1)新規 Web プロジェクト、マルチブラウザ、マルチタブ、高速 CI → Playwright。(2)既存 Cypress 資産が多く DevTools デバッグの親和性が重要 → Cypress 14+。(3)Java エンタープライズで 100+ ブラウザマトリックス → Selenium 4。(4)Web + モバイル統合自動化 → WebDriverIO。(5)React Native のみ → Detox。(6)iOS + Android + RN + Flutter で最速立ち上げ → Maestro。(7)ポリグロットモバイル → Appium 2。チームが慣れているものを使うのが基本だが、2026 年の新規プロジェクトには Playwright + Maestro の組み合わせが最もバランスが良い。

References

Discuss on Twitter • View on GitHub