Playwrightとは
PlaywrightとはMicrosoftが提供しているツールで、Webアプリケーションのテストを自動化できます。Webページのスクリーンショット撮影などを行う事もできます。
主にWebサービス等を提供している事業者が継続的な品質管理やテストの自動化を効率化するために利用しています。
ブラウザをコマンドライン上で実行できるNodeのライブラリであり、使用する際はある程度javascriptコードの知識が必要になります。
Playwrightでできること
PlaywrightのツールはGoogle Chrome, Microsoft Edge, Firefoxなどの主要なブラウザをサポートしており、異なるブラウザでのテストをすることが容易になります。
Webページの特定の位置をスクリーンショットしたり、ブラウザの幅を変更してスクリーンショットすることが可能なため、スクリーンショット撮影を自動化することによって定期的に特定のWebサイトを監視し、変更や不具合を素早く検出することができます。
Playwrightを使用する際の注意点
PlaywrightはWebページ内の要素に対して操作する内容を指定する形でコードを記述していきます。Webページ内の要素の位置が変わった場合などは、コードのメンテナンスが必要になるケースがあります。
Webページの読み込み速度にばらつきがあるケースなどでは、待機やタイムアウトの設定を行う必要があります。利用する際に覚えておくと良いポイントです。
環境構築
環境
macOS:
Node: v20.7.0
Npm: v10.1.0
Npx: v10.1.0
1.ターミナルで以下のコマンドを実行し、NodeとNpmをインストール
brew install node
2.プロジェクトを用意
mkdir 任意名 cd 任意名
3.Nodeプロジェクトを初期化
npm init -y
4.PlaywrightをNodeプロジェクトにインストール
npm install playwright
5.Playwrightが使用するブラウザをインストール
npx playwright install
ディレクトリ構成
プロジェクト名 ├── node_modules │ ├── playwright └── package.json
・node_modules: package.jsonを元にしてパッケージがインストールされるディレクトリ
・package.json: Nodeプロジェクトの設定ファイル
スクリーンショット撮影を実装
簡易的に、Playwightを使用して、指定したWebサイトをスクリーンショットして撮影した写真を保存する機能を実装していきます。
実行するjsファイルを作成
touch sample.js
作成したsample.jsに以下のコードを追加
Paywrightは非同期のAPIなため、async/awaitを使用して操作を待機します。
// インストールしたPlaywrightをインポート
const { chromium } = require(‘playwright’);
(async () => {
// Playwrightのchromiumブラウザを起動
const browser = await chromium.launch();
// Webブラウザのページを作成
const page = await browser.newPage();
// 指定したWebサイトに移動
await page.goto(‘スクリーンショットするWebサイトのURL’);
// 移動したWebサイトをスクーリンショットして保存
await page.screenshot({ path: ‘sample.png’ });
// chromiumブラウザを閉じる
await browser.close();
});↓スクリーンショットしたいWebサイトのURLに変更してください。
await page.goto(‘スクリーンショットするWebサイトのURL’);
↓スクリーンショットする画像の名前に変更してください。
await page.screenshot({ path: ‘sample.png’ });このコードの処理内容は、指定したURLのWebサイトをスクリーンショットして作成したプロジェクト内に画像を保存します。
実行してみる
環境構築と実行するjsファイルを用意したら実行をしてみます
jsファイルを実行
node sample.js
実行結果
プロジェクト名 ├── node_modules │ ├── playwright ├── sample.js ├── sample.png └── package.json
結果はプロジェクト内にスクリーンショットした画像が保存されました。
まとめ
Playwrightは主にWebアプリのテストの自動化やデータの監視にかなり適したツールだと考えられます。今回用意したコードを元に定期的にスクリーンショットを自動化したり、スクリーンショットしたい位置までスクロールする機能の拡張が可能です。
一通り触ってみた感じだと小規模なWebアプリのテストの自動化などでは適しているかなと思いますが、大規模なWebアプリや複雑な操作のテストを自動化しようとすると、テストコードの複雑性が高まりテストのメンテナンスのしやすさなど変わっていくかなと思います。
広く活用できるクラウド型RPA『クラウドBOT』
クラウドBOTはブラウザ操作を自動化できるクラウド型のRPAサービスです。Webサービスの自動テストツールとしての利用も広がってきています。複雑な環境構築をが不要であり、会員登録すると無料でブラウザ操作を自動化するロボットを作成できます。ロボットは基本的にノーコードで構築できますが、複雑な処理を行いたい場合は、javascriptを直接記述し、実行させることもできます。
Webサービスのテスト自動化を検討されている方は是非一度お試し下さい。
