coffee-cart-cwc

Aiden cwc wrote:

測試目的 (Objective)¶

驗證使用者點擊結帳按鈕後能正確呼叫付款表單 Modal，完成資訊填寫並提交後能接收交易成功反饋，且購物車完成結帳後應自動重置清空。

前置條件 (Preconditions)¶

1. 開啟受測網站：Coffee cart。
2. 購物車內已有至少 1 件商品（如 Americano $7.00）。

測試步驟 (Test Steps)¶

1. 點擊右下角 Total: $7.00 按鈕（或進入 /cart 頁面點擊Total: $7.00按鈕）。
2. 檢查是否彈出付款資訊輸入對話框（Payment Details Modal）。
3. 測試邊界檢查：不填寫必填欄位直接點擊確認付款按鈕，觀察表單驗證提示。
4. 輸入有效的測試資訊（如 Name: Test User，Email: test@example.com）。
5. 點擊提交付款（Submit）。
6. 觀察交易完成後的成功提示訊息。
7. 檢查結帳後全站的購物車狀態與總金額。

預期結果 (Expected Results)¶

1. 步驟 2：付款彈窗正常彈出並鎖定背景滾動，清楚顯示應付總額（$7.00）。
2. 步驟 3：若未輸入必填資訊，欄位出現 HTML5 原生或自訂的警告提示，無法直接提交。
3. 步驟 5-6：提交後彈窗關閉並且頁面底下跳出成功訊息（Thanks for your purchase. Please check your email for payment.），系統無 JavaScript 異常。
4. 步驟 7：結帳完成後，購物車資料被完全重置：
   • 頂部導覽列回復為 cart (0)。
   • 右下角金額回復為 Total: $0.00。
   • 進入 /cart 頁面顯示 No coffee, go add some.。

實際測試結果 (Actual Results)¶

• 執行狀態：Pass (完全通過 - 結帳付款表單流程、表單驗證與狀態重置皆符合預期)
• 嚴重程度：None (無缺陷)
• 實際呈現：
  1. 付款彈窗成功喚出 (Step 1-2)：
     • 在首頁點選右下角 Total 按鈕（或進入 /cart 頁面點選付款總額按鈕）時，頁面順暢彈出付款資訊輸入視窗（Payment Details Modal）。
     • 彈窗背景鎖定良好，彈窗內部清晰列出對應結帳金額（$7.00）與輸入欄位（Name、Email 及相關選填選項）。
  2. 必填欄位防護驗證生效 (Step 3)：
     • 未填寫姓名或 Email 時直接點選 Submit 按鈕，系統成功觸發瀏覽器表單校驗攔截，阻止無效表單提交，並將焦點自動鎖定在未填寫的必填欄位跳出填寫提示。
  3. 付款成功反饋與彈窗收合 (Step 4-6)：
     • 輸入有效的姓名與 Email 測試資訊後點擊 Submit，付款 Modal 順暢關閉。
     • 頁面下方即時彈出綠色提示訊息區塊（Snackbar / Toast），正確顯示購買成功回饋文字：Thanks for your purchase. Please check your email for payment.。
     • 整個提交流程中 DevTools Console 維持乾淨，無任何未捕獲之 JavaScript 例外錯誤。
  4. 全站購物車狀態徹底重置 (Step 7)：
     • 結帳完成後，前端狀態變數精準重置。
     • 頂部導覽列計數器即刻回復為 cart (0)。
     • 右下角結帳總額回復為 Total: $0.00。
     • 點進 /cart 頁面檢視，商品清單已清空並正確回退顯示空狀態文字：No coffee, go add some.。