Playwright は Microsoft が開発したオープンソースの Web UI / E2E （エンドツーエンド） テストの自動化フレームワーク。要するにブラウザ（Chromium / Firefox / WebKit）の操作を自動化し、E2E テストのほか、スクリーンショット撮影や応答時間の計測などが行える便利ツールです。Web 関係の開発をやっていると使用することが多いツールなので使ったことある人も多いと思います。
今回、この Playwright をスタンドアローンで動作する形にまとめ、計測シナリオさえ決められたフォーマットで書けば、あとはバッチファイルをダブルクリックで実行、質問に答えるだけでフロントエンドの応答時間計測が全自動で可能なツール （Windows 専用） を作ったので公開します。
なんで作ったのか
Playwright 自体は Node.js 環境を構築できて、JavaScript が書ける人なら使用するのは簡単なんですが、お仕事、特にクライアントワークでやってると以下のようなシチュエーションにブチ当たるケースがあります。
- クライアントのネットワークからしかアクセスできない Web システムがテスト対象
- （特に本番環境など） テスト対象の Web システムにアクセスできる端末が決まってる
- 上記 2 つに加えて使用可能な PC に管理権限がなく、Node.js 環境などを気軽に構築できない （当たり前だけど外部から持ち込んだ PC を気軽に社内ネットワークに接続したりもできない）
以前からたまにこういう条件にぶち当たっていましたが、そこまで頻度も高くないし、都度その時々で対応可能な方法を探してなんとかしてきました。
ところが直近で、ある Web システムのフロントエンド性能指標を算出しなければいけないとなったときに久しぶりにこれに当たりまして。もう面倒くせぇということで思い立ってお客さんに 「クリックして行くだけで動作する Playwright ツール一式」を渡してしまって、計測してもらう仕組みを作っちまおう。となった次第。まぁこれも AI エージェントのコーディング能力が向上し、要件定義さえきちんとしてやれば短時間でこのレベルのツールなら簡単に実装できるようになったというのが大きい。
早速、細かい要件や基本設計をばーっと作って、Claude Code さんと実装開始。Node.js や Playwright 自体の知識がほぼゼロでも簡単にフロントエンドの応答時間計測ができるツールにまとめることができました。
簡単な使い方
詳しいことは README.md を見てもらえればいいんですけども、基本的には以下の手順で使うことができます。一番難しいのはシナリオを書くところだけですが、これも Playwright のメソッドを直接書くのに比べればかなり楽なようにしてあります。あとは Node.js のポータブル版を自分で持ってきて保存するくらいの手間ですかね。
- リポジトリから playwright-portable の
.zipをダウンロード （Code ボタンから Download ZIP を選択） → 任意の場所に展開 （以降、このフォルダ内のみで完結します） - ポータブル版 Node.js を公式サイトから取得して指定の場所 （
node/フォルダ内） に配置 0_setup.batをダブルクリックして実行 → 自動的に Playwright と Chromium を所定のフォルダ （app/node_modules/およびpw-browsers/） にダウンロードapp/config.jsのbaseURLだけ、計測対象の URL に書き換えapp/scenarios.jsを編集して計測シナリオを設定1_check.batをダブルクリックして実行 → Node の実行可否、Chromium の起動、書き込み権限、シナリオ定義の妥当性まで自動で確認 （問題があれば指摘します）- （アクセスにログインが必要なサイトの場合のみ）
2_login.batをダブルクリックして実行 → ブラウザが立ち上がるので手動でログイン 3_run.batをダブルクリックして実行 → 質問に答えて計測を実行 （output/フォルダ内に計測データを出力）- 計測がすべて終わったら、
4_report.batをダブルクリックして実行 →output/フォルダ内に計測データから集計 CSV と TXT を生成 - 全部終わったら
9_cleanup.batをダブルクリックして実行 → 確認画面で 「y」 すると2_login.batを実行した場合に保存される認証情報や一時ファイルなどを全部削除 （集計データは消えないのでご安心を） output/フォルダを保存して、もし外部の PC などで実行した場合は、playwright-portable の展開フォルダを完全に削除すれば、計測に使用した PC には一切影響を与えず計測が完了
シナリオについても、Playwright のメソッドを直接書くかわりに独自フォーマット （JavaScript オブジェクトリテラル） で応答時間計測に使いそうなステップを簡単に指定可能にしてあります。
例えば、シナリオとして以下を想定したとします。
/searchに移動して- 「名前」ラベルの入力フォームに「テスト」と入力し
- 「検索ボタン」を押して
- 「検索中のローディング表示 （
div.loadingが検索処理中のみオーバーレイ表示されるような想定）」が消えたら完了と見なす
その場合は、以下のようにシナリオを書けば計測可能。
{
id: 1,
label: 'name_search',
setup: [
{ goto: '/search' },
{ wait: 'css=main' },
],
measure: [
{ fill: 'label=名前', value: 'テスト' },
{ click: 'role=button:検索' },
{ wait: 'css=.loading' },
{ waitGone: 'css=.loading' },
],
},
実際に計測する Web システムやサイトの DOM によりますので、そこは実際のサイト上で開発者ツールなどから確認しつつシナリオを書く必要はあります。
このツールを実際に使用したケースではシナリオは私が事前に書いて渡しました。実務で他の人 （特に Node.js や Playwright に詳しくない人） に計測をお願いする場合、Node.js の配置、0_setup.bat の実行、app/config.js と app/scenarios.js の編集まではわかる人がやっておいて、全体を .zip などにして計測担当者に渡す、みたいな運用がよいと思います。
ちなみに、シナリオを書いて手元で計測動作の確認などをした場合 （特にログインを伴うサイトの動作確認後）、計測担当者にツール一式を共有する前に 9_cleanup.bat を実行して不要なファイルは削除しておきましょう。また、テスト計測の結果も共有不要な場合は output/ フォルダ内も空 （_README.txt ファイルは残して） にしておくことをお忘れなく。
ということで、Windows でしか動かないし、そもそもこんなシチュエーションにぶち当たる人がどれだけいるのかはわかりませんけども、まぁ自前で Node.js / Playwright の動作環境を構築できますって人でも、フロントエンドの性能指標算出をもっと簡単にやりたいっていうニーズには合致する気がしますので、気になる方は使ってみていただければ。
