AIとPlaywrightで実現する業務アプリの画面崩れ自動チェック

背景: 業務アプリの自動監視が求められる理由

ACMEE 情シスでは、内製ツールが増える中で「ちゃんと動く・崩れてない」を安く自動監視する手段が求められていました。手動での確認はリソースがかかりすぎるため、効率的な方法を模索してきました。

そこで、URLを渡すとAIがブラウザを自動操作し、画面のスクショとDOMの要約を元に異常をチェックするシステムを開発しました。この仕組みを実現するために、数々のハマりどころを乗り越えてきた過程を紹介します。

Playwrightによるブラウザの自動操作

このシステムの中心にあるのが、Playwrightというブラウザ自動化ツールです。これを使うことで、AIがブラウザを操作し、各ステップごとにスクリーンショットを撮影しながら、画面の状態を確認します。これにより、手作業では捉えにくい微細な画面崩れも効率的に検出できます。

しかし、素朴に実装しただけでは誤検知が多発しました。例えば、通信がまだ完了していない状態でスクショを撮ると、画面の一部が表示されず「崩れている」と誤判定されることがありました。これを解決するために、通信が落ち着くのを待ち、さらに画面が静止したことを確認してからスクショを撮るようにしました。

誤検知を減らすための工夫

AIによる誤検知を減らすために行った工夫として、まず重要だったのがDOM交差検証です。AIが「この文字がおかしい」と指摘した場合、その文字列がDOM内に実際に存在するかを確認し、存在しない場合はAIの誤読として捨てる処理を追加しました。これにより、日本語の「ジ」と「シ」のような誤読を大幅に減らすことができました。

また、アクセシビリティ系のノイズ(alt属性の欠落など)は、特に依頼がない限りは除外するようにしました。これらは普通のサイトに大量に存在するため、無視することで本質的な問題の検出に集中できます。

ボット弾き対策と報告抑制

自動テストを行う際に問題となったのが、ボット弾き対策です。特に「クリックするとTOPに戻されるが直接URLでは開ける」といった現象は、サイトのバグではなくボット弾きの可能性が高いため、実ブラウザ相当のユーザーエージェント(UA)に変更し、自動操縦の痕跡を隠すことで対応しました。

さらにプロンプトには「報告しなくてよい例」を明示し、推測ベースや確信のない指摘を黙らせる仕組みを導入しました。これにより、報告の質が向上し、必要な情報に集中できるようになりました。

学び: AIの誤検知とその対策

初期段階では、AIが自信満々に間違った報告をすることが多々ありました。これを踏まえ、機械的な裏取りを行うことが重要であると学びました。AIの判断に頼りきるのではなく、実際のDOMや通信状況を確認することで、正確なレポートを提供できるようになりました。

このプロジェクトを通じて、AIと自動化ツールの強みを活かしつつも、機械的な確認を組み合わせることで、より精度の高いシステムを構築できることを実感しました。

まとめ: 自動化の未来と情シスの挑戦

今回の取り組みで得た知見をもとに、今後も業務アプリの品質向上に努めていきます。自動化は時間とコストの節約に貢献するだけでなく、新しい挑戦をするための基盤を提供してくれます。

ACMEE 情シスでは、これからも自社の強みを活かした内製システムの開発に取り組み、さらなる進化を目指していきます。私たちの挑戦に興味を持った方は、ぜひ一緒にこの未来を作り上げましょう。

あわせて読みたい