Ruby on Jetsでハマったこと
doiken
デロイト トーマツ ウェブサービス株式会社（DWS）公式ブログ
PlaywrightMCPを使ってみよう
tanesan
こんにちは！今回は、Microsoftが提供する「PlaywrightMCP」を実際に使ってみた感想や手順を紹介します。
環境
- Node v20.17.0
- Playwright v1.52.0
- Cursor v0.50.5（エディタ）
準備
まずはCursorの設定からMCPサーバーを追加します。Settings > MCP > Add new MCP Server で以下のように設定しましょう。
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}次にMCPサーバーを起動します。
npx @playwright/mcp@latest --port 8931なんとこれだけで準備完了です。
使ってみる
DWSブログから記事を取得してみる
準備も終わったので実際に使ってみます！まずはDWSブログにアクセスして記事を取得するよう命令してみましょう。
下記のプロンプトをAgentモードのCursorに渡してみます。
playwrightで@https://blog.mmmcorp.co.jp/ にアクセスして、人気の記事を三つ選んでください実行結果
実際にブラウザが立ち上がり、「Run tool」をクリックすることで処理が進み最終的に、おすすめ記事から三つピックアップしてくれました。
出力
画面遷移を伴う操作
次に、カテゴリクリック→記事クリックという画面遷移を含む命令を指示してみました。
playwrightで@https://blog.mmmcorp.co.jp/ にアクセスして、プログラミングのカテゴリに遷移して、一番最初の記事をクリックしてください実行結果
実際の画面を操作して記事まで遷移できていることがわかるかと思います！
出力
テストコードの生成
さらに下記のようにPlaywrightのテストの作成を依頼してみました。
前の命令をもとにテストを作成してください出力
const { test, expect } = require('@playwright/test');
test('mmmcorpブログでプログラミング→最初の記事に遷移', async ({ page }) => {
// トップページにアクセス
await page.goto('https://blog.mmmcorp.co.jp/');
// ナビゲーションの「プログラミング」カテゴリをクリック
await page.getByRole('link', { name: 'プログラミング', exact: true }).click();
await expect(page).toHaveURL(/\/categories\/programming/);
// 一番最初の記事のリンクをクリック
const firstArticle = page.locator('article').first().locator('a').first();
const articleHref = await firstArticle.getAttribute('href');
await firstArticle.click();
// 記事ページに遷移したことを確認
await expect(page).toHaveURL(new RegExp(articleHref.replace(/^\//, '')));
// 記事タイトルが表示されていることを確認
await expect(page.locator('h1')).toBeVisible();
}); 細かい指定をしなくても、実際に動作するテストコードが生成されるのはすごいですね・・・
まとめ
PlaywrightMCPを使うことで、自然言語でブラウザ操作の自動化ができるため、自動化ツール作成のハードルが大きく下がると感じました。また、テストコードの生成も行ってくれるため、E2Eテストの工数削減に大きく貢献しそうです。実際の業務や検証でも活用できそうなので、今後も積極的に使っていきたいと思います。
参考
AUTHOR
