coffee-cart-cwc

Aiden cwc wrote:

測試目的 (Objective)¶

驗證當網站帶入廣告模擬參數 ?ad=1 時，系統是否正確注入模擬廣告腳本，並檢測其對頁面加載指標（FCP、LCP、CLS）造成的影響，確保功能按鈕不因第三方資源延遲而失效。

前置條件 (Preconditions)¶

1. 使用 Chrome 瀏覽器並開啟 Chrome DevTools（進入 Performance 與 Network 分頁）。
2. 將 Network 節流設定為模擬狀態（例如 Fast 4G 或 No throttling）。

測試步驟 (Test Steps)¶

1. 瀏覽器網址列輸入帶有參數之網址：https://coffee-cart.app/?ad=1。
2. 開啟 DevTools 的 Performance 面板，錄製頁面載入過程。
3. 觀察頁面中是否加載廣告模擬資源，並檢視 LCP (Largest Contentful Paint) 與 FCP (First Contentful Paint)。
4. 觀察首頁咖啡卡片排版在廣告腳本載入前後是否產生非預期的版面位移（CLS）。
5. 待頁面完全載入後，嘗試點選加入一杯咖啡（如 Espresso），確認購物車基本互動是否維持正常。

預期結果 (Expected Results)¶

1. 步驟 1-3：頁面成功帶入廣告負載情境，DevTools Network 監控到廣告腳本載入，頁面載入耗時相對正常無參數時有所拉長。
2. 步驟 4：首頁 9 格咖啡卡片佈局維持穩定，未出現嚴重的 Cumulative Layout Shift (CLS) 破版或跑版現象。
3. 步驟 5：廣告腳本不應阻斷（Block）主執行緒的核心互動，點擊咖啡卡片仍可正常加入購物車與計算金額。

實際測試結果 (Actual Results)¶

• 執行狀態：Pass (完全通過 - 成功模擬第三方廣告腳本載入與樣式副作用)
• 嚴重程度：None (符合示範網站刻意設計之測試行為)
• 實際呈現：
  1. 廣告資源成功注入 (Step 1-3)：
     • 帶入 ?ad=1 參數後，首頁頂部成功注入大型橫幅促銷廣告圖塊（內容為「Free 1 bag of coffee beans for purchase over $20!」）。
     • DevTools Network 面板可明確監控到額外的廣告圖片與關聯腳本資源載入，初次繪製時間（FCP/LCP）隨資源下載量增加而有所拉長。
  2. 樣式與字型覆蓋副作用：
     • 廣告腳本同時注入了第三方字型樣式，導致下方所有咖啡品項名稱（如 Espresso、Mocha、Flat White 等）與杯內標籤字型被覆蓋變更為手寫/草寫風格字體（Cursive Font）。
     • 雖然字型樣式被替換，但文字垂直與水平對齊依然維持在容器內部，未發生文字溢出破框現象。
  3. 版面結構維持穩定 (Step 4)：
     • 廣告橫幅插入於頂部導覽列與菜單之間，整體菜單網格平滑下移，首頁咖啡品項維持正常的 3 欄排列，無嚴重的版面破裂或未預期的累積版面位移（CLS）。
  4. 核心互動無阻斷 (Step 5)：
     • 點選任一咖啡品項依然可順利加入購物車，右下角付款總額與頂部購物車計數器即時連動更新，證明第三方廣告載入並未阻斷（Block）瀏覽器主執行緒的核心購買事件。