Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on.

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

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

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

Avatar for Masahiko Funaki(舟木 将彦)

Masahiko Funaki(舟木 将彦)

February 12, 2026
Tweet

More Decks by Masahiko Funaki(舟木 将彦)

Other Decks in Technology

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 サポート: [email protected] フルスタックQA への第一歩:Web UI とAPI テストを統合した品質保証戦略 参考リソース Copyright © 2026 mabl Inc. 18