Puppeteerとは
PuppeteerはGoogleが開発している、Chromiumブラウザを制御するためのNode.jsライブラリです。WebスクレイピングやWebサービスのテスト自動化、スクリーンショットの撮影など、さまざまなブラウザ操作を自動化できます。
Puppeteerでできる事
Puppeteerを利用することで、WebスクレイピングやソフトウェアのE2Eテストを行うことができます。
GUIを持たない環境でもブラウザの自動操作を行うことができる特徴を活かすことで、CI/CD環境でE2Eテストを実行することも可能です。
Puppeteerを使ったブラウザテストの自動化手順
実際にPuppeteerを利用してブラウザのテストを自動化する手順をご紹介します。
今回はテストを行うために以下のような簡単なデモサイトを用意し、Puppeteerによってテストを自動化します。
まずはデモサイトの挙動を確認します。
登録フォームにIDと名前の入力欄があります。登録ボタンを押下するとユーザ情報画面へ遷移します。
登録フォームで入力されたIDと名前が、ユーザ情報画面にリスト表示される作りになっています。
Puppeteerを使って、デモサイトの登録処理が正常に動作しているかを確認するテストコードを書いていきます。
実行環境：
・Node.js (v20.14.0)
・Puppeteer (v22.10.0)
今回実行するテストコードです。
const assert = require("assert");
const puppeteer = require('puppeteer');
(async () => {
// 1.ブラウザをヘッドレスモードで起動
const browser = await puppeteer.launch({});
const page = await browser.newPage();
// 2.登録フォームへアクセス
await page.goto('http://node-puppeteer-tutorial.s3-website-ap-northeast-1.amazonaws.com');
// 3.IDと名前の入力
const inputId = '1';
const inputName = '山田 花子';
await page.type('#id', inputId);
await page.type('#name', inputName);
// 4.登録ボタンをクリックし、画面遷移を待機
await Promise.all([
page.click('button[type="submit"]'),
page.waitForNavigation({ waitUntil: 'load'})
]);
// 5.テーブルの一番下のIDと名前を取得してコンソールに出力
const lastRowId = await page.evaluate(() => {
const table = document.getElementById('userTable');
const lastRow = table.rows[table.rows.length - 1];
return lastRow.cells[0].textContent;
});
const lastRowName = await page.evaluate(() => {
const table = document.getElementById('userTable');
const lastRow = table.rows[table.rows.length - 1];
return lastRow.cells[1].textContent;
});
// 6.正しい値が取得されたかをアサート
assert.strictEqual(lastRowId, inputId);
assert.strictEqual(lastRowName, inputName);
console.log('テストコードの実行が完了しました。');
await browser.close();
})();
このテストコードについて、各番号順に解説します。
- ヘッドレスモードでブラウザを起動します。
- 登録フォームへアクセスします。
- IDと名前のInput要素にそれぞれ「1」と「山田 花子」を入力します。
- 登録ボタンを押下し、ユーザ情報画面のローディングが終了するまで待機します。
- 登録したユーザ情報を取得するため、テーブル最終行のIDと名前を取得します。
- 取得したIDと名前をアサートします。
テストコードを実行
先ほどのテストコードを実行してみます。
[node test.jsの実行結果]
テストコードが正常に完了した旨のメッセージが表示されました。
アサートする部分を書き換えて、失敗パターンも確認してみます。
先ほどのテストコードのアサート処理を以下のように書き換えます。
// 6.正しい値が取得されたかをアサート assert.strictEqual(lastRowId, inputId); assert.strictEqual(lastRowName,’テスト 太郎’); // ここを書き換えました
再度テストコードを実行してみます。
[node test.jsの実行結果]
アサートが失敗し、エラー終了となりました。
まとめ
Puppeteerを使用してテストを自動化する方法について解説しました。
Node.js環境があればPuppeteerによってE2Eテストを行うことができます。さらにCI/CD環境でテストコードを動作させることで、テストの自動化を行うことが可能になり、バグを未然に防ぎつつソフトウェアの品質を維持することができるようになります。
テストの自動化をお考えなら『クラウドBOT』をお試しください
クラウドBOTはブラウザ操作を自動化できるクラウド型のRPAサービスです。複雑な環境構築をが不要であり、会員登録すると無料でブラウザ操作を自動化するロボットを作成できます。ロボットは基本的にノーコードで構築できますが、複雑な処理を行いたい場合は、javascriptを直接記述し、実行させることもできます。
テストの自動化を検討されている方は是非一度お試し下さい。
