playwright-mcp × Cursor で BDD Testing
はじめに
playwright-mcp がリリースされて、さまざまなブラウザ操作が AI を通じて行えるようになりました。
さて、今回は playwright-mcp を使用した Behavior Driven Development (BDD) testing について便利そうだったので書いてみました。 playwright-mcp と Cursor IDE を使用すれば、1 行もテストコードを書かずに BDD Testing が可能になります。
BDDとは
Behavior Driven Development（BDD）は、ソフトウェア開発手法の一つで、ビジネス要件をテストシナリオとして記述し、それを自動化することで品質を担保する手法です。
従来の BDD テストでは、以下のような作業が必要でした。
- Gherkin 構文でシナリオを記述
- Step 定義を実装
- テストコードの作成
- テストの実行と保守
しかし、playwright-mcp を使用することで、これらの作業を大幅に簡略化することができます。
実際にやってみる
それではここから実際に playwright-mcp と Cursor を使用して BDD Testing を行なっていきます。
最終的には下記画像のように Cursor がシナリオを解釈して、自動でブラウザを立ち上げてテストを行ってくれる所を目指します。
cursor の playwright-mcp のセットアップは他記事に譲ります。
今回はテスト用のアプリケーションとして、ログイン画面とログイン後の画面を持つアプリケーションを作成してみました。 メールアドレスとパスワードのフォームがあり、ログイン後にダッシュボードに遷移するというシンプルなアプリケーションです。
ログインシナリオの例
次にシナリオを書いていきましょう。
シンプルなログイン機能の BDD シナリオです：
Feature: ログイン
Scenario: ログイン画面に遷移する
When I navigate to "http://localhost:3000"
Then I see "ログイン"
Scenario: ログインする
When I fill in "メールアドレス" with "test@example.com"
And I fill in "パスワード" with "password"
And I click "ログイン"
Then I see "ログインに成功しました！"
テストを指示
それではこのファイルを元に AI にテストを実行させます。
cursor を起動して、ファイルの内容を指示しましょう。使用モデルにもよりますが、要素の指定方法はtextで取得しようとする場合もあるため、明示的に指定するように指示するのが良さそうです。また、テストコードを生成しようとすることもあるので、コード生成をしないような指示も追加します。
この辺りは cursor の Project Rules で指定するのも良いかもしれません。
そうすると、ブラウザが立ち上がりシナリオに沿った操作が行われます。
以上でふるまいを記述したシナリオから、実際のブラウザ操作までを実現することができました。ブラウザを閉じるシナリオも追加する事もできます。
ふるまいをさらに追加したりなどと拡張性は高そうです。
playwright-mcp の利点
- コード不要: テストシナリオを自然言語で記述するだけで、AIが適切なブラウザ操作を行える。
- 保守性の向上: テストコードを書く必要がないため、保守の手間が大幅に削減される。
- 直感的な操作: Cursor IDE と組み合わせることで、より直感的なテスト作成が可能。
- 高い柔軟性: さまざまなブラウザ操作やアサーションに対応。
まとめ
playwright-mcp とcursor を使用したBDDテストをしてみました。BDD Testing というとふるまいを記述し、そのステップに沿ったテストコードを書く事が多かったですが今回の方法だとふるまいを記述するだけで済みました。
Discussion