DevinにE2Eテストさせてみる - PLEX Product Team Blog

はじめに
- E2E テストのつらさ
- 今回の目論見
我々のDevin 開発環境について簡単に
- Devin マシンもメンバーの開発環境とほぼ同じ
実践、Devinくんに E2E テストはできるのか
- 結論
- 検証方法
  - テストシナリオ
  - テスト開始
課題点
- 運用コストは組織の価値観次第かも
Tips
最後に
- 弊社の各事業部でエンジニアを求めています！

はじめに

こんにちは。PLEXでPLEX JOBの開発を行っている小松です。

E2E テストのつらさ

E2E テストってみなさまどのように行っているでしょうか。なんだかんだ人力に落ち着いた、というチームも少なくはないのかなとも思います。
E2E テストにおいて人力の優れている点は何と言っても UI への適応力です。既存のテストツールは UI の入力フォームに必須項目が一つ増えればたちまちテストシナリオが壊れてしまいますが、人は「ん？こんな入力項目あったけな？こんな感じでいい？」といい感じに入力してくれます。人ってすごい…。

今回の目論見

今回は弊社でも検証導入中の Devinくんにブラウザを操作してもらい、WEB アプリの E2E テスト（UI テスト）を行います。
今回の E2E テストの目的というか目論見は

E2E テストの工数を減らしたい（人間はサボる！）
E2E テストツールのメンテナンス工数を減らしたい

あたりになります。
また Devin というキーワードでいうと、割と初学者向けの話になるかなと思います。

Devin で何ができるか情報収集中の方
導入したけど ACU が余っている

みたいな方ですと、何かの参考になるやもしれません…！

我々のDevin 開発環境について簡単に

Devin マシンもメンバーの開発環境とほぼ同じ

今回 Devinくんには弊社の PLEX JOB というサービスの E2E テストを行ってもらいます。

簡単に Devinくんの開発環境の構成は以下のような形です。

repos/
├── plexjob_api/   # Ruby on Rails の API
└── plexjob_web/   # Next.js のフロントエンド

API は Docker compose で立ち上げ、フロントエンドは Devin マシンの node.js に直接立てています。これは我々エンジニアの開発環境の構成と全く同じで、docker-compose.yml も社内のエンジニアたちが利用しているものをそのまま利用しています。
また、テスト結果を確認できるようにpostgresql-clientをインストールしています。

今回のテストはここで立ち上げたローカルホストに Devin の持っているブラウザからアクセスしてもらい、実際にブラウザを操作してもらって行います。

実践、Devinくんに E2E テストはできるのか

結論

ジュニア以上(？！)にはやってくれる。
課題はありつつも(後述)、個人的には期待以上の働きを見せてもらいました。いや、むしろ、君、ジュニアってレベルじゃないんじゃない？

検証方法

テストシナリオ

今回テストシナリオは人にとっての読み易さと Git での管理のし易さからマークダウン形式で記述しました。
元々社内でリグレッション用に持っていたテストシナリオはスプレットシートだったのですが、それを ChatGPT くんにざっとマークダウンに直してもらい、最後は私の方で調整しました。

できたものの抜粋が以下。
何度か検証してみて、Devinくんは手前に置いた内容に重きを置いてくれそうだった為、最終提出物として欲しいエビデンスに関しては冒頭で述べる事にしています。ただし、今回のテストケースではエビデンスの指示はしたものの報告フォーマットの指示までは行っていません。

## 前提

http://localhost:3000/
へアクセスしてWEB画面を検証

## 会員登録＋応募フロー（ドライバー）

### No.1 会員登録＋応募（ドライバー）

#### 前提条件

- ログイン済の場合はログアウトしておく

#### エビデンス

テスト結果として以下を提出すること

- 今回の処理で登録されたusersレコードの内容
- 【期待結果】とされている画面のキャプチャ

#### 操作手順

1. **ドライバーの求人情報一覧(driver/)から任意の求人を選択する**
    -  選択「詳しくみる」ボタンをクリック
    - **期待結果:** 求人詳細画面へ遷移する

以下略

会員登録＋応募を行い、「電話番号登録済みのエラーの確認」と「応募完了の確認」と2つの結果を確認してもらいます。
今回はこちらをソースコードと同じリポジトリに同梱してテストを行います。

テスト開始

まず Devin くんには以下のような指示をしてみました。(今回 Slack のメンションをトリガーにテストを開始しています)

①plexjob_apiのブランチをfeature/data-maintenance-for-devinを変更して作業を始めて
②setup-pj-webの手順でplexjob_webのローカルホストを上げて
③docs/test_case/basics/01-01_job_entry.md
このファイルを確認してテストを実行してみてほしい。
③-1. まず一度テストケースを確認したら実行計画を教えて。（報告だけで承認は不要）
③-2. テストを実行して。

という指示を出します。
①でまず検証用のブランチに切り替えてもらいます。（Seedデータのメンテナンス、テストシナリオの配置を行いました）
②のsetup-pj-webはDevinのKnowledge機能に設定しているマクロです。ローカルマシンの立ち上げ方が記載されています。なくてもDevinくんはよしなにやってくれると思いますが、再現性の向上や消費ACU¹の削減等が期待できます。
③テストシナリオファイルはGitでソースコードと一緒に置いて検証しました。

するとDevinくんからはまだできるか分からないけどとりあえずテストケースを読んでみるねという旨の返事がありました。

そしてテストケースを確認するとまあまあな確度でできるかも！と返事が来ました。
（私が「gogo」と茶々を入れてますが別に何も言わなくても続けてくれます）

この間WEBからはDevinくんの作業プロセスを除き見る事ができます。Devinくんのブラウザで実際にカーソルが動く姿を確認できます。
更に待つとテストが完了したようです。

画像からはカットしてしまいましたがテスト結果として求めているレコードの検索結果と期待した画面キャプチャを添付してくれました。
画面テストしての信頼性は申し分ないなと感じました。

課題点

今回完璧な仕事をしてくれたDevinくんですが課題点もなくはないです。

運用コストは組織の価値観次第かも

今回のテストシナリオは1つの求人に会員登録を伴った応募をするというものでしたが、これにかかったACUは2.5です。 現在PLEXではDevinをTeamプランで契約しており、その場合1ACUは2ドルで換算できます。なので応募テストにかかった費用はだいたい5ドル程度となります。
実運用で回すテストシナリオは簡易な求人応募シナリオに絞ってもこの5~6倍の規模になります。もちろん、会員登録を伴わないケースもあり費用が純粋に5~6倍になるわけではないですが、日常的にテストを回していく事を考えると費用対効果はもう少し検証が必要そうです。

逆に今回の検証では費用感以外は大きな課題も感じなかった為、ここが見合いそうな組織には現実的な選択肢になってくるかもしれません。

Tips

最後にこの検証で得られたTips的なものを共有します。
どれも人にテストを依頼したとしても通じるような話ばかりかもしれませんが。

ステップを踏んで実行させる、しかし実行許可は不要であることを明言

AIエージェントを使う際は共通することかもしれませんが、Devinくんもテストシナリオを読み込んだ後、実行計画を提出させた方がその後の実行制度が高くなるように感じます（大抵は言わなくても出てきますが）。
ただし、実行計画を提出した後、Devinくんが「この実行計画で実行して良いかな？」という許可待ち状態になることがある為、事前にユーザーの実行許可を待つ必要がない事を明言した方がよさそうでした。

テストする画面のURL、フォームの入力内容はなるべく具体的に指示をする

Devinくんの良さとしてファジーな指示でもテストシナリオが崩壊しないという点を冒頭で述べましたが、それでも指示はなるべく具体的な方がスムーズです。例えば「画面のフォームをすべて入力して」という指示でもどうにかなる時はなりますが、テストの精度やコストは具体値を指定した方が結果が良くなります。

エビデンスのデータフォーマットは具体的なSQLで指示する

画面テストを行う上でDevinくんにデータ構造を意識させるコストは勿体ないので、DBの登録値を提出させたい場合は提出用のSQLを用意すると期待値に近いテスト報告を受けることができそうでした。

複雑なHTML構造の操作は苦手

今回のテストで実行コストが嵩んでしまった要因であると感じているのですが、例えばラジオボタンやセレクトボックスを人間向けにカスタマイズしているような画面（素直なフォームと構造が異なる）の操作はDevinくんは若干苦手なのかなという印象でした。
逆にプレーンなフォームの入力、ボタンの押下などはあっさりこなしているように見えました。

最後に

弊社では各事業部でエンジニアを募集しております！気になるポジションあればお気軽にお問い合わせください。一緒に働きましょう。

弊社の各事業部でエンジニアを求めています！

ACU...（Agent Compute Unit）Devinの実行コストを数値的に表現した指標↩