みなさん、こんにちは！ワンダーソフトコーヒーです！
本日は、先月登場した devin の MCP Marketplace に登場した Playwright MCP について記載をしたいと思います。
devin の MCP Marketplace とは
2025年7月24日くらいに発表された、AIを利用したコーディングエージェントプラットフォームの devin のサービス内で利用可能なMCP群になります。
https://x.com/cognition_labs/status/1948081054579114421
devin の session のなかで「MCP」によって各種のサービス群を自然言語記述で呼び出せる、というのは devin ユーザーたちが待ちに待った機能だったようにも思います。
Playwright MCP とは
Microsoft によるOSSのMCPです。Playwright を claude code などの AI エージェントツールから呼び出すことができます。
https://github.com/microsoft/playwright
以下のブログでも一度触れています。
https://coffee.wonder-soft.com/blogs/blog/chrome-mcp-server
開発中のウェブ画面のE2Eのテストだったり、外部に公開したサイトのドメインを指定したE2E、インテグレーションテストの実行が可能になります。
frontend を jest だけでテストする、とか、api を pytest だけで実装する、だけではなく、画面からAPI、その先のデータベースにレコードが登録されたり、参照されたり、というところまでを一気通貫でテストができるようになります。
今回のユースケース
モノレポで管理しているフロントエンド、バックエンドのプロジェクトを管理している GitHub の repository を対象に、データベースの立ち上げ、シードデータの投入、フロントエンドとバックエンドの起動をしてもらってから、playwright で該当のウェブアプリにログインするシナリオを動かすことができないか、という最初の小さな一歩を試してみました。
devin の playbook の準備
devinに対して、通常通り session 経由（slackやweb画面）から、一連の操作をお願いすることも、もちろんできますが、機能開発を継続的に行う場合、画面の動作確認はリリースの前などには必ず行いたいところですし、繰り返し発生する作業です。
そこで、playbook にすることで再利用可能なオペレーションにしたいと考えました。
## Target Repository
- https://github.com/wonder-soft/HOGEHOGE
## Procedure
1. clone the repository if not exist
```bash
git clone https://github.com/wonder-soft/HOGEHOGE
```
2. start services by docker compose.
```bash
docker compose up -d
```
3. initialize database and load seed
```bash
# This command will execute database migrations and load seed data
just db-reset dev
```
4. start FastAPI
```bash
just start-backend
```
5. start Frontend
```bash
just start-frontend
```
6. execute login operation by using Playwright MCP
by using playwright, login to the `http://localhost:3000/login`
ID/Pass is devin@example.com/devin-password
## Forbidden actions
Anything you don't want Devin to do
上記の playbook を登録することで、以下をお願いしました。
- repository の clone
- database migration
- seed data の投入
- api の起動
- frontend の起動
- ログインを playwright で実施
実際に呼び出した結果
devin のウェブ画面で、session でどのようなコマンドが発行されているのかの詳細を見ましたが、無事に呼び出せているようでした。
I am navigating to the login page using Playwright MCP.
mcp-cli tool call browser_navigate --server playwright --input '{"url": "http://172.17.0.1:3000/login"}'
### New console messages
- [VERBOSE] [DOM] Input elements should have autocomplete attributes (suggested: "current-password"): ...
- [INFO] %cDownload the React DevTools for a better development experience: https://reactjs.org/link/r...
- [ERROR] Failed to load resource: the server responded with a status of 404 (Not Found) @ http://172....
### Page state
- Page URL: http://172.17.0.1:3000/login
- Page Title: Login Page
- Page Snapshot:
```yaml
- generic [active] [ref=e1]:
- generic [ref=e2]:
- generic [ref=e3]:
- link:
- /url: /
- img [ref=e5] [cursor=pointer]
- paragraph [ref=e7]: ログイン
- generic [ref=e9]:
- generic [ref=e10]:
- generic [ref=e11]: ユーザーID
- textbox "ユーザーIDを入力してください" [ref=e12]
- generic [ref=e13]:
- generic [ref=e14]: パスワード
- generic [ref=e15]:
- textbox "パスワードを入力してください" [ref=e16]
- img [ref=e17] [cursor=pointer]
- button "ログイン" [ref=e22] [cursor=pointer]
上記のように mcp-cli を利用して devin が playwright のコマンドを何度か呼び出して、ログインをするための documentId 等を特定しつつ、渡したテスト用のアカウントを利用して、ログインができるところまで確認ができました。 ここからは playwright, cypress 等の e2e ツール同様に、いかに簡略に操作をできるかを事前に情報を与える詳細度をあげていくところかな、と思いました。（毎回ログインをするためのフォームを探してもらうのもコストとして良くないため）
そして気づけば
devin の playbook による Playwright MCPを活用したマクロが実行されている様子を眺めながら、弊社で焙煎した「バタック・ブルー」を楽しみつつ、リリース前の動作確認を今後強化できるかもしれない、という気持ちになってきました。
今後も、ソフトウェア開発やデザインのあれこれについて、コーヒーとともにゆるく投稿していきますので、どうぞお楽しみに ☕✨
🔗 Wonder Soft Coffeeのオンラインストアはこちら：
👉 https://coffee.wonder-soft.com/collections/all