← Danh sách kịch bản L4 · Tổng quan
wb-stepper-tablet
Target: web-popup | Khổ màn hình: 820×1180 | Đồng hồ đóng băng: 2026-08-02T09:00:00 | TZ: Europe/Berlin
Steps: 4 | Có Expected: 4 | Thiếu Expected: 0
| # | Step | Màn hình | Tổng | Expected |
|---|---|---|---|---|
| 1 | bước 2 ở khổ 820px | wizard:services | 0.00 | ✅ |
| 2 | thêm dịch vụ ở khổ tablet | wizard:services | 5.00 | ✅ |
| 3 | kéo rộng qua 880px | wizard:services | 5.00 | ✅ |
| 4 | thu về đúng 880px | wizard:services | 5.00 | ✅ |
wb-stepper-tablet Step 1 · bước 2 ở khổ 820px
🎯 Expected: Vẫn là nhánh TÁCH: stepper 4 mốc (có "Add-ons") và giỏ nằm ở trang con riêng, y như 390px. 820 ≤ 880 nên tablet đi chung đường với điện thoại.
Panels
Đơn đặt
| Trường | Giá trị |
|---|---|
| Màn hình | wizard:services |
| Tổng tiền | 0.00 |
| Số add-on | 0 |
Thành viên
| Đăng nhập | Chip |
|---|---|
| — | — |
wb-stepper-tablet Step 2 · thêm dịch vụ ở khổ tablet
🎯 Expected: Nút dịch vụ đổi thành Remove, giỏ vẫn ở trang riêng nên không thấy thẻ giỏ trên màn này.
Panels
Đơn đặt
| Trường | Giá trị |
|---|---|
| Màn hình | wizard:services |
| Tổng tiền | 5.00 |
| Số add-on | 0 |
Thành viên
| Đăng nhập | Chip |
|---|---|
| — | — |
wb-stepper-tablet Step 3 · kéo rộng qua 880px
🎯 Expected: Trang tự dựng lại sang nhánh DESKTOP: stepper còn 3 mốc, mất mốc "Add-ons", và khu giỏ #sel-list xuất hiện ngay cạnh danh sách. Dịch vụ đã chọn không mất.
Panels
Đơn đặt
| Mục trong giỏ |
|---|
| French Tip$5.00+ · 15 min Add add-ons |
| Trường | Giá trị |
|---|---|
| Màn hình | wizard:services |
| Tổng tiền | 5.00 |
| Số add-on | 0 |
Thành viên
| Đăng nhập | Chip |
|---|---|
| — | — |
wb-stepper-tablet Step 4 · thu về đúng 880px
🎯 Expected: Quay lại nhánh tách — 880 nằm TRONG khoảng max-width:880px, không phải ngoài. Đây là ô biên hay bị lệch một pixel nhất.
Panels
Đơn đặt
| Trường | Giá trị |
|---|---|
| Màn hình | wizard:services |
| Tổng tiền | 5.00 |
| Số add-on | 0 |
Thành viên
| Đăng nhập | Chip |
|---|---|
| — | — |
Hướng dẫn cho LLM review
Với mỗi step: đọc Expected, đối chiếu với ảnh và bảng Panels, rồi trả lời
KHỚP hoặc LỆCH. Nếu LỆCH, chỉ rõ phần nào của Expected không thấy.
Giới hạn đã biết của ảnh L4: test chạy trong jsdom, không có layout engine, nên mọi vị trí do app tự tính từ kích thước đo được sẽ không đúng. Ảnh này do Chromium dựng lại TỪ DOM dump ở bước sau, nên bố cục CSS tĩnh thì đúng, còn thứ phụ thuộc đo đạc lúc chạy thì không. Đừng báo LỆCH vì lý do bố cục — chỉ xét nội dung, text, trạng thái và sự hiện diện của phần tử.
Font chữ trong ảnh khác bản thật: <link> Google Fonts bị gỡ khi nạp trang để test không đi ra mạng, nên chữ rơi về serif hệ thống. Đây không phải lỗi.