coffee-cart-cwc

Aiden cwc wrote:

測試目的 (Objective)¶

驗證網站在不同螢幕寬度（Desktop、Tablet、Mobile）下之格線排版自我調適能力，並確保行動端觸控模式下，桌面專屬的 Hover 預覽不會造成介面卡死或操作衝突。

前置條件 (Preconditions)¶

1. 開啟受測網站：Coffee cart。
2. 開啟 Chrome DevTools 並切換至「Device Mode」（設備模擬工具）。

測試步驟 (Test Steps)¶

1. 桌面端情境 (1200px 以上)：檢視首頁菜單排版。
2. 平板端情境 (768px - 1024px)：將視窗寬度縮放至 768px（如 iPad Mini 視圖）。
3. 手機端情境 (375px - 414px)：切換至 iPhone SE / 12 Pro 視圖（375px 寬度）。
4. 在手機端環境下將購物車加入 1 件商品，觀察右下角 Total 付款按鈕。
5. 在手機模擬器以「Touch / Tap」輕觸 Total 按鈕，觀察是否出現 Hover 殘留或直接進入結帳/購物車。

預期結果 (Expected Results)¶

1. 步驟 1（Desktop）：首頁 9 款商品呈現標準 3 欄 x 3 列（3x3 Grid）排版。
2. 步驟 2（Tablet）：排版平滑折疊為 2 欄，卡片間距均勻，字級正常。
3. 步驟 3（Mobile）：排版自適應為單欄（1 Column）垂直排列，頁面橫向（X軸）無出現破版滾動條。
4. 步驟 4-5：在觸控設備模式下，停用桌面端專屬的「滑鼠懸停預覽浮層」，點擊按鈕直接開啟付款彈窗或導向購物車，無點擊延遲或介面凍結。

實際測試結果 (Actual Results)¶

• 執行狀態：Pass (完全通過 - 響應式佈局與觸控互動符合預期)
• 嚴重程度：None (無缺陷)
• 實際呈現：
  1. 桌面端排版清晰流暢 (Desktop >= 1200px)：首頁 9 款咖啡品項完整呈現為 3 欄 x 3 列（3x3 Grid）格線排版，卡片間距均勻且圖文對齊無偏差。
  2. 平板端平滑自適應 (Tablet 768px - 1024px)：調整視窗寬度至 768px 時，格線佈局無縫折疊為 2 欄排列，卡片內部元件等比縮放，文字與按鈕維持良好可讀性。
  3. 行動端單欄展示正常 (Mobile 375px - 414px)：切換至手機視圖（375px）時，頁面自動切換為單欄（1 Column）垂直排列，整體寬度完全貼合視窗，未出現橫向滾動條（No Horizontal Overflow），版面無破版位移。
  4. 觸控模式降級與點擊互動正常 (Touch Behavior)：在手機模擬模式下加入商品後，右下角 Total 按鈕點擊反饋即時，桌面端專屬的滑鼠懸停（Hover）預覽浮層被正確停用，點擊即直接觸發付款 Modal 彈窗，無懸停狀態殘留或介面凍結卡死現象。