初めに
以下の記事を拝見し、Playwright MCPに大きな可能性を感じました。
私も試してみたいと思い、自作したWebアプリに対しモンキーテストを行ってみました。
環境
Claude for Desktop（Windows）@playwright/mcp : 0.1.0
テスト対象のアプリ
特にひねりの無いシンプルなTODOアプリです。
Playwright MCPの環境構築
まずは Playwright MCP をインストールします。
> npm install -g @playwright/mcp
続いて、Claudeの設定ファイルに以下のように記述すれば問題ありません。
記述後はClaudeを開きなおしてください。
claude_desktop_config.json
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest"
]
}
}
}
Claudeの設定が以下のように合っていればOKです。
モンキーテスト試してみる
それでは実際にモンキーテストを実行してみましょう。
入力
こちらのプロンプトを入力しました。
不具合の発見だけでなく、UI/UXの観点からも何か気になることがないか聞いてみます。
こんにちは！
作成したTODOアプリのモンキーテストをお願いします！
# 環境
http://localhost:5173/
# 要望
* バグかな？と感じたところは教えてください！
* UI/UX観点で指摘があれば教えてください！
* その他改善提案などもお願いします！
* テスト後、どんな試験を行ったのかをまとめて教えてください！
* 結果は表形式でいただきたいです！
以上になります！
よろしくお願いいたします！
実行中
実行時にブラウザが立ち上がり、自動でテストをしてくれます。
こちらは実行時の様子です。いろんな入力値のパターンを試してくれていますね。
結果
こちらが最終的な結果です。
実施したテストに対する結果を出力してくれました。
バグや改善提案についても詳しく記載されています。
# バグの報告
## 空のタスク追加が可能
- 入力欄が空の状態でも登録ボタンをクリックするとタスクが追加されてしまう
- スペースのみの入力も空のタスクとして追加される
**改善案**：空の入力や空白文字のみの入力の場合はタスク追加を無効にする
---
# UI/UX観点での指摘
## インタラクション性の向上
- Enterキーでのタスク追加機能がない
**改善案**：テキスト入力中にEnterキーを押した場合も登録ボタンと同様の動作をするようにする
## データの永続化がない
- ページをリロードするとタスクデータが消える
**改善案**：`localStorage`等を使用してタスクデータを保存する
## 視覚的なフィードバックが少ない
- タスク追加・削除時に視覚的なフィードバックがない
**改善案**：アニメーションなどを用いて操作に対するフィードバックを追加する
## UIデザインの改善余地
- 最小限のデザインで機能は果たしているが、視覚的な魅力に欠ける
**改善案**：カラースキームの導入、より美しいフォントやボタンデザインの適用
---
# その他改善提案
## 機能追加の提案
- タスクの完了/未完了を切り替える機能
- タスクの編集機能
- タスクの優先度設定機能
- タスクのカテゴリ分け機能
- タスクの並べ替え（ドラッグ＆ドロップ）機能
## UIの強化
- タスクの数を表示するカウンター
- 全タスクを一括で削除するボタン
- ダークモード/ライトモードの切り替え
## アクセシビリティ改善
- キーボードナビゲーションの完全サポート
- スクリーンリーダー対応の改善
- 色のコントラスト比の最適化
---
以上がTODOアプリのモンキーテスト結果です。
基本的な機能は動作していますが、いくつかのバグと改善点が見つかりました。
**特に空のタスク追加が可能な点は修正が必要です。**
実行時間は4分ほどでした。
この時間でここまで見てくれるのはありがたいですね！
終わりに
短時間でやってくれる上に、改善提案まで出してくれるのは非常にありがたいですね。
とりあえず作ってみて、テストさせて、改善しての流れをスムーズに行えるので非常に体験が良いです。
今回は簡素なアプリケーションを対象にしてますが、実際のプロダクトでどこまでやってくれるのかは気になりますね。その辺は検証が必要そうです。
ここまでご覧いただきありがとうございました！