Playwright

Playwrightは、Microsoftが開発するオープンソースの自動化フレームワークです。Chromium、Firefox、WebKitを操作し、主要なブラウザエンジンでのテスト、スクリーンショット撮影、Web自動化に使います。

Playwrightでできること

Playwrightは、3つの主要なレンダリングエンジンを1つのAPIから自動化します。ChromiumはChromeとEdge、GeckoはFirefox、WebKitはSafariの基盤です。同じスクリプトを大きく変えずに各エンジンで実行できる点が特徴です。

主な機能は次のとおりです。

• 複数ブラウザの自動化： 1つのスクリプトをChromium、Firefox、WebKitで実行します。必要なブラウザバイナリはPlaywright CLIがインストール、管理します
• スクリーンショット撮影： ページをPNGまたはJPEGで保存し、表示中のビューポート、ページ全体、特定の要素を撮影できます。ビューポート寸法や端末エミュレーションも指定できます
• PDF生成： 描画したページをPDFへ書き出し、用紙サイズ、余白、倍率を調整できます
• ネットワークのインターセプト： テストやデータ取得のため、ネットワークリクエストを監視、模擬、変更します
• ブラウザコンテキスト： Cookie、ストレージ、状態を共有しない、シークレットウインドウのような分離セッションを作ります。ブラウザを再起動せず、異なる種類の利用者としてページを撮影できます
• 複数言語への対応： JavaScript／TypeScript、Python、Java、.NETの公式バインディングがあります

Playwrightの自動待機は、特に便利な仕組みです。毎回明示的な待機処理を書く代わりに、要素がDOMへ追加され、表示され、安定した状態になるまで待ってから操作します。テストの不安定さを減らし、スクリプトを簡潔にできます。

Playwrightによるスクリーンショット撮影

Playwrightのpage.screenshot()メソッドでは、出力を細かく制御できます。表示中のビューポート、スクロールできるページ全体、ロケーターで指定したDOM要素を撮影できます。

端末エミュレーションでは、ビューポート寸法、デバイススケール係数、ユーザーエージェントをまとめて指定できます。iPhone、Pixel、iPadなど、よく使われるスマートフォンやタブレットのプリセットが端末レジストリに用意され、ページの表示を再現できます。

遅延読み込みを使うページでは、自動待機と目的に合う待機条件を組み合わせ、画像や動的な内容を読み込んでから撮影します。必要に応じてページを明示的にスクロールし、Cookieバナーを隠す、チャットウィジェットを除く、撮影前にスタイルを変えるためのCSSを挿入できます。

WebKitに対応するため、Chromiumだけの撮影では見落とす描画差を確認できます。ただし、Playwrightのパッチ済みWebKitはSafariそのものではなく、メディアコーデックなどOS固有の要素にも差があります。Safariに最も近い比較が必要なら、macOS上でWebKitを実行します。

同じページを複数のブラウザ、ルート、認証状態で繰り返し撮影する場合、Playwrightは撮影条件を明示的な手順にできます。ブラウザを手作業で操作せず同じ条件を再現できるため、監視やQAでよく使われます。

PlaywrightとPuppeteerの違い

どちらもヘッドレスブラウザ自動化に使えますが、対象範囲と設計が異なります。

ブラウザ対応： Playwrightは1つのAPIでChromium、Firefox、WebKitを操作します。現在のPuppeteerはChrome for Testingと安定版Firefoxに対応しますが、WebKitには対応しません。WebKitでの確認が必要ならPlaywrightを選びます。

自動待機： Playwrightは、操作前に要素が準備できるまで待ちます。PuppeteerではwaitForSelectorやwaitForNetworkIdleなど、より多くの明示的な待機処理が必要になるため、コード量とタイミング問題が増える場合があります。

ブラウザコンテキスト： Playwrightのブラウザコンテキストなら、1つのブラウザインスタンス内へ分離した複数のセッションを作り、リソース使用量を抑えられます。Puppeteerにもブラウザコンテキストがありますが、APIの重点は異なります。

APIの成熟度： Puppeteerは2017年から提供され、コミュニティ資料が豊富です。Playwrightは2020年に公開され、複数エンジンと幅広い機能を備えながら継続的に更新されています。

スクリーンショットを中心に考えるなら、必要なブラウザで選びます。ChromeとFirefoxの撮影はどちらでも行えます。比較にWebKitも含める必要がある場合はPlaywrightを使います。

よくある失敗

• ブラウザバイナリをインストールしない： Playwrightパッケージを追加したあと、インストールコマンドでブラウザバイナリを取得する必要があります。この手順がなければ、スクリプトは「browser not found」エラーで失敗します
• 自動待機の限界を無視する： 自動待機で不安定さを減らせますが、標準のタイムアウトがあります。ページの読み込みが遅ければ、内容の準備前に操作がタイムアウトする場合があります。内容の多いページではタイムアウト値と待機条件を調整します
• 遅延コンテンツの読み込み前に撮影する： 自動待機があっても、Playwrightがページ全体を自動でスクロールするわけではありません。遅延読み込みを使うページのフルページ撮影では、先にスクロール処理を加えます
• 用途に合わないブラウザを使う： Chromiumだけなら短時間で済みますが、FirefoxとWebKitの描画差は分かりません。異なるブラウザで利用者が見る画面を合わせる必要がある場合は、複数ブラウザで撮影します
• ブラウザコンテキストを閉じない： 撮影後にコンテキストを閉じなければ、長時間動くスクリプトでメモリ使用量が増え続けます。終了時にコンテキストとブラウザインスタンスを必ず閉じてください