coffee-cart-cwc

Aiden cwc wrote:

測試目的 (Objective)¶

驗證首頁 9 款咖啡品項的杯身視覺元件（SVG/CSS 圖層）是否精確對應其成分配方，圖層順序、顏色區塊、配方文字標籤皆完整無破圖或對齊偏差。

前置條件 (Preconditions)¶

1. 開啟受測網站首頁：Coffee cart。
2. 確保瀏覽器縮放比例為 100%。

測試步驟 (Test Steps)¶

1. 檢視第 1 列品項（Espresso、Espresso Macchiato、Cappuccino）的杯中液體分層：
   • 檢查 Espresso 是否僅包含底層橘色 espresso。
   • 檢查 Espresso Macchiato 是否包含底層 espresso 與頂層淺綠 milk foam。
   • 檢查 Cappuccino 是否包含 espresso、steamed milk、milk foam 三層。
2. 檢視第 2 列品項（Mocha、Flat White、Americano）：
   • 檢查 Mocha 是否包含 espresso、chocolate syrup、steamed milk、whipped cream 四層。
   • 檢查 Flat White 是否包含 espresso 與上層 steamed milk。
   • 檢查 Americano 是否包含 espresso 與上層藍綠色 water。
3. 檢視第 3 列複雜配方品項（Cafe Latte、Espresso Con Panna、Cafe Breve）：
   • 檢查 Cafe Latte 是否完整呈現 espresso、steamed milk、milk foam 三層。
   • 檢查 Espresso Con Panna 是否完整呈現 espresso、whipped cream 兩層。
   • 檢查 Cafe Breve 是否完整呈現 espresso、steamed milk、steamed cream、milk foam 四層。
4. 檢查各色塊文字標籤（Label）字體是否清晰且垂直居中，無文字被杯框截斷。

預期結果 (Expected Results)¶

1. 9 款咖啡之圖層配方層次與 專案說明 規格完全吻合，杯身無空白透明斷層。
2. SVG/Canvas 渲染正常，色塊邊緣平滑無毛邊破圖。
3. 所有配方文字（如 espresso、steamed milk 等）正確居中顯示在各自色塊內，無溢位或圖文重疊情況。

實際測試結果 (Actual Results)¶

• 執行狀態：Pass (完全通過 - SVG 配方圖層渲染與標籤排版符合預期)
• 嚴重程度：None (無缺陷)
• 實際呈現：
  1. 第 1 列品項分層正確 (Row 1)：
     • Espresso 正確僅渲染單一底層橘色 espresso 色塊。
     • Espresso Macchiato 精準由下至上堆疊 espresso 與頂層淺綠色 milk foam。
     • Cappuccino 依序完整呈現 espresso、steamed milk 與 milk foam 三層結構。
  2. 第 2 列品項分層正確 (Row 2)：
     • Mocha 由下至上完整堆疊 espresso、chocolate syrup、steamed milk 與頂層白色 whipped cream 四層配方。
     • Flat White 呈現底層 espresso 與覆蓋其上的 steamed milk 兩層結構。
     • Americano 清晰呈現底層 espresso 與上方大面積藍綠色 water 層。
  3. 第 3 列品項分層正確 (Row 3)：
     • Cafe Latte 正確呈現 espresso、厚層 steamed milk 與薄層 milk foam。
     • Espresso Con Panna 呈現底層 espresso 與上層 whipped cream。
     • Cafe Breve 依序精準繪製 espresso、steamed milk、steamed cream 與頂層 milk foam 四層。
  4. 向量渲染與排版對齊：全數 9 款咖啡杯身之 SVG 圖層邊緣平滑無鋸齒、色塊無溢出杯框或斷層空白；各層配方名稱（Label）文字均垂直居中並水平置中於各自對應的色塊區間內，未發生字元重疊或截斷情況。