Playwright

Playwrightは、Microsoftが保守しているオープンソースのブラウザ自動化ライブラリです。1つのAPIでChromium、Firefox、WebKitを操作でき、JavaScriptとTypeScript、Python、Java、.NETの公式バインディングがあります。スクリプトはページを開き、クリックし、入力し、ネットワーク通信の完了を待ち、DOMを読み取ります。通常は、表示されるウィンドウのないヘッドレスブラウザで実行されます。

Playwrightには、独自のテストランナーであるPlaywright Testが含まれています。並列でのテスト実行、再試行、トレース、スクリーンショットの検証を追加します。多くのチームは、E2Eテストに使うほか、ビルドやデプロイのパイプラインの一部としてスクリーンショットを生成しています。

Playwrightでできること

• 同じスクリプトで、Chromium、Firefox、WebKitのページを開く。
• デバイスをエミュレートする。ビューポートのサイズ、デバイススケールファクター、タッチ、ロケール、タイムゾーン、カラースキームを設定できます。
• フォームへの入力、要素のクリック、セレクター、ネットワークリクエスト、ページの読み込み状態の待機。
• ネットワークリクエストの傍受またはモック化。
• テストの実行ごとに、トレース、動画、スクリーンショットを記録する。

スクリーンショットでのPlaywright

page.screenshot() は、現在のビューポートをPNGまたはJPEGで保存します。fullPage オプションはスクロール可能なページ全体を撮影し、clip は長方形の範囲を撮影し、locator.screenshot() は1つの要素を撮影します。ブラウザコンテキストの deviceScaleFactor によって、出力が1倍か2倍の解像度になるかが決まります。

Playwright Testの toHaveScreenshot() は、新しい画像を保存済みのベースラインと比較し、ピクセルの差が閾値を超えるとテストを失敗させます。ビジュアルリグレッションテストの一般的な基盤です。

PlaywrightとPuppeteerの比較

どちらのライブラリもコードからブラウザを自動化し、スクリーンショットとPDFを撮影できます。Playwrightは、Chromium、Firefox、WebKitに対応し、4つの言語エコシステムのバインディングがあります。Puppeteerは、Chromeに重点を置いたNode.jsのライブラリで、後からFirefoxのサポートが加わりました。Playwrightには完全なテストランナーが含まれます。Puppeteerは通常、Jestなどの別のランナーと組み合わせて使います。選択は、言語、ブラウザの対応範囲、チームが既に使っているものによって決まることが多いです。

よくある間違い

• Webフォント、画像、遅延読み込みのコンテンツの読み込みが終わる前に撮影する。
• クッキーバナーやチャットウィジェットを、フレームに残す。
• 別のOSで取得したベースラインと比較する。OSによってフォントの描画が異なります。
• 既定のビューポートが、一般的なデスクトップの幅ではなく小さいサイズであることを忘れる。

同じスクリーンショットを繰り返し撮りますか？

Temposhotの Website Capture は、スクリプトを書かずに、URLのリストを Desktop 1920×1080、Tablet 768×1024、Mobile 390×844 で撮影します。詳しくは Webサイトのスクリーンショット自動化 をご覧ください。

よくある質問

Playwrightは無料ですか？

はい。Playwrightは Apache 2.0 ライセンスのオープンソースです。

Playwrightでウェブページ全体を撮影できますか？

はい。page.screenshot() に fullPage: true を渡してください。遅延読み込みのあるページでは、すべての画像を読み込むために、先にスクロールが必要な場合があります。

Playwrightには表示されるブラウザが必要ですか？

いいえ。既定ではヘッドレスで実行されます。デバッグのために、表示されるウィンドウで実行することもできます。

出典

• Playwright documentation
• Playwright screenshots guide
• Playwright visual comparisons

関連リソース

• Website Captureのクイックスタート: コードなしでURLのリストを撮影します。
• Website Captureのオプション: デバイス、範囲、待機、形式の設定。
• 画像を比較: ブラウザで2枚のスクリーンショットの違いを確認します。