← Danh sách kịch bản L4 · Tổng quan
ap-open-booking-fab-mobile
Target: app | Khổ màn hình: 390×844 | Đồng hồ đóng băng: 2026-08-02T09:00:00 | TZ: Europe/Berlin
Steps: 6 | Có Expected: 6 | Thiếu Expected: 0
| # | Step | Màn hình | Tổng | Expected |
|---|---|---|---|---|
| 1 | mở app ở 390px | portal:overview | 0.00 | ✅ |
| 2 | bấm FAB Book | portal:overview | 0.00 | ✅ |
| 3 | chọn dịch vụ | portal:overview | 5.00 | ✅ |
| 4 | kéo rộng qua 880px để đi tiếp | portal:overview | 5.00 | ✅ |
| 5 | xác nhận đặt lịch | portal:overview | 5.00 | ✅ |
| 6 | bấm Done | portal:bookings | 0.00 | ✅ |
ap-open-booking-fab-mobile Step 1 · mở app ở 390px
🎯 Expected: App mở ở màn Overview, chào Mary Pham. Thanh dưới có nút Book (FAB).
Panels
Đơn đặt
| Trường | Giá trị |
|---|---|
| Màn hình | portal:overview |
| Tổng tiền | 0.00 |
| Số add-on | 0 |
Thành viên
| Đăng nhập | Chip |
|---|---|
| — | — |
Cổng thành viên
| Trường | Giá trị |
|---|---|
| Tên | Mary Pham |
| Hạng | Gold Member |
| Điểm | 1240 |
| Khung nhìn | portal:overview |
| Số voucher | 1 |
ap-open-booking-fab-mobile Step 2 · bấm FAB Book
🎯 Expected: Lớp phủ đặt lịch mở NGAY TRONG app (không rời trang) và wizard đã ở bước 1 với danh tính Mary Pham đổ sẵn: tên và số điện thoại lấy từ tài khoản nên bị khoá readonly. App mặc định giao diện SÁNG nên popup cũng sáng — không có lớp book-dark.
Panels
Đơn đặt
| Trường | Giá trị |
|---|---|
| Tên | Mary Pham |
| SĐT | 0766 345 439 |
| mary.pham@example.com | |
| Ngày | 2026-08-02 |
| Giờ | |
| Số khách | 1 |
| Trường | Giá trị |
|---|---|
| Màn hình | portal:overview |
| Tổng tiền | 0.00 |
| Số add-on | 0 |
Thành viên
| Đăng nhập | Chip |
|---|---|
| — | — |
Cổng thành viên
| Trường | Giá trị |
|---|---|
| Tên | Mary Pham |
| Hạng | Gold Member |
| Điểm | 1240 |
| Khung nhìn | portal:overview |
| Số voucher | 1 |
Lớp phủ đang mở: bookOv
ap-open-booking-fab-mobile Step 3 · chọn dịch vụ
🎯 Expected: Sang bước chọn dịch vụ và thêm được 1 món, tổng 5. Ở 390px giỏ nằm ở trang con riêng.
Panels
Đơn đặt
| Trường | Giá trị |
|---|---|
| Màn hình | portal:overview |
| Tổng tiền | 5.00 |
| Số add-on | 0 |
Thành viên
| Đăng nhập | Chip |
|---|---|
| — | — |
Cổng thành viên
| Trường | Giá trị |
|---|---|
| Tên | Mary Pham |
| Hạng | Gold Member |
| Điểm | 1240 |
| Khung nhìn | portal:overview |
| Số voucher | 1 |
Lớp phủ đang mở: bookOv
ap-open-booking-fab-mobile Step 4 · kéo rộng qua 880px để đi tiếp
🎯 Expected: Wizard tự dựng lại sang nhánh desktop: giỏ nhập lại cùng trang với danh sách, stepper còn 3 mốc. 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 | portal:overview |
| Tổng tiền | 5.00 |
| Số add-on | 0 |
Thành viên
| Đăng nhập | Chip |
|---|---|
| — | — |
Cổng thành viên
| Trường | Giá trị |
|---|---|
| Tên | Mary Pham |
| Hạng | Gold Member |
| Điểm | 1240 |
| Khung nhìn | portal:overview |
| Số voucher | 1 |
Lớp phủ đang mở: bookOv
ap-open-booking-fab-mobile Step 5 · xác nhận đặt lịch
🎯 Expected: Màn Booking Confirmed. Wizard gọi ngược lên app qua onBookSession() để app ghi lại phiên — đây là cầu nối thay cho postMessage của bản web.
Panels
Đơn đặt
| Trường | Giá trị |
|---|---|
| Màn hình | portal:overview |
| Tổng tiền | 5.00 |
| Số add-on | 0 |
Thành viên
| Đăng nhập | Chip |
|---|---|
| — | — |
Cổng thành viên
| Trường | Giá trị |
|---|---|
| Tên | Mary Pham |
| Hạng | Gold Member |
| Điểm | 1240 |
| Khung nhìn | portal:overview |
| Số voucher | 1 |
Lớp phủ đang mở: bookOv
ap-open-booking-fab-mobile Step 6 · bấm Done
🎯 Expected: Lớp phủ đóng và app KHÔNG đứng yên ở Overview: closeBooking() nạp lại dữ liệu rồi chuyển thẳng sang màn Bookings để người dùng thấy lịch vừa đặt.
Panels
Đơn đặt
| Trường | Giá trị |
|---|---|
| Màn hình | portal:bookings |
| Tổng tiền | 0.00 |
| Số add-on | 0 |
Thành viên
| Đăng nhập | Chip |
|---|---|
| — | — |
Cổng thành viên
| Trường | Giá trị |
|---|---|
| Tên | Mary Pham |
| Hạng | Gold Member |
| Điểm | 1240 |
| Khung nhìn | portal:bookings |
| Số voucher | 1 |
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.