あえて言うまでもなく、自動テストを作成することは、デベロッパーの人生で最も楽しいものではありません。開発者は、機能を作成し、バグを修正し、世界をより良くしたいと考えています。しかし、ワークフローに自動テストを導入していなければ、長期的には、非常に「バグ」が生じてしまう可能性があります。そのため、自動テストを作成することも重要だと考えています。
Chrome DevTools の [Recorder] パネルでは、ユーザーフローを記録して再生したり、さまざまなサードパーティ製拡張機能やライブラリを使用してさまざまな形式(テスト スクリプトなど)にエクスポートしたりできます。また、Puppeteer Replay ライブラリを使用してユーザーフローをカスタマイズしたり、既存のワークフローに統合したりすることができます。
このブログ投稿では、以下のトピックを取り上げます。
- ユーザーフローをプログラムでエクスポートして再生する方法。
- Puppeteer Replay を利用してユーザーフローをカスタマイズする方法
- CI/CD ワークフローと統合する方法。
このブログ投稿は、レコーダーの基本を理解していることを前提としています。レコーダーを初めて使用する場合は、簡単な入門チュートリアルと動画ガイドをご覧ください。
ユーザーフローをエクスポートしてプログラムでリプレイする
デフォルトでは、レコーダーではこれらの録音を Puppeteer または Puppeteer Replay スクリプトとして、あるいは書式なし JSON ファイルとしてエクスポートできます。
ユーザーフローを JSON ファイルとしてエクスポートしたら、[レコーダー] パネルにもう一度インポートして再生したり、外部ライブラリを使用して再生したりすることもできます。利用可能なライブラリの一つが Puppeteer Replay ライブラリです。
Puppeteer Replay でもう一度プレイ
リポジトリの手順に沿って、Puppeteer Replay をインストールします。
JSON ユーザーフローを recordings
フォルダ(例: デモ プロジェクト)に保存し、次のコマンドを使用して 1 つ以上のユーザーフローを実行できます。
# replay one user flow
npx @puppeteer/replay ./recordings/order-a-coffee.json
# replay all user flows under recordings folder
npx @puppeteer/replay ./recordings/*.json
必要に応じて、録音を実行するための npm スクリプトを追加します。次の行を package.json
の scripts
フィールドに追加します。
"replay-all": "replay recordings"
これにより、コマンドラインで npm run replay-all
を実行して、すべての録音を再生できます。
ユーザーフローは、デフォルトでは UI なしでリプレイされます(ヘッドレス モードとも呼ばれます)。UI を表示するには、コマンドを実行する前に PUPPETEER_HEADLESS
環境変数を false に設定します。
PUPPETEER_HEADLESS=false npm run replay-all
サードパーティ ライブラリで再生する
Chrome ブラウザ以外で再生できます。ライブラリの一覧は、こちらをご覧ください。
たとえば、TestCafe はエンドツーエンドのテスト フレームワークです。Safari などでの JSON ユーザーフローの再生をサポートしています。
npm install -g testcafe
# replay with selected browsers
testcafe safari ./recordings/order-one-coffee.json
testcafe firefox ./recordings/order-one-coffee.json
testcafe chrome ./recordings/order-one-coffee.json
# replay with all browsers
testcafe all ./recordings/order-one-coffee.json
一方、Saucelabs は、クラウドベースのテスト プラットフォームです。クラウド上のさまざまなブラウザやバージョンで JSON ユーザーフローを再現できます。
以下に、Saucelabs の構成ファイルの例を示します。デモ リポジトリを確認する。
apiVersion: v1alpha
kind: puppeteer-replay
suites:
- name: "order a coffee"
recordings: [ "recordings/order-a-coffee.json" ]
…
さまざまな拡張機能を使用してユーザーフローをエクスポートする
デフォルトの設定に加えて、拡張機能をインストールして、ユーザーフローをさまざまな形式にエクスポートすることもできます。
たとえば、ユーザーフローを WebPageTest カスタム スクリプトとして記録してエクスポートできます。このスクリプトを使用すると、アプリケーションを介したマルチステップ ユーザーフローのパフォーマンスをテストできます。しかし、そのようなスクリプトの作成は困難な場合があります。
また、すでにテストツールを導入している場合は、Cypress、Nightwatch、WebdriverIO、テスト ライブラリなど、さまざまなテスト スクリプトにユーザーフローをエクスポートする拡張機能もあります。詳しくは、こちらの一覧をご覧ください。これにより、個人やチームはテストの作成をより迅速に開始できます。
プログラムで別のテスト スクリプトに変換する
これらのテスト プロバイダの多くは、拡張機能のほか、複数の JSON ユーザーフローをプログラムで変換できるライブラリも公開しています。
たとえば、ユーザーフローを Cypress テストにエクスポートするには、@cypress/chrome-recorder ライブラリを使用します。
npm install -g @cypress/chrome-recorder
npx @cypress/chrome-recorder ./recordings/*.json
拡張機能によるユーザーフローの再生
Chrome 112 以降では、拡張機能を使用して録画を再生することにより、エクスペリエンスがさらに向上します。これらの拡張機能により、サードパーティのサービスとインフラストラクチャをシームレスに統合し、DevTools を離れることなく録画を再生できるようになります。
はじめに、利用可能な広告表示オプションのリストまたは独自のカスタムの広告表示オプションを作成する方法をご覧ください。
独自の拡張機能やライブラリを作成する
バックグラウンドでは、すべての拡張機能とライブラリが Puppeteer Replay ライブラリ上に構築されています。Puppeteer Replay では、ユーザーフローをリプレイできるだけでなく、ユーザーフローのリプレイをカスタマイズまたは変換できる API も用意されています。
ユーザーフローのリプレイをカスタマイズする
スクリーンショット プラグインを作成しましょう。ユーザーフローごとに、以下が必要です。
- 各ステップの最後にスクリーンショットを撮って、
_screenshots
フォルダに保存します。 - ユーザーフローの実行が完了したらメッセージを出力します。
コード スニペットは以下のとおりです。こちらのデモをダウンロードして、試してみることもできます。
/* screenshot-plugin.mjs */
import { mkdirSync } from "fs";
import { PuppeteerRunnerExtension } from "@puppeteer/replay";
// create folder if not exist
let screenshotFolder = "_screenshots";
mkdirSync(screenshotFolder, { recursive: true });
export default class ScreenshotPlugin extends PuppeteerRunnerExtension {
count = 0;
async afterEachStep(step, flow) {
await super.afterEachStep(step, flow);
this.count = this.count + 1;
const path = `${screenshotFolder}/${flow.title}-${this.count}.png`;
await this.page.screenshot({ path });
console.log(`Saved screenshot as ${path}`);
}
async afterAllSteps(step, flow) {
await super.afterAllSteps(step, flow);
console.log("Operation completed successfully.");
}
}
コード自体も表現力に優れています。PuppeteerRunnerExtension
API を拡張して、各ステップの後にスクリーンショットを保存し、すべてのステップの後にメッセージをログに記録します。
ファイルを保存したら、次のコマンドを使用して、この拡張機能でユーザーフローを実行できます。
# replay one user flow with plugin
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/order-a-coffee.json
# replay all user flows with plugin under recordings folder
npx @puppeteer/replay --extension ./screenshot-plugin.mjs ./recordings/*.json
出力は次のとおりです。
Saved screenshot as _screenshots/order-a-coffee-1.png
Saved screenshot as _screenshots/order-a-coffee-2.png
Saved screenshot as _screenshots/order-a-coffee-3.png
…
Operation completed successfully.
ユーザーフローの変革
ユーザーフローをカスタマイズする別の方法として、さまざまな形式(Cypress、Nightwatch テスト スクリプトなど)に変換することもできます。
たとえば、ユーザーフローに URL に移動するステップが含まれているとします。JSON ファイルは次のようになります。
{
"title": "order-a-coffee",
"steps": [
{
"type": "navigate",
"url": "https://coffee-cart.netlify.app/"
},
…
]
}
Stringify プラグインを作成して、ステップを JavaScript に変換できます。他の既存のライブラリを表示して、その方法を確認することもできます。
たとえば、次のコード スニペットは、WebdriverIO がナビゲーション ステップを変換する仕組みを示しています。
export class StringifyPlugin extends PuppeteerStringifyExtension {
#appendStepType(out: LineWriter, step: Step, flow: UserFlow) {
switch (step.type) {
case 'navigate':
return out.appendLine(`await browser.url(${formatAsJSLiteral(step.url)})`)
…
}
ユーザーフローでプラグインを実行すると、ナビゲーション行が await browser.url(‘https://coffee-cart.netlify.app/’)
に変換されます。
DevTools のリプレイ エクスペリエンスをカスタマイズする
リプレイ拡張機能により、サードパーティのサービスとインフラストラクチャを使用して、DevTools のレコーダーを離れることなく録音を再生できます。
独自のリプレイ拡張機能を作成するには、リプレイ拡張機能のドキュメントと、拡張機能の例をご覧ください。
Chrome 拡張機能を公開する
ユーザーフローをカスタマイズして変換したら、Chrome 拡張機能としてパッケージ化して Chrome ウェブストアに公開できます。
ローカルでデバッグして Chrome 拡張機能を公開する方法について、デモと手順をご確認ください。
CI/CD パイプラインと統合する
これを行う方法は複数あり、多くのツールが存在します。GitHub Actions を使用してこのプロセスを自動化する例を次に示します。
# .github/node.js.yml
name: Replay recordings
on:
push:
branches: [ "main" ]
schedule:
- cron: '30 12 * * *' # daily 12:30pm
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Use Node.js
uses: actions/setup-node@v3
with:
node-version: 18.x
cache: 'npm'
- run: npm install puppeteer
- run: npm run replay-all
- run: npm run start
この例では、次の場合にユーザーフローを再生します。
- 新しい変更が
main
ブランチに push されます - 毎日午後 12:30
GitHub Actions とは別に、お気に入りのクラウド プロバイダとも統合できます。こちらのデモでは、Google Cloud Run Job を使用して最大 10,000 のユーザーフローを並行して実行する方法をご覧ください。
まとめ
このブログ投稿では、ユーザーフローを JSON ファイルとしてエクスポートする、PuppeteerReplayExtension
でリプレイをカスタマイズする、PuppeteerStringifyExtension
でユーザーフローを変換する、CI ワークフローに統合するさまざまなオプションについて説明しました。
このブログ投稿が、レコーダー パネルの使用方法や、テスト ワークフローをプロジェクトに簡単に統合するためのツールについてアイデアを得るきっかけになれば幸いです。皆様が構築されるサービスを楽しみにしております。
プレビュー チャネルをダウンロードする
デフォルトの開発ブラウザとして、Chrome Canary、Dev、Beta の使用を検討してください。これらのプレビュー チャネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが事前にサイトに関する問題を発見したりすることができます。
Chrome DevTools チームへのお問い合わせ
投稿内の新機能や変更点、または DevTools に関するその他の事項について議論するには、以下のオプションを使用します。
- crbug.com からご提案やフィードバックをお寄せください。
- DevTools の [その他のオプション] > [ヘルプ] > [DevTools の問題を報告する] を使用して、DevTools の問題を報告する。
- @ChromeDevTools でツイートします。
- DevTools の新機能の YouTube 動画または DevTools のヒントの YouTube 動画で、コメントを記入してください。