Playwrightとは
Playwrightは、Microsoftが開発したWeb UI自動化テストフレームワークです。Playwrightは、クロスブラウザ対応や高いパフォーマンスが特徴です。Chromium、Firefox、WebKitの3つの主要なブラウザエンジンをサポートしており、これにより多様なブラウザ環境でのテストが可能です。
PlaywrightとSeleniumの比較
Webテスト自動化においてSeleniumが、最も広く使用されているツールです。
Seleniumと比較することで、Playwrightの利点や特徴を理解いただければと思います。
| 特徴 | Playwright | Selenium |
|---|---|---|
| サポートブラウザ | Chrome, Firefox, Safari, Edge | Chrome, Firefox, Safari, Edge,Internet Explorer etc. |
| パフォーマンス | 高速 | 中速 |
| 環境構築 | 簡単 | やや複雑 |
| ドキュメント・コミュニティ | 多い | 少ない |
| サポート言語 | JavaScript, TypeScript, Python, C#, Java | Java, Python, C#, Ruby, JavaScript, etc. |
※パフォーマンス：SeleniumはWebDriverプロトコルを介してブラウザと通信するため通信オーバーヘッドで実行速度が遅くなることがある。Playwrightはブラウザと直接通信する独自APIを使用しているため高速なテスト実行が可能。
※環境構築：Seleniumはブラウザドライバのを手動でダウンロード・設定が必要。Playwright自体でブラウザのダウンロードや管理を行うため環境構築が容易。
※ドキュメント・コミュニティ：Seleniumは長い歴史・広範なコミュニティがあり、サードパーティツールなどが豊富。Playwrightは比較的新しいツールのためアップデートなどで拡大中。
今回試した環境
- 言語：Java(17.0.8)
- フレームワーク：Spring Boot(3.3.7)
- ビルドツール：Maven(3.9.3)
- Playwright(1.17.0)
※Playwright の公式では、Playwrightの機能を最大限に活用することができるという理由から、JavaScript と TypeScript を推奨されています。
今回は私がJava開発に慣れていることから、Javaで作成します。
環境構築手順
Playwrightの環境構築は非常に簡単です。以下に、Spring BootとJavaを使用した環境構築の手順を示します。
- Spring Initializrを使用して新しいSpring Bootプロジェクトを作成します。
- 必要な依存関係を追加します。
pom.xmlに以下の依存関係を追加します。
※Spring Initializrは、Spring Bootプロジェクトの初期設定を簡単に行うためのツールです。プロジェクトの基本設定や依存関係の追加をGUIで簡単に行うことができます。
Spring Initializrの公式サイトはこちら
<dependency>
<groupId>com.microsoft.playwright</groupId>
<artifactId>playwright</artifactId>
<version>1.17.0</version>
</dependency>
- プロジェクトをビルドします。
mvn clean install
これだけで、Playwrightを使用する準備が整います。Seleniumの場合、WebDriverのダウンロードや設定が必要になるため、Playwrightの方が簡単に始められます。
実装例
以下に、JavaでPlaywrightを使用して簡単なテストを実装する例を示します。
import java.nio.file.Paths;
import com.microsoft.playwright.*;
public class PlaywrightExample {
public static void main(String[] args) {
try (Playwright playwright = Playwright.create()) {
BrowserType chromium = playwright.chromium();
Browser browser = chromium.launch();
Page page = browser.newPage();
// URLを開く
page.navigate("https://example.com");
// スクリーンショットを撮る
page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("screenshot.png")))
browser.close();
}
}
}
このコードは、Chromiumブラウザを起動し、指定したURLにナビゲートしてスクリーンショットを保存するシンプルな例です。PlaywrightのAPIは直感的で使いやすく、短いコードで実装することができます。
いくつか他の代表的なメソッドを紹介します。
1. click
指定したセレクタの要素をクリックします。
page.click("text=Example Domain");
2. fill
指定したセレクタの入力フィールドにテキストを入力します。
page.fill("input[name='q']", "Playwright");
3. page.locator(selector)
Playwrightのlocatorメソッドは、要素の検索と操作を簡単にするためのメソッドです。SeleniumのfindElementやfindElementsに相当します。
Locator button = page.locator("button#submit");
button.click();
4. page.waitForLoadState(state)
ページのロードが完了するのを待つためのメソッドです。
page.waitForLoadState(LoadState.LOAD);
Playwrightのおすすめ機能
Playwrihtの魅力をお伝えするために、いくつかおすすめ機能を紹介します。
1. コード自動生成
ブラウザ操作を自動的にコードに変換する「Codegen」機能があります。これにより、手動でコードを書く手間を省き、迅速にテストスクリプトを生成することができます。
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen https://www.it.mufg.jp"
上記コマンドを実行すると、指定したURLでブラウザが起動します
立ち上がったブラウザで右上キャリア採用をクリックする。
Playwright Inspectorにコードが生成される。
2. UIテスト
UIテストを簡単に実行できる機能も提供しています。以下のコマンドでUIテストを実行できます。
npx playwright test --ui
このコマンドを実行すると、Playwrightの全てのテストファイルのリストが表示されます。
サイドバーの三角のアイコンを押下することでテストの実行でき、GUI上の操作・デバッグが容易になります。
※現時点ではJavaScript・TypeScrptのPlaywrightのみ使用可能です。Javaではサポートされていません。JavaScript・TypeScriptを使用する場合はNode.jsのインストールなど別途環境構築が必要です。
まとめ
私は今回初めてPlaywrightを触れましたが、短時間で自動化ツールを作成することができました。
作成したものとしてはWebアプリの自動打鍵しキャプチャを保存するという簡易的な自動化ツールで、今後は画像比較などを組み込みアップデートしていく予定です。
今回はJavaを使用しましたが、Playwrightは他の言語(TypeScript・JavaScript等)にも対応しており、便利な機能を提供しております。
自動化ツールとして非常に優れた選択肢だと感じたので、是非皆さんも試してみてください。
注意点
なお、掲載したソースコードはサンプルになります。本ソースコードを使用することで発生するいかなる損害や不利益について、当社は一切の責任を負いませんので自己の責任においてご利用ください。
Discussion