Playwright で簡単な外形監視をやってみた

こんにちは！株式会社ユーザベース SaaS事業 Product Team の斉藤・度會・沖です。業務では主に Elixir / TypeScript / Go を用いて、経済情報サービス「スピーダ」の開発・運用を行っています。

はじめに

みなさんは外形監視はなにでやっていますか？

今回はPlaywrightを使ってWebサービスの簡易的な外形監視を作ってみたので、その紹介をしていきます！

外形監視を入れたかった動機

スピーダのアジア版の一機能で、各分野に紐付いた直近2件のM&A案件を見られるという機能があります。以下のスクリーンショットのように、タイトルが2件表示されるという仕様です。

そのM&A案件を2件取得するために、ElixirやGoなどでできた各マイクロサービスが連携しています。今回はこのM&Aのタイトルが二件表示されているかと、リンク先が有効になっているかをチェックするために、外形監視のツールを作成しました。

Playwrightの選定理由

普段はスピーダの機能に関しては基本的に、Gaugeのシナリオテストを定期的に実行する形で外形監視をしています。

今回は一時的な対応をする予定だったため、簡易的なツールを作成することにしました。

ブラウザを使ってインタラクティブにコードを生成できるのと、前から気になっていてチャレンジしてみたかったからという理由でPlaywrightを採用しました。

Playwrightで外形監視を実装してみた課題

当初はスクリーンショットも各分野ごとに撮る形にしていました。そこで生じた課題が、監視ツールの実行時間がかなり長くなってしまったことです。原因の一つはスクリーンショットを撮るためのレンダリング待つ処理があり、1分半ほどかかっていました。チェックを効率化するために、チームで高速化を実施しました。

改善したこと

遅い処理の特定

前述のとおりに、スクリーンショットのためにレンダリングを待つためのpage.waitForLoadState('networkidle')という処理で実行時間が長くなっていることが分かりました。公式ドキュメントでこの処理について調べてみると、以下のような記載がありました。

'networkidle' - DISCOURAGED wait until there are no network connections for at least 500 ms. Don't use this method for testing, rely on web assertions to assess readiness instead.

この記載によると、ネットワーク接続（APIからのデータ取得など）が完了してから少なくとも500ミリ秒の待機を発生させる処理とのことでした。コンソールでも確認するようにして、スクリーンショットを撮る処理自体を止めることにしました。

同期的な処理を非同期にする

今回の外形監視では、複数のページにリンクが表示されており、最初の実装では１ページずつ順番にチェックする実装になっていました。それを、Promise.allを使って非同期で動作するように改善しました。

// 改善前のコード

const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

for (const url of targetPageUrls) {
  await page.goto(url);
  // １ページ内のチェック処理
}

// 改善後のコード

const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

await Promise.all(
  targetPageUrls.map(async (url) => {
    const subPage = await page.context().newPage();
    await subPage.goto(page.url());

    // １ページ内のチェック処理
  }),
);