kikitori Tech Blog

株式会社kikitoriは、農業流通現場のDXを実現するSaaS『nimaru』と青果店『KAJITSU』を運営する会社です。

ChatGPT AtlasでE2Eテストを書こうとして、うまくいかなかった話

ChatGPT Atlas がリリースされた時

自然言語でブラウザ操作できるなら、E2Eテストがかなり楽になるのでは?」

そう思っていました。

Playwright のような E2E テストフレームワークはまだプロダクトに入れておらず、

Atlas でE2Eテストは実現できるのか?

というところから検証を始めました。

最初に試した方法は単純に、「ログインしてダッシュボードが表示されることを確認して」のようなざっくりとした指示を Atlas に出す方法です。
「うまくはいかないだろう」とは思っていましたが、やはり期待した通りには動きませんでした。
※ 動いたことには感動しました。

そこで次に試したのが、playwright codegen のログを ChatGPT に渡して自然言語の手順に書き起こしてもらい、 そのまま Atlas に流す、という方法です。

「ChatGPT が整形してくれたので、手順としては十分だろう」 正直そんな期待をしていました。

が、結論としてこれはあまりうまくいきませんでした。

この記事では、

  • なぜ ChatGPT に整形してもらった自然言語手順でも Atlas は安定しなかったのか
  • 逆にどのレベルまで書けば、Atlas がそれなりに動くようになったのか

といった点をまとめます。


背景:E2Eテストの“面倒な部分”を機械化したかった

Playwright でテストコードをゼロから書こうとしたのですが、以下のポイントでつまづきました。

  • セレクタやロールの管理が大変
  • ページ遷移や非同期周りの待ちを考慮しなければならない
  • UIが変わるとテストも壊れやすい
  • 「何を検証したいのか」と「どう実装するか」を両方考える必要がある

そこで、Atlas のように自然言語で操作できる仕組みが使えれば、

実装の負担をかなり減らせるのでは?

という期待をしていました。

ただ、テスト仕様書をいきなり書くのも大変なので、

codegen のログ → 生成したプロンプト”

を最短ルートとして使えないか? というところから始めました。


アプローチ:codegen → ChatGPTでプロンプト化 → Atlasに渡す

手順は次の通りです。

  1. npx playwright codegen https://example.com/ を実行
  2. ログイン~画面遷移のシナリオを手動で操作
  3. 生成された Playwright コードを ChatGPT に渡す
  4. 「playwright codegenで生成されたコードをAtlas Agent用プロンプトに変換してください。」と依頼
  5. ChatGPT が生成したプロンプトを Atlas にそのまま渡す

ざっくりですが ChatGPT が生成した手順は以下のような感じでした。

Step 01: ログイン画面表示
baseUrl にアクセスする。
ログインフォームの2項目
ID 入力欄 に id を入力
パスワード入力欄に password を入力

ボタン(role=button, name=ログイン)をクリック。

画面に 「認証しています」 などの進捗表示が出た場合は、それが消える/遷移が完了するまで待機。

Screenshot: Step_01_Login.png

検証: ログイン後のトップ/ダッシュボードが表示されること。

動作や検証ポイントなどがそれなりに明示されていて、一見すると問題なく見え、正直期待をしてました。

実際には、この手順を Atlas に渡しても安定して動作しませんでした。


前提条件が曖昧で、テストの開始地点がずれる

ChatGPT が作成した手順はあくまで「操作の順番」を文章化しただけのため、

  • 既にログインしている状態
  • セッション情報を反映した画面の状態
  • すでに1度動かしてデータが登録されている状態

といったケースを考慮していません。

加えて、どの要素を具体的に操作対象とすべきか、何をもってテストの成功とみなすのかといった情報も、この手順の中には含まれていませんでした。

前提が書かれていないと、Atlas が正しい判断ができず、指示を意訳して操作しようとします。 いつまでも試行を続けてしまうこともあります。


codegen → ChatGPT での整形では“仕様書レベルの情報”が足りなかった

ここまで試して分かったのは、

ChatGPT が codegen のコードを綺麗に文章化しても
Atlas が必要とするレベルには情報が足りていない

ということです。


では、どう書けば安定したのか

結局、以下のような構造までプロンプトを整えると Atlas の動きが大きく改善しました。

(抽象例)

あなたは **E2Eテスト自動化エージェント** です。  
以下の要件に従って、指定URLにアクセスし、ブラウザ操作によるE2Eテストを実施してください。  

## 注意点
- 指示していない情報で操作しないでください
- 失敗したら操作を停止してください
- 全ての画面においてスクリーンショットを取得し、最後に提示してください。  

## 接続情報
- **URL:** https://example.com/ 
- ログイン情報
    - ID: xxxxx
    - パスワード: xxxxx

## テストシナリオ
- [ ] https://example.com/  にアクセス
  - [ ] もしログイン状態であれば、ログアウトしてください。
- [ ] ログインテスト
  - [ ] 無効な認証情報でエラーメッセージが表示されることを確認
  - [ ] IDとパスワードを入力してログインできることを確認
  - [ ] ログイン後、ユーザー名が表示されることを確認

ポイントは、

  • 操作対象の特定方法を明確にする
  • もし~の場合の動作を書く
  • 曖昧な表現を排除する
  • 「操作」と「確認」を分離する

といった、仕様書とほぼ同じ粒度で書くことでした。


ChatGPT Atlas での E2E テストを検証してわかったこと

一言でいうと、

AI は「よしなに」はやってくれない。

ということでした。

プロダクトを初めて触る人でも迷わず操作できるくらいの粒度で
テスト仕様書を書いてあげると、その通りに忠実に動いてくれる。

逆にいうと、そのレベルまで仕様を書き下ろさないと安定しない、ということでもあります。


まとめ

今回の検証で分かったことをまとめると、

  • playwright codegen のコードを ChatGPT に整形してもらうだけでは テスト仕様としては情報不足だった
  • 情報が不足していると Atlas は迷子になりやすい
  • 自然言語で書けるから楽になる」というよりは、 仕様書を書く力がそのまま求められる

総じて、 ChatGPT Atlas で楽にはならないものの、E2Eテストの新しい形を模索する価値は十分にある というのが現時点での手応えです。

We're hiring!

私たちは、すべての人の生活に不可欠な「食」の基盤となる「農業」を、テクノロジーの力で支える、縁の下の力持ちとも言えるプロダクトを作っています。 私自身、難しいこと、これまで誰も取り組んだことがなかったこと、他の業界では見られない現場のリアルなど、こういった文面や資料では伝えきれない多くのチャレンジのあるドメインだと感じています。 ぜひ一度、ゆっくりお話ししましょう!

ご興味をお持ちいただけた方はこちらまで↓↓↓

herp.careers