ブラウザの品質を保つためには、信頼性の高いテストが不可欠です。テストの信頼性や効率性を向上させたい人向けに、playwrightを使用したブラウザのテストを自動化する方法についてご紹介します。
playwrightとは
playwrightは、ブラウザのシステムに対して信頼性の高いテストをすることができるツールです。多くのブラウザ(Chromium, WebKit, FireFox)やプラットフォーム(Windows, Linux, MacOS)に対応しており、環境毎のテストが可能です。playwrightを使用すると、安定したテストを実現することが可能です。例えばテストするブラウザがページ遷移や読み込みしている間は、テストが適切なタイミングで実行されるように待機させることが容易に可能であるため、信頼性と正確性の高いテストができます。
環境構築
プラットフォーム:MacOS
Node:v20.7.0
Npm:v10.1.0
Npx:v10.1.0
Playright: 1.44.1
YAML: 2.4.5
1.NodeとNpmをインストール
brew install node
2.プロジェクトを用意
mkdir 任意名
3.作成したプロジェクトに移動してNodeプロジェクトを初期化
npm init -y
4.playwightをNodeプロジェクトにインストール
npm install playwright
5.Playwrightが使用するブラウザをインストール
npx install playwight
6.yamlをNodeプロジェクトにインストール
npm install yaml
7.テストを実行するjsファイルを用意
touch sample.js
8.テスト結果を記録するtxtファイルを用意
touch result.txt
ディレクトリ構成
プロジェクト名 ├── node_modules │ ├── playwright │ ├── yaml ├── sample.js ├── result.txt └── package.json
node_modules:Nodeプロジェクトで使用するパッケージがインストールされるディレクトリ
sample.js:ブラウザのテストをするファイル
result.txt:テスト結果を記録するファイル
package.js:Nodeプロジェクトの設定ファイル
テストの実装
商品一覧のブラウザの動作テストを、playwrightでテストを自動化します。テスト内容は、特定の情報を取得し、取得したデータが条件に一致しているかのテストをします。
作業内容
- 商品一覧ページに移動。
- 特定の商品を検索
- 表示された商品のデータを取得
- 取得したデータが指定した条件に一致しているかテスト
- 取得したデータを実行結果に格納
- 実行結果をテキストファイルに書き込み
const { chromium } = require('playwright'); const fs = require('fs'); const YAML = require('yaml'); // テスト結果 const result = { status: '未実行', startTime: new Date(), getData: {}, message: '', }; (async () => { // テスト実行 let browser; try { // ブラウザ起動 browser = await chromium.launch(); // ページを作成 const page = await browser.newPage(); // 指定したURLに移動 await page.goto('テストするブラウザのURL'); // 指定したクラスの要素の中にある<a>要素を取得してクリック await page.locator('.market a').first().click(); // 検索したいワードを入力して、検索ボタンをクリック await page.locator('.search-word').fill('服'); await page.locator('.search').first.click(); // 指定したクラスに一致する要素を全て取得 const products = await page.locator('.product').elementHandles(); // テスト結果に取得した商品のデータを挿入する要素を用意 result.getData.products = []; for (const product of products) { // 各商品の名前と価格の要素を取得 const productNameElement = await product.$('p.name'); const productPriceElement = await product.$('p.price'); // 取得した要素の文字列の取得 const name = await productNameElement.innerText(); const price = await productPriceElement.innerText(); if (5000 < Number(price)) { // 取得したデータをテスト結果に格納 result.getData.products.push({ name: name, price: price }); } else { throw { message: `取得した要素の値が条件と不一致 (name: ${name}, price: ${price})` }; } } result.status = '成功'; } catch (e) { // エラー時の結果をテスト結果に格納 result.status = '失敗'; result.message = e.message; } finally { // 起動したブラウザを閉じる if (browser) { await browser.close(); } } // テスト結果を保存 try { // 実行結果を格納するファイルを取得 const text = fs.readFileSync("test.txt", { encoding: 'utf8' }); // 結果データをオブジェクトから文字列に変更 const addText = YAML.stringify(result) + '-----------------------------'; // 結果データを書き込み fs.writeFileSync('test.txt', text.length ? text + '\n' + addText : addText); } catch (e) { console.error(e); } })();
実行してみる
環境構築と実行するファイルを用意したので、テストをしてみます。
テストファイルを実行
node sample.js
実行結果はresult.txtに保存されているので確認してみましょう
status:テスト結果
startTime:テスト実行開始時間
getData:取得したデータを管理
message:メッセージ
![playwright実行結果](https://www.c-bot.pro/media/007/202407/mode3_w825-program-execution-result.png)
※2回テストを実行しており、’------------’でテスト結果を区切っています。
1回目のテストでは正常にテストされ取得したデータに問題ないことを確認できます。
2回目のテストでは正常にテストはされたが、取得したデータに問題がありテスト失敗していることを確認できます。
まとめ
今回、環境構築からテストの実装を試してみました。ページ遷移やボタンクリック、値入力とデータを取得するテストの自動化する方法について学べたかなと思います。
playwrightでは、要素が表示か非表示になっているかの確認やブラウザをスクリーンショットすることが可能で幅広くブラウザのテストを自動化することが可能なツールとなっています。
テストの自動化をお考えなら『クラウドBOT』をお試しください
クラウドBOTはブラウザ操作を自動化できるクラウド型のRPAサービスです。複雑な環境構築をが不要であり、会員登録すると無料でブラウザ操作を自動化するロボットを作成できます。ロボットは基本的にノーコードで構築できますが、複雑な処理を行いたい場合は、javascriptを直接記述し、実行させることもできます。
テストの自動化を検討されている方は是非一度お試し下さい。