coffee-cart-cwc

Aiden cwc wrote:

測試目的 (Objective)¶

驗證使用者在已選購商品的情境下，執行頁面重新整理、點擊外鏈再返回，或使用瀏覽器上一頁/下一頁時，購物車的暫存狀態與品項數量是否能正常維持。

前置條件 (Preconditions)¶

1. 開啟受測網站：Coffee cart。
2. 加入 2 杯咖啡（例如 Espresso $10.00 + Flat White $18.00，總計 $28.00）。

測試步驟 (Test Steps)¶

1. 在首頁按下瀏覽器重新整理按鈕（F5 / Ctrl+R）。
2. 檢視重新整理後，導覽列計數器與右下角 Total 金額是否仍為 cart (2) 與 $28.00。
3. 點擊頂部導覽列切換至 github 說明頁，再點擊導覽列切換回 menu 頁面。
4. 點擊導覽列上的外部鏈結（如外部 repository jecfish/coffee-cart）跳出站點，再點擊瀏覽器「上一頁（Back）」返回。
5. 檢視此時購物車狀態是否依然正確無誤。

預期結果 (Expected Results)¶

1. 步驟 1-2：頁面重新加載後，應用程式狀態維持（若有實作 LocalStorage 快取），購物車未被無故重置為 0。
2. 步驟 3：在站內路由切換（/menu <-> /cart <-> /github）過程中，購物車狀態全程無縫保留。
3. 步驟 4-5：使用瀏覽器歷史紀錄返回站點時，頁面能精準回復跳轉前的狀態，無資料遺失或空白狀況。

實際測試結果 (Actual Results)¶

• 執行狀態：Fail (部分未通過 - 缺乏客戶端持久化儲存)

• 嚴重程度：Medium (使用者體驗缺陷 / 狀態遺失)

• 實際呈現：

  1. 重新載入導致資料歸零 (F5 / Reload)：在購物車已加入商品的情境下，按下瀏覽器重新整理（F5 / Ctrl+R），頁面重新載入後購物車立即被清空重置，導覽列回到 cart (0)，右下角金額歸零為 Total: $0.00，未達成預期。
  2. 站內 SPA 路由切換正常：點擊頂部導覽列於 /menu、/cart 與 /github 之間來回切換時，購物車品項數量與累計金額均能全程無縫保留，表現符合預期。
  3. 瀏覽器歷史紀錄導航正常 (Back/Forward)：點擊外部連結跳轉至 GitHub 倉庫後，點擊瀏覽器「上一頁」返回本站時，受惠於瀏覽器的往返快取（BFCache），能正常復原跳轉前的商品清單與金額，未發生資料空白遺失。

• 原因分析：

  1. 狀態僅儲存於執行階段記憶體 (In-Memory State Only)：
     應用程式的購物車狀態（Cart State）僅維護於前端框架（如 Vue / Vuex / Pinia）的記憶體變數中，因此在單頁應用（SPA）的生命週期內進行路由切換不會遺失資料。
  2. 缺少客戶端持久化同步機制 (No Web Storage Persistence)：
     系統未將購物車資料同步序列化至瀏覽器的 localStorage 或 sessionStorage，亦未實作狀態持久化外掛（如 vuex-persistedstate）。一旦發生整頁重新整理（Full Page Reload），JavaScript 執行環境被完全重置，所有記憶體內的購物車資料便會直接丟失。