こんにちは、エンジニアの川野邉です。
最近、Claude CodeとPlaywright MCPを使って、シナリオテストの自動化について検証してみました。
この記事は「Playwright MCPを使ってみた」という紹介ではありません。
社内で長年運用してきたシナリオテストの仕組みを振り返りながら、「AIを使えばもっとシンプルに運用できるのでは？」と思い立ち、検証・実験をしてみた話です。
今回はその前編として、検証に至った背景や環境構築、テストシナリオの準備までを紹介します。
記事は以下の2本構成を予定しています。
- 準備編：背景・環境構築・シナリオ作成
- 実験編：実行結果・評価・業務利用できるかの考察
世間は夏休みということもあり、本記事は私の夏休みの自由研究という位置付けでお届けします。☀️🏝️
これまでのシナリオテスト運用
弊社では以前から、社内ツールでシナリオテストを自動化しています。（以下、社内向けシナリオテストツールとします。）
社内向けシナリオテストツールについて...
シナリオテスト自動化の社内ツールです。Google スプレッドシートに記載したテストケース（申込フォームの入力手順など）を、Turnip + RSpec + Capybaraでブラウザ操作として実行し、結果をレポート化する仕組みになっています。
社内向けシナリオテストツールでは、
- テスト対象システムのURL
- 画面ごとの操作手順
をGoogle スプレッドシートに定義し、その内容を社内向けシナリオテストツールに読み込ませることで対象環境に対してシナリオテストを自動実行できます。
この仕組み自体は数年前から運用しており、現在も複数のプロダクトで利用されています。
一番の課題は「シナリオ作成」
便利な仕組みではあるものの、一番大変なのがシナリオの作成・メンテナンスです。例えば「メールアドレスを入力する」という操作だけでも、
- input[name="email"]
- .email-input
など、HTMLのセレクタ情報などを指定して、「どの要素に対して操作するのか」をシステムが識別できるよう定義する必要があります。シナリオとは別に、テスト対象のサイトが持つ入力項目のセレクタ情報をリスト化したものが必要でした。
つまり、新しいテストケースを1つ追加するだけでも、
- HTMLを確認する
- 対象のセレクタを調べる
- Google スプレッドシートへ記述する
という作業が発生します。
画面のレイアウト変更などでセレクタが変われば、Google スプレッドシート側も修正が必要になるため、運用コストは決して小さくありません。
（以下は、社内向けシナリオテストツール用に作成するGoogle スプレッドシートのサンプルです。）.
AIならもっと自然に書けるのでは？
そこで思ったのが、「AIを使えば、HTMLセレクタを書かなくてもテストできるのでは？」ということです。
最近のAIはページ構造を読み取りながらブラウザを操作できます。
人間なら、
- 「メールアドレス」に test@example.com を入力する
- 「パスワード」に password を入力する
- 「ログイン」をクリックする
と言われれば、HTMLの構造を知らなくても操作できます。
AIも同じように画面を認識できるのであれば、シナリオも人間向けに近い形で書けるのではないかと思いました。（Playwright MCPは、ページのHTML構造を読み取りながら行なっていますが。）
もしこれが実現できれば、これまでHTMLセレクタを細かく管理していたシナリオを、もっと自然言語に近い形へ置き換えられるかもしれません。
まずは最低限の準備で検証してみる
いきなり社内向けシナリオテストツールへAIを組み込むのは少し大掛かりです。まずは本当に実現できるのかを確かめるため、最低限の準備をして検証することにしました。
今回用意したものは以下の4つです。
- Claude Code Desktop
- Playwright MCP
- ローカルで動作する簡単なWebアプリ
- HTMLセレクタを一切記載していないテストシナリオ
Claude CodeからPlaywright MCP経由でローカル環境へアクセスし、自然言語に近いテストシナリオだけでブラウザを操作できるかを検証します。Claude Code DesktopやPlaywright MCPの設定方法については、すでに多くの記事が公開されているので、本記事では割愛します。
ローカルで動作する簡単なWebアプリ
まずは検証用として、Claude Codeで簡単なWebアプリを作成しました。
画面は、
- 会員情報入力
- 入力内容確認
- 登録完了
という3画面だけのシンプルな構成です。
HTMLセレクタを一切持たないテストシナリオ
続いて、テストシナリオを用意しました。
今回は検証なので、あえてかなりシンプルにしています。
URLと共に渡されたら人間が操作できるであろう最低限のレベルの内容で、入力してほしい値だけを記載していて、HTMLのセレクタ情報は一切記載していません。
従来の社内向けシナリオテストツールのGoogle スプレッドシートと比べると、かなり情報量が少ないことが分かると思います。
次回はいよいよ実行
ここまで準備できたので、次はいよいよ実験です。
このシナリオと対象URLをClaude Code Desktopへ渡し、シナリオテストは実行できるのでしょうか。また、HTMLのセレクタ情報を一切持たない状態で、どこまで人間のように画面を理解しながら操作できるのかも気になるところです。
次回の「実験編」では、実際にClaude Code Desktop + Playwright MCPへこのGoogle スプレッドシートを渡し、期待する値を入力し、最後まで実行できるのかどのようなレポートが得られるのか、実際の業務で使えそうか、という点を検証していきます。
弊社では現在、エンジニア採用のカジュアル面談を実施しています。 ご興味があれば、ぜひ以下の求人ページをご覧いただき、一度お話しできると嬉しいです！
