api-testing

API テストスキル

レスポンスをモックし、リクエストをインターセプトして、ネットワークトラフィックを監視することで、API 連携をテストします。

使用するタイミング

このスキルは、次の場合に有効になります：

• API 連携をテストしたい場合
• バックエンドのレスポンスをモックする必要がある場合
• エラーのシナリオをシミュレートしたい場合
• リクエストのインターセプトについて質問した場合
• オフライン時の動作をテストする必要がある場合

機能

レスポンスのモック

browser-devtools-cli stub mock-http-response \
  --pattern "**/api/users" \
  --response '{"action":"fulfill","status":200,"body":[{"id":1,"name":"Test"}]}'

リクエストのインターセプト

browser-devtools-cli stub intercept-http-request \
  --pattern "**/api/**" \
  --modifications '{"headers":{"Authorization":"Bearer token"}}'

ネットワークの監視

browser-devtools-cli --json o11y get-http-requests
browser-devtools-cli --json o11y get-http-requests --resource-type fetch
browser-devtools-cli --json o11y get-http-requests --status '{"min":400}'

スタブの管理

browser-devtools-cli stub list
browser-devtools-cli stub clear --stub-id <id>
browser-devtools-cli stub clear

よくあるシナリオ

成功レスポンスのモック

browser-devtools-cli stub mock-http-response \
  --pattern "**/api/users" \
  --response '{"action":"fulfill","status":200,"body":[{"id":1,"name":"Test"}]}'

サーバーエラーのシミュレート

browser-devtools-cli stub mock-http-response \
  --pattern "**/api/checkout" \
  --response '{"action":"fulfill","status":500,"body":{"error":"Internal Server Error"}}'

404 Not Found のシミュレート

browser-devtools-cli stub mock-http-response \
  --pattern "**/api/missing" \
  --response '{"action":"fulfill","status":404,"body":{"error":"Not Found"}}'

ネットワークタイムアウトのシミュレート

browser-devtools-cli stub mock-http-response \
  --pattern "**/api/slow-endpoint" \
  --response '{"action":"abort","abortErrorCode":"timedout"}'

接続失敗のシミュレート

browser-devtools-cli stub mock-http-response \
  --pattern "**/api/offline" \
  --response '{"action":"abort","abortErrorCode":"connectionfailed"}'

認証ヘッダーの追加

browser-devtools-cli stub intercept-http-request \
  --pattern "**/api/**" \
  --modifications '{"headers":{"Authorization":"Bearer test-token"}}'

リクエストボディの変更

browser-devtools-cli stub intercept-http-request \
  --pattern "**/api/submit" \
  --modifications '{"body":{"injected":"value"}}'

遅延の追加

browser-devtools-cli stub mock-http-response \
  --pattern "**/api/slow" \
  --response '{"action":"fulfill","status":200,"body":{}}' \
  --delay-ms 3000

不安定な API のシミュレート

browser-devtools-cli stub mock-http-response \
  --pattern "**/api/unreliable" \
  --response '{"action":"fulfill","status":503}' \
  --chance 0.3

1 回限りのモック

browser-devtools-cli stub mock-http-response \
  --pattern "**/api/once" \
  --response '{"action":"fulfill","status":200,"body":{"first":true}}' \
  --times 1

テストのワークフロー

SESSION="--session-id api-test"

# 1. Setup mocks before navigation
browser-devtools-cli $SESSION stub mock-http-response \
  --pattern "**/api/users" \
  --response '{"action":"fulfill","status":200,"body":[{"id":1,"name":"Mock User"}]}'

# 2. Navigate to application
browser-devtools-cli $SESSION navigation go-to --url "https://app.example.com"
browser-devtools-cli $SESSION sync wait-for-network-idle

# 3. Interact with the app
browser-devtools-cli $SESSION interaction click --selector "#load-users"
browser-devtools-cli $SESSION sync wait-for-network-idle

# 4. Check network requests
browser-devtools-cli $SESSION --json o11y get-http-requests

# 5. Verify UI shows mocked data
browser-devtools-cli $SESSION content get-as-text --selector ".user-list"

# 6. List active stubs
browser-devtools-cli $SESSION stub list

# 7. Clear all stubs
browser-devtools-cli $SESSION stub clear

# 8. Cleanup
browser-devtools-cli session delete api-test

エラーテストのワークフロー

SESSION="--session-id error-test"

# Mock error response
browser-devtools-cli $SESSION stub mock-http-response \
  --pattern "**/api/checkout" \
  --response '{"action":"fulfill","status":500,"body":{"error":"Payment failed"}}'

# Navigate and trigger error
browser-devtools-cli $SESSION navigation go-to --url "https://app.example.com/checkout"
browser-devtools-cli $SESSION interaction click --selector "#pay-button"
browser-devtools-cli $SESSION sync wait-for-network-idle

# Check error handling in UI
browser-devtools-cli $SESSION content take-screenshot --name "error-state"
browser-devtools-cli $SESSION content get-as-text --selector ".error-message"

# Cleanup
browser-devtools-cli $SESSION stub clear
browser-devtools-cli session delete error-test

API テスト中のバックエンドのデバッグ

実際のバックエンドに対してテストしていて、エンドポイントが失敗する理由や予期しないデータを返す理由をデバッグする必要がある場合は、node-devtools-cli を使用します：

# Connect to API server process
node-devtools-cli --session-id api-debug debug connect --process-name "api"

# Set tracepoint on the handler
node-devtools-cli --session-id api-debug debug put-tracepoint \
  --url-pattern "routes/users.ts" \
  --line-number 42

# Trigger the API from browser (or curl), then get snapshots
node-devtools-cli --session-id api-debug --json debug get-probe-snapshots

# Or inspect backend console logs
node-devtools-cli --session-id api-debug --json debug get-logs --search "error"

ベストプラクティス

1. 意図しないリクエストをモックしないように、具体的なパターンを使用する
2. 干渉を防ぐため、テスト後にスタブをクリアする
3. 予期しない動作をデバッグするため、スタブを一覧表示する
4. 1 回限りのモックには times limit を使用する
5. 読み込み状態をテストするため、遅延を追加する
6. 正常系だけでなく、エラーのシナリオもテストする
7. 初回読み込みをテストする場合は、ナビゲーションの前にモックを設定する
8. モックが機能していることを確認するため、実際のリクエストを監視する