Nevermind

次世代のE2Eテストツール：Playwright入門ガイド

5 分

1. エンドツーエンドテストの課題

エンドツーエンド（E2E）テストは、アプリケーションの品質を守る最後の防衛線である。クリック、入力、移動といった実際のユーザー操作を再現し、アプリケーション全体の流れが円滑に動くかを検証する。しかしE2Eテストは、「壊れやすい」「不安定」としても知られている：

  • 非同期の問題：スクリプトの実行時にDOM要素の読み込みが終わっておらず、テストが失敗することがある。開発者は大量のwaitやsleepを手動で追加する必要があり、テストの信頼性が下がる。
  • クロスブラウザー互換性：主要ブラウザー（Chrome、Firefox、Safari）のすべてでテストを安定して動かすことは大きな課題である。
  • デバッグの難しさ：CI/CD環境でテストが失敗したとき、現場のスナップショットやネットワークログがないため、問題の再現と特定が非常に難しい。

こうした問題を解決するために次世代のテストツールが登場し、Playwrightはその代表格となっている。

2. Playwrightとは何か？

PlaywrightはMicrosoftが開発したNode.jsライブラリで、Chromium（Chrome、Edge）、Firefox、WebKit（Safari）を自動操作する。Google Puppeteerを最初に開発したチームの中心メンバーが作ったもので、Puppeteerの精神的な後継者と見なせるが、設計はより現代的で強力である。

3. Playwrightの主な強み

a. 真のクロスブラウザーテスト

これはPlaywrightの最も際立った長所である。統一された一つのAPIを使い、主要な三つのブラウザーエンジンすべてで動くテストを書ける。Safariのような特定のブラウザーでしか発生しないバグも簡単に発見し、修正できる。

b. 自動待機（Auto-Waits）

Playwrightは非同期の問題を根本から解決する。page.click()などの操作を実行する前に、次のような一連の操作可能性チェックを自動で行う：

  • 要素がDOMに現れるまで待つ。
  • 要素が表示されるまで待つ。
  • アニメーションが要素を覆わなくなるまで待つ。
  • 要素がイベントを受け取れるまで待つ。

そのため、手動の待機コードをほとんど書く必要がなくなり、テストの安定性が大幅に高まる。

c. 強力な付属ツール

  • Codegen（コードジェネレーター）：画期的な機能である。pnpm exec playwright codegen example.comを実行すると、Playwrightがブラウザーウィンドウを開く。そこで行ったすべての操作が自動的に記録され、テストコードへ変換される。E2Eテストを書くためのハードルを大きく下げてくれる。

  • Trace Viewer（トレースビューアー）：Playwrightの「タイムマシン」である。テストに失敗したとき、完全なテストトレースファイルを生成できる。Trace Viewerで開けば、次のことが可能だ：

    • テストの各ステップにおけるDOMスナップショットを確認する。
    • 完全なネットワークリクエストログを確認する。
    • consoleログとエラー情報を確認する。
    • タイムラインを前後に動かし、各操作の前後でページがどう変化したかを直感的に確認する。

これにより、CIで失敗したケースのデバッグがかつてないほど簡単になる。

4. 簡単なテスト例

PlaywrightのAPIは非常に直感的に設計されている。

import { test, expect } from '@playwright/test';

test('页面应有正确的标题', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // 断言页面的 title 包含 "Playwright"
  await expect(page).toHaveTitle(/Playwright/);
});

test('点击 "Get started" 链接应跳转到介绍页', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // 通过角色和名称定位并点击链接
  await page.getByRole('link', { name: 'Get started' }).click();

  // 断言 URL 包含 "intro"
  await expect(page).toHaveURL(/.*intro/);
});

結論

Playwrightは、優れたクロスブラウザー対応、信頼できる自動待機、比類のないデバッグツール（特にTrace Viewer）により、現代のWebアプリケーションにおけるE2Eテストの新たな基準を打ち立てた。テストの安定性と信頼性を高めるだけでなく、Codegenなどのツールによってテスト作成の体験も大きく改善する。プロジェクトに現代的で強力なテスト自動化手段を求めているなら、Playwrightは間違いなく有力な選択肢の一つだ。

Testing Playwright E2E Automation