Playwright超基本
はじめに
Playwright を学びたいな～と思い、アウトプットとして記事にしました。
インストール方法やセットアップ方法は公式ドキュメントに詳しく記載されているので、そちらを見ていただくとして、本記事では Playwright の概要や特徴について記載します。
🎭Playwright とは
Playwright は、Microsoft が開発したオープンソースのE2E テスト自動化フレームワーク です。
特徴
Playwright は以下の特徴を有します。
- Chromium、WebKit、Firefox といった幅広いブラウザに対応
- Windows、Mac、Linux といった主要な OS に対応し、ヘッドレスモードもサポート
- 自動待機（auto-wait）機能と 自動再試行（auto-retry） により、安定的なテストを実現
- テストごとに新しいブラウザコンテキストを作成し、並行して実行されるため、他のテストの影響を受けない
- JavaScript、TypeScript、Python、.NET、Java といった複数言語をサポート
- CI/CD パイプラインとの統合が容易
- コード生成、UI モード、テストの結果を確認できる GUI ツールといった周辺ツールも豊富に提供されている
以下でいくつかの特徴について詳しく説明します。
幅広いプラットフォーム・ブラウザに対応し、セットアップも簡単
Playwright は
- Windows
- Mac
- Linux
といった主要な OS に対応しています。
また、
- Chromium
- WebKit
- Firefox
といった具合に幅広いブラウザにも対応しています。
Playwright で上記のブラウザでテストするには各ブラウザのバイナリが必要です。
Playwright では以下のコマンド一発で複数のブラウザバイナリをダウンロードすることができます。
npx playwright install
どういったブラウザがサポートされているかは
playwright install --help
で確認できます。
自動待機（auto-wait）と自動再試行（auto-retry）によるテストの安定化
Playwright はアクションを実行する前に、アクションが可能かチェックを行い、アクションが期待どおりに実行されるまで待機する 自動待機（auto-wait） を有します。
また、例えば、以下のようなテストコードがあるとします。
import { expect } from "@playwright/test";
await expect(page.getByTestId("status")).toHaveText("Submitted");
この場合、Playwright のアサーションはstatus要素がSubmitedテキストを持つ条件を満たすか、タイムアウトに達するまで、繰り返しチェックを行います。
これが、 自動再試行（auto-retry） です。
『自動待機』と『自動再試行』により、テストを安定的に実行できるのも Playwright の特徴の一つです。
テストの独立性
Playwright が実行する全てのテストは、同時実行されている他のテストと独立した独自の BrowserContext で実行されます。
BrowserContext は、複数の独立したブラウザセッションを操作するための機能です。
これにより、Cookie やキャッシュ、ローカルストレージなどをそれぞれの BrowserContext 毎で管理することができ、他のテストへ影響を与えることなく、テストを並列実行することが可能になります。
周辺ツールの豊富さ
Playwright にはデバッグやテストの実行を支援するための周辺ツールが豊富に提供されています。
| ツール名 | 説明 |
|---|---|
テストジェネレータ（playwright codegen） |
ブラウザを操作し、その操作をコードに変換するツール |
UI モード（playwright test --ui） |
テストの実行、デバッグ、テスト過程の可視化といったテストを支援する GUI ツール |
テストレポート（playwright show-report） |
テスト結果をレポートとして出力するツール |
他のブラウザ自動化フレームワークとの比較
vs Selenium
自動待機機能の使いやすさ
Playwright では自動待機機能がデフォルトで組み込まれており、特別な設定を必要としません。
一方、Selenium でも自動待機機能はありますが、ドライバの設定を明示的に行う必要があります。
セットアップと使いやすさ
Playwright では、コマンド一発で複数のブラウザバイナリをダウンロードできます。
一方で、Selenium では、使用したいブラウザバイナリを個別にダウンロードする必要があります。
対応ブラウザの範囲
Selenium は幅広いブラウザに対応しており、Internet Explorer などのレガシーブラウザにも対応しています。
Playwright も主要なブラウザに対応していますが、レガシーブラウザのサポートは限定的です。
参考記事
Discussion