coffee-cart-cwc

Aiden cwc wrote:

測試目的 (Objective)¶

驗證使用者在咖啡杯圖示上按滑鼠右鍵時，系統能攔截瀏覽器預設 Context Menu，改為彈出自訂的加購對話框，並確保對話框中的確認加購（Yes）與取消（No）功能運作正常。

前置條件 (Preconditions)¶

1. 開啟受測網站：Coffee cart。
2. 購物車初始為空（顯示 cart (0) 與 Total: $0.00）。

測試步驟 (Test Steps)¶

1. 將滑鼠移動到「Espresso Macchiato」的咖啡杯圖示區域。
2. 按下滑鼠右鍵（Right-click）。
3. 觀察瀏覽器是否攔截原生選單，並跳出自訂的「Add Espresso Macchiato to the cart?」確認對話框。
4. 點擊對話框內的「Yes」按鈕。
5. 觀察頂部購物車計數器與右下角 Total 總額變化。
6. 再次於任一咖啡杯上按滑鼠右鍵喚出對話框，點擊「No」按鈕關閉對話框。
7. 在杯子圖示以外的空白區域按右鍵，檢視是否保留瀏覽器原生選單。

預期結果 (Expected Results)¶

1. 步驟 2-3：原生右鍵選單被 preventDefault 成功攔截，杯身正中央即時彈出白色矩形對話框，標題為 Add {Coffee Name} to the cart?，附帶 [Yes] 與 [No] 兩個選項。
2. 步驟 4-5：點擊 Yes 後對話框關閉，該品項成功加入購物車，右上角更新為 cart (1)，右下角金額同步累加。
3. 步驟 6：點擊 No 後對話框順暢關閉，購物車品項數與總額維持不變。
4. 步驟 7：在杯身圖示之外的網頁空白區域點擊右鍵，正常彈出瀏覽器原生的右鍵操作選單（如「檢查」、「另存新檔」等）。

實際測試結果 (Actual Results)¶

• 執行狀態：Pass (完全通過 - 右鍵自訂選單攔截與加購分支運作符合預期)
• 嚴重程度：None (無缺陷)
• 實際呈現：
  1. 右鍵事件成功攔截並喚出自訂彈窗 (Step 2-3)：
     • 在咖啡杯圖示上點擊右鍵時，未出現瀏覽器預設選單。
     • 畫面於杯身中央精確彈出自訂對話框，清楚標示 Add Espresso Macchiato to the cart?，並具備 Yes 與 No 按鈕。
  2. 確認加購邏輯正常 (Step 4-5)：
     • 點擊 Yes 按鈕後對話框立即隱藏，Espresso Macchiato 成功寫入購物車資料。
     • 頂部導覽列計數器即時由 cart (0) 遞增為 cart (1)，右下角總額由 $0.00 更新為 $12.00。
  3. 取消關閉邏輯正常 (Step 6)：
     • 再次喚出彈窗並點擊 No 按鈕，對話框順暢關閉，購物車狀態與總金額完全維持原狀，未發生重複扣款或非預期異動。
  4. 原生選單隔離性良好 (Step 7)：
     • 事件監聽範圍嚴格侷限於咖啡杯向量元件，在頁面其他空白處按右鍵依然能正常叫出瀏覽器原生上下文選單。