ENECHANGE Developer Blog

ENECHANGE開発者ブログ

テストコード作成の悩みをAIが解決！Cursorで半減した試行錯誤の時間

AIエージェント活用リレーブログ

こんにちは、ENECHANGE QAマネージャーの黒澤です。

AIエージェント活用リレーブログ、前回の三輪さんの記事では「AIに任せきりにするのではなく、SOW(作業明細書）でAIを使いこなすことが重要」と話しがありました。この視点はとても大事で、AIの提案を疑う視点も持ちながら、AIを使いこなしていく必要があると感じました。

QA採用の現場から見えてきた、AIエージェント活用の波

ここ最近、QAメンバーの採用活動を進めていますが、面談の中でも「AIエージェントを活用して効率化を図っている」といった話題が増えてきました。

これらの話を聞くにつれて、AIを使いこなすにはまだまだ課題はありますが、AI活用の大きな変革期を迎えている今、この技術革新の波を確実にキャッチアップしていく必要性を実感している今日この頃です。

本記事では、AIエージェントを活用してテスト自動化を効率化できないかという視点で取り組んだ内容について紹介します。

テスト自動化におけるAIエージェント活用について

これまで私たちQAチームでは、弊社独自の自動化テストツールやPlaywrightを活用してテスト自動化に取り組んできましたが、テスト自動化においてはテストコードの保守性がネックとなっています。

UIや機能の小さな変更のたびに自動テストが動かなくなるため、「ちょっとした改修程度であれば手動でテストした方が速い」という判断になりがちで、テスト自動化がなかなか進まない理由の一つとなっていました。 また、予期しない動作や新しいバグを検出するためには実行過程を見直す必要がありますが、誰もがテストコードを修正できるわけではありません。使いこなすための教育コストが想定以上にかかるため、積極的に活用するまで至っていないのが現状です。

CursorとPlaywright MCPによる爆速テストコード作成

今回は、CursorとPlaywright MCPの組み合わせにより、テストコードの作成が劇的にスムーズになった事例を紹介します。

Playwright MCPの最大の特徴は、AIがブラウザの現在の状態を把握しながらテストコードを生成できる点です。従来のコード生成ツールとは異なり、以下のような対話的なやり取りが可能になります。

まず、正常に動作するテストコードを作成するために、CursorとPlaywright MCPを利用してみました。指示内容の詳細は省略しますが、下記の操作をCursorからPlaywright MCPに指示することで、正常系のテストコードを作成することができます。

  1. AIエージェントにテスト対象URLのページ構造を解析させる
  2. 画面上の機能Aをテストするよう、テキストで指示を行う
  3. Playwrightのテストコードが自動生成される
  4. 生成したコードを実行し、エラーがでたらテキストで修正指示を行う

こうして作成した正常系のテストコードをベースに、機能Aに対する正常系パターンだけでなく、エラーメッセージを確認する準異常系のテストケースも作成していきます。

これまでPlaywrightの活用においては、コードを生成できるCodegen（コードジェネレーター）を使用していました。一度Codegenで生成したテストコードをベースにしていましたが、Cursorではエディタ画面から直接チャットを利用してテストコードを修正できるため、より効率的に品質の高いテストコードを作成できます。

例えば、複数存在するアイコン要素を正しく指定するために、これまではCodegenを使って試行錯誤しながらテストコードを作成していましたが、AIチャットで複数の提案を生成してもらい、最適と思われるテストコードを選択・反映することで、期待通りに動作するテストコードを短時間で作成できるようになりました。

複数存在するアイコン要素への対応

従来は要素を順番に指定することで回避していましたが、順序が変わってしまうと動作しなくなる欠点があります。 Cursorでは、ページ構造に合わせて、複数存在する要素でも確実にクリックできるテストコードを複数提案してくれるため、これまで試行錯誤していた時間が半減し、AI活用の威力を実感しました。

例えば、ECサイトの契約者情報一覧ページで「契約者情報の削除ボタンをクリックする」というテストケースを考えてみます。

これまでは、以下のような保守性の低いテストコードを書いていました。

// 従来の保守性が低いテストコード
await page.locator('.delete-btn').nth(2).click(); // 3番目の削除ボタン

このテストコードでは、表示順が変わると動作しなくなってしまいますが、Cursorに「契約者情報"需要家A"の削除ボタンをクリックしたい」と伝えることで、以下のような変更に強いテストコードを提案してくれます。

// Cursorが提案した変更に強いテストコード
await page.locator('.contractor-name')
  .filter({ hasText: '需要家A' })
  .locator('.delete-btn')
  .click();

さらに興味深いのは、CursorがHTMLの構造を理解して、より適切な方法を提案してくれる点です。詳細は割愛しますが、aria-labelやroleを使った要素の特定方法を提案されることが多く、これらの情報をエンジニアにフィードバックすることで、テストの効率化だけでなく、アクセシビリティの向上にも寄与できると考えています。

最後に

テスト自動化におけるAIエージェント活用は、もはや「試してみる」段階から「どう使いこなすか」という実践フェーズに入ったと感じています。CursorとPlaywright MCPの組み合わせは、その第一歩として非常に有効でした。 特に、テスト自動化のボトルネックであったテストコードの作成・修正を劇的に改善できることで、私たちQAエンジニアは、より高度なテスト設計やテストカバレッジの向上といった本質的な業務に集中できるようになると確信しています。

私たちQAチームも、まだまだ試行錯誤の途中ですが、重要なのは、まず一歩踏み出してみることで、小さな成功体験を積み重ねながら、自分たちなりのAI活用方法を見つけていくことだと思います。

この記事が、皆さんのテスト自動化の新たな一歩を踏み出すきっかけになれば幸いです。