Playwrightの概要

Playwright（プレイライト） は、Microsoftが開発・メンテナンスを行っているオープンソースのE2E（エンドツーエンド）テスト自動化フレームワークです。

モダンなWebアプリケーションのテストを「高速」かつ「安定」して実行するために設計されており、現在フロントエンド開発者やQAエンジニア、SET（Software Engineer in Test）の間で事実上のスタンダードとなりつつあります。

Playwrightの3つの大きな特徴

従来のテスト自動化ツール（Seleniumなど）が抱えていた「テストの不安定さ（Flaky Test）」や「実行速度の遅さ」といった課題を、Playwrightはアーキテクチャのレベルで解決しています。

1. 完璧なクロスブラウザ対応とモバイルエミュレーション

Playwrightは、1つのAPIでモダンな主要ブラウザエンジンすべてを操作できます。また、各ブラウザはヘッドレス（画面を表示しないモード）で非常に高速に動作します。

Chromium (Google Chrome, Microsoft Edge)
WebKit (Apple Safari)
Firefox (Mozilla Firefox)

さらに、Google PixelやiPhoneなどのモバイル端末の画面サイズ、ユーザーエージェント、位置情報などをソフトウェア的にエミュレート（再現）してテストすることも容易です。

2. オートウェイティング（Auto-waiting）による圧倒的な安定性

自動テストで最もエラーの原因となるのが「画面の描画待ち」です。要素が表示される前にクリックしようとしてテストが失敗するケースです。

Playwrightは、要素に対してアクション（クリックや入力など）を実行する前に、以下のような一連のチェックを自動的に行います。

要素がDOM上に存在するか
要素が表示されているか（Visible）
アニメーションが完了して静止しているか
他の要素に隠れていないか

開発者が手動で sleep(3000) のような不安定な待機処理を書く必要がなくなり、堅牢で壊れにくいテストを実現します。

3. テスト構築・解析を助ける強力なツール群

テストコードを書く時間や、失敗した原因を調査するデバッグの時間を大幅に短縮するための公式ツールが組み込まれています。

Codegen（コードジェネレータ）: 開発者がブラウザ上で手動操作した内容を記録し、自動的にPlaywrightのテストコードを生成します。
Trace Viewer（トレースビューア）: テスト実行中のスクリーンショット、ネットワーク通信ログ、DOMのスナップショットをタイムラインで記録し、失敗時の原因究明をブラウザ上で視覚的に行えます。
UI Mode: テストの実行、デバッグ、コードの編集を視覚的なUI画面でシームレスに行うことができます。

基本的なテストコードの例

Playwrightのテストコードは、TypeScript（またはJavaScript）を用いて非常に直感的に記述することができます。以下は公式サイトにアクセスし、タイトルを検証するシンプルな例です。

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

test('基本的なページ遷移とタイトルの検証', async ({ page }) => {
  // 指定したURLへナビゲート
  await page.goto('[https://playwright.dev/](https://playwright.dev/)');

  // タイトルに "Playwright" が含まれていることを検証 (Auto-waitingが働きます)
  await expect(page).toHaveTitle(/Playwright/);

  // "Get started" というリンクをクリック
  await page.getByRole('link', { name: 'Get started' }).click();

  // クリック後のURLが正しいか検証
  await expect(page).toHaveURL(/.*intro/);
});