はじめに
Playwrightは、Microsoftが開発したブラウザ自動化ツールで、
実際のブラウザを動かしたE2Eテストができます。
こちらはaiに書いてもらったサンプルコードで、googleでcatと検索したときの挙動をテストするコードです。
test('Googleで「cat」を検索', async ({ page }) => {
// googleの検索ページに移動
await page.goto('https://www.google.com');
// 「cat」と入力してEnter
await page.fill('input[name="q"]', 'cat');
await page.keyboard.press('Enter');
// 検索結果の中に"cat"が含まれていることを確認
expect(page.locator('text=cat')).toBeVisible();
});
Playwright MCPとは
今回使うPlaywright MCPは生成AIがPlaywriteの機能、先ほどのようなページ移動やクリックを使うための中間サーバです。
これは試しにaiに「zennを開いて、今日の記事を3つ抜粋して。」とお願いしてみた結果です。
3や4日前の記事が抜粋されていますが、この結果の曖昧さも生成aiの精度がそのまま反映されていますね。
設定方法はこちらのサイトを参考にさせていただきました。
今回clineにセットしたモデルはgemini-2.0-flash-001です。
実際に自分の作ったプログラムを動かさせる
猫の種類を入力するとその画像がランダムで出力されるwebアプリを用意しました。
APIはTheCatApiを使用しました。
ではブラウザを動かしてスクショを撮ってもらいます。
実際にフォルダにスクリーンショットが保存されていました。
エビデンス撮らなければいけないケースは使えそう。
もう一つ試してみたのは、バグを探し当ててもらうというものです。
実はこのアプリの検索ボタンをクリックしても、何も反応しないのですが、故意にそのバグを放置して検知できるか試してみます。
使ってみた感想
Playwrightテストの作成、エビデンスを撮るときなどの作業効率化には使えそうです。
Playwright MCPのREADMEにも、使用例としてスクレイピングやテスト作成が挙げられています。
ただ、生成aiの特徴でもありますが、処理が複雑になるほど思った操作をしてくれないです。
ざっくりとバグを探してもらうにはコードを読ませた方が早いなと思いました。
NCDC株式会社( ncdc.co.jp/ )のエンジニアチームです。 募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( github.com/ncdcdev/recruitment )をご覧ください！ ※エンジニア以外も記事を投稿することがあります
Discussion