Playwright MCP をちょっとだけ触った感触
触ってみた背景
Playwright MCP は Web サービスに対するテストの仕方を大きく変えるような気がしつつも、どんなふうに活用できると良さそうか（特に QA 担当者という、動作検証だけでなく、リリースしても問題ないことを説明できる必要がある立場での活用方法が）よくわからない。というのが現状の私です。
もう少し Playwright MCP にお近づきになり、活用方法を見出したいというのが今回の取り組みのきっかけです。
といっても、隙間の時間に簡単に触ってみただけなので、大したことはできていませんが、触る前と比べると理解が進んだり気づきを得られたりしたので、それをアウトプットしておこうと思います。
前提
- 今回やったことは「Playwright MCP を使って、Claude に自作サイトのテストを実行してもらった」というものになります
- Claude はフリープランを使っています
- 自作サイトは https://v0-japanese-othello-game-ts7shw.vercel.app/ です（v0で作りました）。他の方の練習にも使ってもらっていいです
- テスト実行時のプロンプトはかなり雑なものです。「このページの内容から、このページのためのテストケースを生成してください」からの「Playwright MCP を設定しました。実際にテストを実行してください。」です
生成されたテストケースも貼っておきます
オセロゲームのテストケース
- 初期表示のテスト
TC-001: 初期盤面の表示
前提条件: アプリケーションを新規に読み込む
手順: アプリを開く
期待結果:
8x8のマス目が表示される
中央の4マスに初期配置（白黒白黒の配置）がされている
黒のターンから始まっている
ターン表示が「黒のターンです」と表示されている
TC-002: 有効な手の表示
前提条件: 初期盤面が表示されている
手順: 盤面を観察する
期待結果: 黒が置ける位置（白石を挟める位置）が何らかの形でハイライトまたは表示されている
2. 基本操作のテスト
TC-003: 石を置く
前提条件: 初期盤面（黒のターン）
手順:
(5,3)のマスをクリックする
期待結果:
黒石が(5,3)に配置される
(5,4)の白石が黒石に変わる
ターン表示が「白のターンです」に変わる
TC-004: 無効な位置へのクリック
前提条件: 初期盤面（黒のターン）
手順:
(0,0)のマスなど、石を置けない位置をクリックする
期待結果:
石が置かれない
ターンが変わらない
エラーメッセージまたは警告が表示される（実装による）
TC-005: 既に石が置かれている位置へのクリック
前提条件: 初期盤面
手順:
中央の既に石が置かれているマスをクリックする
期待結果:
何も変化しない
ターンが変わらない
- ゲームロジックのテスト
TC-006: 複数方向の石を同時にひっくり返す
前提条件: 特定の配置を設定する（または特定の手順でゲームを進める）
手順:
複数方向の石をひっくり返せる位置に石を置く
期待結果:
すべての方向（横、縦、斜め）で挟まれた石が正しくひっくり返る
TC-007: パスの処理
前提条件: 片方のプレイヤーが石を置ける場所がない状態を作る
手順:
そのターンの処理を観察する
期待結果:
「パスします」などのメッセージが表示される
次のプレイヤーのターンに自動的に移行する
- ゲーム終了のテスト
TC-008: ゲーム終了条件
前提条件: ボードが石で埋まるか、両プレイヤーが連続してパスするかの状態を作る
手順:
最後の石を置くか、両プレイヤーがパスする状況を観察する
期待結果:
ゲーム終了のメッセージが表示される
最終的な石の数がカウントされ、勝者が正しく表示される
引き分けの場合は「引き分け」と表示される
TC-009: リセット機能
前提条件: ゲームが進行中または終了している
手順:
リセットボタンまたは新規ゲーム機能を使用する
期待結果:
盤面が初期状態にリセットされる
黒のターンから再開される
- UI/UXのテスト
TC-010: レスポンシブデザイン
前提条件: 異なる画面サイズの端末でアプリを開く
手順:
モバイル端末、タブレット、デスクトップなど異なるデバイスでアプリを表示する
ブラウザウィンドウのサイズを変更する
期待結果:
すべてのデバイスで盤面が適切に表示される
操作性が維持される
TC-011: ターン表示の視認性
前提条件: ゲームを進行する
手順:
石を置いてターンを切り替える
ターン表示を確認する
期待結果:
現在のターンが明確に表示される
色や表示方法で直感的に理解できる
- エッジケースのテスト
TC-012: 全石同色になる手
前提条件: 特定の配置を作る（または特定の手順でゲームを進める）
手順:
相手の石をすべてひっくり返せる手を打つ
期待結果:
すべての石が一色になる
ゲームが正しく終了する
TC-013: 連続パス後の有効手
前提条件: 一方がパスした後に、もう一方も一時的にパスするが、次に有効な手がある状態を作る
手順:
パス後の状況で石を置ける位置をクリックする
期待結果:
正しく石が置かれ、ゲームが続行する
- パフォーマンステスト
TC-014: 長時間プレイの安定性
前提条件: 新規ゲーム開始
手順:
ゲームを最後まで複数回プレイする
期待結果:
メモリリークやパフォーマンス低下が発生しない
連続して問題なくプレイできる
TC-015: 高速クリック耐性
前提条件: ゲーム進行中
手順:
盤面上で複数の位置を素早く連続してクリックする
期待結果:
アプリケーションがクラッシュしない
操作が適切に処理される（無効なクリックは無視される）
結果
- オセロを置く操作に失敗し続け、最終的に処理が中断してしまい、さらに、それまで出力されていたテスト実行結果のチャットが全て消えてしまった
- その後、プロンプトに「何度か試してうまくいかないテストは失敗として、次のテストに進んでください」という一文を加え再実行
- 結果、オセロを置く操作には前回と同じく失敗したが、何度か失敗したタイミングで次のテストに移行し、最終的に、実行できたテストとその実行結果、実行できなかったテストをちゃんとレポートして出力してくれた
- その後、プロンプトに「何度か試してうまくいかないテストは失敗として、次のテストに進んでください」という一文を加え再実行
感想
- AI agent（今回の場合 Claude） が操作に失敗している時、どこに原因があるのか、原因究明できないと気持ちが落ち着かない
- うまく操作できない箇所をマニュアルで試して問題なければE2EレベルではOKという判断は下せそう
- 操作に失敗している時、操作を何度か試行錯誤してくれるが、無駄な待ち時間を生む原因になりそうなので、適切に指示を出す必要がありそう
- フリープランだからかよくわからないが、出力されていたチャットが消えるのは、原因調査の観点で困る現象だと感じた
おしまい
一緒にペアプロしましょう。
Discussion