フルスタックQAへの第一歩。Web UIとAPIテストを統合した品質保証戦略

2026/02/12に開催した mabl のウェビナー「フルスタックQAへの第一歩。Web UIとAPIテストを統合した品質保証戦略」で使用したスライドです。

https://www.mabl.com/webinar/lp/february

Transcript

1. フルスタックQA への第一歩 Web UI とAPI テストを統合した 品質保証戦略 2026 年2 月12 日（木）13:00 〜14:00 舟木将彦（Sales Engineer, mabl ） フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 Copyright © 2026 mabl Inc.
2. 1. UI テストだけでは足りない理由 2. API テストの役割と価値 3. 今回のデモ対象：注文管理API 4. API テストによるデータセットアップ 5. UI + API を組み合わせたE2E 検証（デモ含む） 6. テスト設計と保守コストの削減 7. mabl でのAPI/UI テスト統合（デモ含む） 8. ベストプラクティス フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 本日のアジェンダ Copyright © 2026 mabl Inc. 2
3. よくある課題 実行時間が長い: UI を経由するとテストが遅くなる データ準備が複雑: テスト前提条件の設定が煩雑 壊れやすい: UI の小さな変更でテストが失敗 カバレッジの限界: エラーパスの網羅が困難 結果: メンテナンスコストが肥大化し、テストが負債に フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 UI テストだけでは足りない理由 Copyright © 2026 mabl Inc. 3
4. UI テストを補完する4 つのメリット 観点 UI テストのみ UI + API テスト 速度 遅い（数分/ テスト） 高速（数秒/API 呼び出し） 安定性 UI 変更に敏感 API は比較的安定 データ準備 UI 操作で準備 API 直接呼び出し エラー検証 限定的 網羅的（400, 401, 404... ） ポイント: API でデータ準備・検証、UI で重要フローを確認 フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 API テストの役割と価値 Copyright © 2026 mabl Inc. 4
5. mabl-order-api 項目 内容 用途 mabl のAPI テスト機能デモ用 技術 Node.js + Express + JWT 認証 特徴 ステート遷移とエラー条件を含む ステート遷移 注文作成 → 支払い → 発送 (created) (paid) (shipped) フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 今回のデモ対象：注文管理API Copyright © 2026 mabl Inc. 5
6. 認証・ユーティリティ（認証不要） エンドポイント 用途 POST /login JWT トークン取得 POST /api/reset データ全削除 POST /api/seed デモデータ作成 注文管理（要認証） エンドポイント 用途 成功条件 POST /api/orders 注文作成 - GET /api/orders/:id 注文取得 - POST /api/orders/:id/pay 支払い status = created POST /api/orders/:id/ship 発送 status = paid フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 API エンドポイント一覧 Copyright © 2026 mabl Inc. 6
7. UI テストの前提条件をAPI で準備 1. POST /api/reset → データクリア 2. POST /login → トークン取得 3. POST /api/orders → 注文作成 4. POST /api/orders/1/pay → 支払い完了状態に メリット: UI 操作不要で高速 確実に目的の状態を作成 テストの独立性を確保 フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 API テストによるデータセットアップ Copyright © 2026 mabl Inc. 7
8. テストシナリオ例 ステップ 実行方法 目的 1. データ準備 API /reset, /seed 2. ログイン UI 認証フロー確認 3. 注文確認 API GET /api/orders/1 4. 支払い UI 支払いボタンクリック 5. 結果検証 API status = paid を確認 6. 発送 UI 発送処理 7. 最終検証 API status = shipped を確認 ポイント: UI は「ユーザー操作」 、API は「データ検証」 フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 UI + API を組み合わせたE2E 検証 Copyright © 2026 mabl Inc. 8
9. API テストで検証すべきエラーケース エンドポイント エラー条件 ステータス /login 認証失敗 401 /api/orders 認証なし 401 /api/orders 無効なトークン 401 /api/orders/:id 注文が存在しない 404 /api/orders/:id/pay 既に支払い済み 400 /api/orders/:id/ship 未払い状態 400 UI では困難なエラーパスもAPI なら容易にテスト可能 フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 エラーパスの網羅的テスト Copyright © 2026 mabl Inc. 9
10. テストピラミッドの考え方 /\ / \ E2E (UI) ← 少数・重要フロー /----\ / \ 統合 ← UI + API組み合わせ /--------\ / \ API ← 多数・高速・安定 /______________\ 戦略: API 層: エラーパス、境界値、認証を網羅 統合層: UI 操作 + API 検証の組み合わせ E2E 層: クリティカルパスのみ フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 テスト設計と保守コストの削減 Copyright © 2026 mabl Inc. 10
11. mabl Trainer （GUI ） 1. API Request ステップを追加 2. HTTP メソッド、URL 、ヘッダー、ボディを設定 3. レスポンスの検証を追加 特徴: ビジュアルエディタで直感的に操作 リクエスト/ レスポンスをリアルタイムで確認 再利用可能な変数とアサーションを設定 フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 mabl でのAPI テスト作成（方法1 ） Copyright © 2026 mabl Inc. 11
12. 自然言語による指示 + API 仕様 【OpenAPI仕様書を添付】openapi.yaml 【プロンプト例】 以下のテストシナリオを実装してください: 1. APIにログインしてトークンを取得 2. 注文を作成 3. 注文取得APIで注文ID、商品名、注文ステータス正しく取得できることを確認 4. 先に発送処理を実行し、400エラーになることを確認 5. 支払い処理を実行し、ステータスがpaidになることを確認 6. 発送処理を実行し、ステータスがshippedになることを確認 特徴: API 仕様書からテストを自動生成 フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 mabl でのAPI テスト作成（方法2 ） Copyright © 2026 mabl Inc. 12
13. レスポンス検証の例 // POST /api/orders のレスポンス { "order": { "id": "1", "item": "テスト商品", "status": "created", "createdAt": "2026-02-12T00:00:00.000Z" } } アサーション ステータスコード: 200, 400, 401, 404 プロパティ存在: order , token , message 値の検証: status === "paid" 型チェック: id が文字列であること フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 API テストの検証ポイント Copyright © 2026 mabl Inc. 13
14. mabl でのワークフロー フェーズ 実行方法 操作内容 セットアップ API POST /api/reset - データ初期化 API POST /login - トークン取得 API POST /api/orders - 注文作成 UI 操作 UI 注文管理画面を開く UI 支払いボタンをクリック 検証 API GET /api/orders/1 - status 確認 API Assert: status === "paid" フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 UI + API テストの統合実行 Copyright © 2026 mabl Inc. 14
15. UI + API 統合テストのポイント 1. データ準備はAPI で: UI 操作より高速・確実 2. 検証もAPI で: レスポンスを直接確認 3. UI は重要フローに集中: ユーザー体験の検証 4. エラーパスはAPI で網羅: 401, 404 などを効率的にテスト 5. トークン管理: 変数に保存して再利用 アンチパターン UI だけで全てをテストしようとする データ準備にUI 操作を使う エラーケースをスキップする フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 ベストプラクティス Copyright © 2026 mabl Inc. 15
16. mabl API テスト vs 単体テスト 観点 mabl API テスト 単体テスト（Jest 等） 対象 本番環境/ ステージング ローカル 速度 秒単位 ミリ秒単位 カバレッジ E2E/ 統合 ユニット 用途 リグレッション 開発中の検証 両方を組み合わせる: 開発中: Jest で高速フィードバック CI/CD: mabl で統合テスト フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 テスト戦略の使い分け Copyright © 2026 mabl Inc. 16
17. 本日のポイント UI テストだけでは不十分: メンテナンスコストが肥大化 API テストで補完: データ準備・エラー検証を効率化 統合戦略: UI は重要フロー、API は網羅性 mabl の活用: GUI/CLI/MCP で柔軟にテスト作成 フルスタックQA = UI + API の統合テスト戦略 フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 まとめ Copyright © 2026 mabl Inc. 17
18. ドキュメント・サンプル リソース URL mabl ドキュメント https://help.mabl.com/ mabl CLI https://help.mabl.com/docs/mabl-cli mabl MCP Server npmjs.com/@anthropics/mcp-server-mabl 注文管理API （本日のデモ） github.com/mfunaki/mabl-order-api サポート: support@mabl.com フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 参考リソース Copyright © 2026 mabl Inc. 18
19. ご清聴ありがとうございました！ フルスタックQA への第一歩：Web UI とAPI テストを統合した品質保証戦略 Copyright © 2026 mabl Inc.