私のQAエンジニアはLLMです

2026-01-09 · 1 min read

Claudeはボタンをクリックできます。

些細なことのように聞こえますが、UIの構築方法を変えます。Playwright MCPを使うと、Claudeは単にコードを書くだけでなく、ブラウザを開き、localhostに移動し、実際に動作することを検証します。コードレビューで見逃すバグを発見します。

セットアップ

Playwright MCPはClaudeにブラウザ自動化を提供します。ヘッドレスChromiumで実行しています:

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@anthropic-ai/mcp-server-playwright", "--headless"]
    }
  }
}

これでClaudeはナビゲート、クリック、タイプ、スクリーンショットができます。ユーザーが見るものを見ます。

flowchart LR
    Claude([Claude Code]) -->|browser_snapshot| PW[Playwright MCP]
    PW --> Browser[Headless Chrome]
    Browser --> App[localhost:1313]
    Browser -.->|screenshot| Issue[(GitHub Issue)]
    Issue -.->|visual history| PR[Pull Request]

flowchart TB
    Claude([Claude Code]) -->|browser_snapshot| PW[Playwright MCP]
    PW --> Browser[Headless Chrome]
    Browser --> App[localhost:1313]
    Browser -.->|screenshot| Issue[(GitHub Issue)]
    Issue -.->|visual history| PR[Pull Request]

フロー: Claude Code → Playwright MCP → ブラウザ → スクリーンショット → GitHub Issues → PR

ビューポートマトリックス

すべてのUI変更は3つのブレークポイントでテストされます:

ビューポート	サイズ	理由
Desktop	1440×900	標準的なラップトップ
Tablet	1024×768	iPad縦向き
Mobile	390×844	iPhone 14

Claudeはブラウザをリサイズし、スクリーンショットを撮り、GitHub Issueにアップロードします。状態変更ごとに3つのスクリーンショット。モバイルナビゲーションが壊れている場合、デプロイ後ではなく、すぐに確認できます。

テーマテスト

ライトモードとダークモードでも同じパターン:

// Claudeがテーマを切り替える
await page.click('[data-testid="theme-toggle"]');
// 両方の状態をスクリーンショット

CSS変数の一貫性が重要です。ライトモードで見栄えが良いコンポーネントが、ダークモードでは見えないテキストを持っている可能性があります。Claudeは実際に両方を見ることでこれを検出します。

インタラクティブテスト

ここが面白いところです。Claudeは単にスクリーンショットを撮るだけでなく、UIを使用します:

すべてのナビゲーションリンクをクリックし、目的地を検証
モバイルドロワーを開き、アニメーションを確認
フォームに入力して送信
インタラクティブな要素にホバー
背景をクリックしてモーダルを閉じる

バグを見つけたとき—たとえば、外側をタップしてもドロワーが閉じない—それを報告し、コードを修正し、再テストします。フィードバックループは短いです。

テストレポートとしてのGitHub Issue

すべてのスクリーンショットはGitHub Issueにアップロードされます。各マイルストーンでIssue本文が再構築されます:

## 現在の状態

### Desktop (1440×900)
![desktop](https://user-images.githubusercontent.com/...)

### Tablet (1024×768)
![tablet](https://user-images.githubusercontent.com/...)

### Mobile (390×844)
![mobile](https://user-images.githubusercontent.com/...)

## テストチェックリスト
- [x] ナビゲーションリンクが機能
- [x] モバイルドロワーが開く/閉じる
- [x] テーマ切り替えが保持される
- [ ] フォーム検証がエラーを表示

Issueは生きたテストレポートになります。PRをレビューする人は、何がテストされたか正確に確認できます。

完全なループ

典型的な機能はこのサイクルを経ます:

Issue作成: 「サイドバーナビゲーションを追加」
Claude実装: コンポーネントを記述
ビジュアル検証: すべてのビューポートのスクリーンショット
インタラクティブテスト: UIをクリックスルー
バグ発見: 背景クリックでドロワーが閉じない
修正適用: クリックハンドラーを更新
再テスト: 新しいスクリーンショット、すべて合格
PR作成: 完全なビジュアル履歴を持つIssueにリンク

手動QAステップなし。実際に見ずに「良さそう」もなし。Claudeは自分の仕事を検証します。

これが検出するもの

Claudeが見つけた実際のバグ:

コンテンツの背後に隠れたモバイルナビゲーション(z-index問題)
ダークモードで見えないボタンテキスト(間違ったCSS変数)
Enterキーでフォームが2回送信される
overflow:hidden親によって切り取られたドロップダウンメニュー
タッチデバイスでホバー状態がスタック

これらは、ブラウザでのみ現れるためコードレビューをすり抜けるバグです。Claudeは実際にコードを実行するため、それらを発見します。

すべてのPRには、動作することの証拠が付いてきます。