Playwright Web App Testing Agent SkillでWebサイトの品質監査を自動化する

UI監査を自動化して、自信を持ってリリースする

手動テストは遅く、ミスが起きやすい、進捗を鈍らせる作業です。変更をプッシュするたびに、本番サイトに見えないところで壊れたリンクやコンソールエラーが潜んでいないか心配していました。品質の最低ラインを維持するだけで、毎週何時間も手作業でクリックし続ける必要がありました。

この作業を Eigent に任せるために、webapp-testing スキルを使い始めました。Playwright の自動化と Eigent のエージェントワークフローを組み合わせることで、視覚的スナップショットやログ確認を含むサイト全体の監査を、1つのプロンプトで実行できるようになりました。

ここでは、Eigent.ai のWebサイトをテストするためにワークフローをどのように構成したかを紹介します。

1テストスクリプトを準備する

まず、Python スクリプトでテストロジックを定義します。Playwright の async API を使うことで、ナビゲーション中のコンソールメッセージやネットワーク障害を追跡できます。このスクリプトは操作の頭脳として機能し、特定のナビゲーションリンクから全ページのスクリーンショットまで、何を確認すべきかを Eigent に正確に指示します。

2エラーリスナーを設定する

このワークフローで特に価値が高いのは、表面化しない失敗を検出できることです。ブラウザのコンソールエラーとネットワークリクエストの失敗を監視するようにスクリプトを設定しました。これにより、手動確認では見落としやすい設定ミスである、見つけた PostHog トークンの欠落のような技術的な問題を Eigent が記録できます。

3サイトを自律的にナビゲートする

ナビゲーションは Eigent が主導します。ホームページから開始し、Environments や Enterprise のような主要なナビゲーションリンクを識別します。これらのセクションをクリックしながらネットワークがアイドル状態になるまで待つことで、すべてのページ遷移がスムーズで、コンテンツが期待どおりに読み込まれることを保証します。

4視覚的スナップショットを取得する

スクリーンショットは、ページ間で UI の一貫性を確認する最良の方法です。テスト中、Eigent はホームページと内部セクションのフルページスナップショットを自動で取得します。私は次のような複数のビューを保存しました。

• ホームページ: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/homepage.png
• Environmentsページ: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/environments_page.png
• Enterpriseページ: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/enterprise_page.png

5自動レポートを生成する

ナビゲーションが完了すると、Eigent はすべてを Markdown レポートにまとめます。これには、検出結果の要約、コンソールエラーの一覧、取得したすべてのスクリーンショットへの絶対パスが含まれます。これらのデータが1か所にまとまることで、レビューが即座に行えます。

6検出結果を分析する

出力を確認して、重大なブロッカーがないかを特定します。今回の実行では、監査により PostHog の初期化エラーが検出され、task_splitting.mp4 の中断された動画アセットがフラグされました。これらは単なるバグではなく、顧客が目にする前にユーザー体験を改善する機会です。

労力を増やさずに品質を拡張する

これは単にいくつかのコンソールエラーを見つけるだけの話ではありません。このワークフローは、Playwright のような技術ツールを Eigent がどのように自律的な品質パートナーへ変えるかを示しています。小さな UI 変更ごとに複雑なテストスイートを作成・保守する代わりに、URL を Eigent に指定するだけで、完全なレポートを受け取れます。

QA の「退屈な」部分を自動化することで、開発者は機能開発に集中しながら、既存サイトの堅牢性も確保できます。

次に試すこと

これらはいずれも同じ webapp-testing スキルを活用しており、追加設定は不要です。

より良い結果を得るためのヒント

• networkidle の待機状態を使う。 これにより、Eigent がスクリーンショットを撮ったりエラーを確認したりする前に、非同期アセットやトラッキングスクリプトの読み込みが完了していることを保証できます。
• 中断されたリクエストを除外する。 多くのブラウザは、急速なナビゲーションや遅延読み込みの際にリクエストを中断します。これらを除外することで、実際の 404 やサーバーエラーに集中できます。
• 役割を具体的に指定する。 Eigent にボタンをクリックするよう指示する場合は、link や button のような role ベースのセレクターを使うことで、CSS の変更に対してテストをより堅牢にできます。