カートの信頼性を担保するWireMockを使ったe2eテスト

2026/8/6 PHPカンファレンス2026 リジェクトコン&アフターイベント 発表資料

Transcript

1. カートの信頼性を担保する WireMockを使った e2eテスト @ykagano 2026/8/6 PHPカンファレンス2026 リジェクトコン&アフターイベント © 2012-2026 BASE, Inc. 1
2. 自己紹介 氏名：加賀野 祐（ykagano） 所属：BASE株式会社 BASE Department Product Division 役割：シニアエンジニア（バックエンド） 趣味：お酒、旅行、キャンプ ykagano 2024年8月にBASE株式会社に入社 その前は以下の開発を経験してきました - 2009年〜：NET CASH - 2012年〜：WebMoney - 2017年〜：Yahoo!ウォレット、PayPay © 2012-2026 BASE, Inc. 2
3. アジェンダ • 外部サービスに接続したe2eテストと、その保守コスト • 外部環境をモック化する • 足りない部分はPHPで書く • 2段構えの運用 © 2012-2026 BASE, Inc. 3
4. 外部サービスに接続した e2eテストと、その保守コスト © 2012-2023 BASE, Inc. 4
5. Playwrightでのe2eテスト test('通常商品をクーポンを適用してのクレジットカード決済で購入する @important @normal', async ({page,}) => { // 通常商品をカートに追加する await addNormalItemToCart(page) _ // 基本の情報を入力をする await inputPersonalInfo(page) _ // クーポンを適用する await applyCoupon(page, 'CAMPAIGN_20PERCENT_OFF') _ // クレジットカード決済を選択して情報を入力し確認画面へ await chooseCreditCardPayment(page) _ // 確認ページで各種金額を確認する await assertAmounts(page, { totalAmount: 80, subTotalAmount: 100, shippingAmount: 0, couponAmount: 20, }) _ // 注文完了をする await completeOrder(page) _ // 購入完了ページに遷移したかを確認する await assertOrderCompleted(page) }) © 2012-2026 BASE, Inc. 左のコードはクレジットカード 決済のシナリオ例 @important @normal などをタグ付けすることで e2eの実行対象を グループ化してます $ yarn test --grep @important 5
6. 広範なe2eテストシナリオ BASEでは商品種別と決済手段が多岐に渡るため、そのパターン分のテストが必要 商品種別 決済手段 全件（53件）実行で @normal（17件）実行で 通常商品 クレジットカード決済 定期便商品 あと払い 4分程度 2分程度 テイクアウト商品 Amazon Pay オプション付き商品 PayPal 予約商品 PayPay 抽選商品 銀行振込 デジタルコンテンツ キャリア決済 コミュニティ限定商品 コンビニ決済 © 2012-2026 BASE, Inc. 6
7. 外部サービスに接続した e2eテスト • 2023年から運用してきました • 当初はGHAで動いてましたが、速度とコストの兼ね合いから昨年Circle CIに移行 Playwright e2e (CircleCI) 決済手段を一通り 実施するシナリオ VPN接続 開発環境 （カート） 3シャード並列で 同時実行 © 2012-2026 BASE, Inc. インターネット 外部サービス サンドボックス リリース前に実行 3分以内に完了が目標値 7
8. しかし、保守コストはそれなりに重い • 外部環境のURL変更に、都度追従 • 外部環境のUI変更で、Playwrightが要素を見失う • 外部環境の応答が遅く、テストがflakyに • 一定回数実行すると、リセットが必要な環境も • 「安定化できませんか？」→「テスト環境なので」 © 2012-2026 BASE, Inc. 8
9. 外部環境をモック化する © 2012-2023 BASE, Inc. 9
10. e2eの安定化に取り組み始める • 安定しない外部環境をモック化すればいいのではないか • これまではモック化しても保守コストを考えると割に合わなかった • 既存をモックに置き換えるという答えのあるものを作るのはAIが得意な領域 • AIがモックを作り保守する前提で設計する • ブラックボックスにはせず、人間が理解できるシンプルな設計を目指す © 2012-2026 BASE, Inc. 10
11. 全部を自前実装はしない → WireMock ❌ 全部アプリで自前実装 ⭕ WireMock を採用 ・外部APIの本数分、実装と保守が必要 ・HTTP APIのモックサーバーOSS（Java製） ・AIで実装・保守コストは下がっているが、レ ビューが必要な状態はなるべく減らしたい ・スタブ定義（JSON）を書くだけで応答を再現 ・自前コードを持たない ＝ レビュー対象を増 やさない 副産物：モック環境は負荷テストにも流用できる © 2012-2026 BASE, Inc. 11
12. Before 外部決済サービス ステージング環境 実SDK・画面読込 フロントエンド あと払い PayPal / Amazon Pay / PayPay 実API呼び出し バックエンド 銀行振込 コンビニ キャリア決済 © 2012-2026 BASE, Inc. 12 12
13. After 外部決済モック ステージング環境 モックSDK・画面読込 モックSDK配信 フロントエンド モックAPI呼び出し フロント画面 バックエンド WireMock © 2012-2026 BASE, Inc. 13 13
14. WireMockでは代替できないものがあった • AES暗号化／復号 • JWS署名の生成・検証 • これらの機能と連携したモック用の決済画面 • WireMockでもJava拡張を書けば技術的には可能 • ただ、PHPチームがJava拡張を保守し続けるのは割に合わない © 2012-2026 BASE, Inc. 14
15. 足りない部分は PHPで書く © 2012-2023 BASE, Inc. 15
16. システム構成： WireMock + PHPモックアプリ スタブ登録 リクエストログ確認 wiremock-hub スタブ管理GUI（自作OSS） nginx Playwright e2e (CircleCI) リクエスト スタブ同期 WireMock 外部APIレスポンス （スタブ定義） プロキシ（後述） PHPアプリ（php-fpm + Slim） AES暗号化・JWS署名 ・モック用画面 © 2012-2026 BASE, Inc. 16
17. WireMockはプロキシにもなれる 同じパスにアクセスする場合、通常nginxの設定でWireMockとPHPアプリのルーティン グが必要ですが、WireMockはスタブ単位でプロキシにもなれるため、WireMockで全て 受けた上で、PHPアプリがレスポンスを返す形にできます nginx /payment/ はスタブが応答 php-fpmはhttpを返せないため、 /payment/* はPHPアプリにプロキシ 実際にはnginxが間に入っている WireMock 外部APIレスポンス （スタブ定義） PHPアプリ（php-fpm + Slim） AES暗号化・JWS署名・モック用画面 nginx.confの追加設定不要。wiremockにスタブ・モックの設定が集約できる © 2012-2026 BASE, Inc. 17
18. WireMockをプロキシにする設定 { "mappings": [{ "name": "Payment Proxy to PHP app", "priority": 10, "request": { "urlPathPattern": "/payment(/.*)?" }, "response": { "transformers": ["response-template"], "proxyBaseUrl": " {{#if (systemValue type='ENVIRONMENT' key='WIREMOCK_SLIM_PROXY_BASE_URL')}} {{systemValue type='ENVIRONMENT' key='WIREMOCK_SLIM_PROXY_BASE_URL'}} {{else}} http://localhost:8081 {{/if}} " } }] } © 2012-2026 BASE, Inc. 18
19. WireMock Hubの紹介 ・WireMock のスタブとインスタンスを一元管理する自作OSS（Apache 2.0） ・プロジェクト単位でスタブ群をまるごと差し替え ・スタブはSQLiteで管理し、Admin REST API 経由で WireMock に同期 https://github.com/ykagano/wiremock-hub © 2012-2026 BASE, Inc. 19
20. WireMockを可視化・スタブ同期する OSS © 2012-2026 BASE, Inc. 20
21. WireMockを可視化・スタブ同期する OSS © 2012-2026 BASE, Inc. 21
22. WireMockを可視化・スタブ同期する OSS © 2012-2026 BASE, Inc. ※例としてwiremock-hub自身のAPIを登録 22
23. 2段構えの運用 © 2012-2023 BASE, Inc. 23
24. モック環境の e2eは、安定して速い • 外部起因のflakyから解放される • ドメイン変更・UI変更への追従が不要に • サンドボックスの応答待ちがない • 外部接続しないため、実行回数・並列数の制約もない © 2012-2026 BASE, Inc. 24
25. モックで毎回、実接続で毎朝チェック モック （リリース前に毎回） 実接続（別環境で毎朝・自動） ・リリース前に毎回実行 ・別環境で毎朝、自動実行 ・接続先がモックのため、速くて確実 ・本物の外部サンドボックスに接続 ・自分たちのコードの品質を検証する ・外部の仕様変更・環境の変化を検知する 速さと安定性はモックで取り、外部との整合は毎朝の実接続で取る © 2012-2026 BASE, Inc. 25
26. まとめ • e2eテストの速さと安定性は、外部依存の切り離しで決まる • WireMockで大半をモック化。表現できない機能・画面はPHPで書く • モックで毎回、実接続でも毎朝、2段構えでカートの信頼性を担保する © 2012-2026 BASE, Inc. 26
27. 以上です BASE社の採用情報： https://binc.jp/jobs ご清聴ありがとうございました！！ © 2012-2026 BASE, Inc. 27