# CHECKLIST CROSS-BROWSER TESTING
> **📋 ĐÂY LÀ TEMPLATE MẪU** — Sao chép và điều chỉnh theo dự án của bạn.

---

## 🧭 HƯỚNG DẪN SỬ DỤNG

| Ký hiệu | Ý nghĩa |
|---------|---------|
| ✅ | Passed — Hoạt động đúng, không có vấn đề |
| ❌ | Failed — Có lỗi, cần sửa |
| ⚠️ | Warning — Hoạt động nhưng có sai lệch nhỏ |
| ➖ | N/A — Không áp dụng cho trình duyệt/tính năng này |
| 🔄 | In Progress — Đang kiểm tra |

**Cách dùng:**
1. Điền tên dự án, ngày kiểm tra, phiên bản trình duyệt vào phần thông tin bên dưới.
2. Với mỗi mục, ghi ký hiệu tương ứng vào cột trình duyệt.
3. Ghi chú lại lỗi cụ thể, số issue hoặc screenshot reference vào cột **Ghi chú**.
4. Ưu tiên xử lý các mục ❌ trước, sau đó đến ⚠️.

---

## 📌 THÔNG TIN KIỂM THỬ

| Trường | Nội dung |
|--------|---------|
| **Tên dự án** | _(điền tên dự án)_ |
| **URL kiểm tra** | _(điền URL)_ |
| **Ngày kiểm tra** | _(DD/MM/YYYY)_ |
| **Người kiểm tra** | _(tên QA/tester)_ |
| **Chrome version** | _(vd: 125.0)_ |
| **Firefox version** | _(vd: 126.0)_ |
| **Safari version** | _(vd: 17.4)_ |
| **Edge version** | _(vd: 125.0)_ |

---

## 1. 🖼️ LAYOUT VÀ GIAO DIỆN

| # | Mục kiểm tra | Chrome | Firefox | Safari | Edge | Ghi chú |
|---|-------------|:------:|:-------:|:------:|:----:|---------|
| 1.1 | **Alignment — Căn chỉnh bố cục** Kiểm tra các phần tử (header, sidebar, footer, card) có được căn chỉnh đúng vị trí, không bị lệch trái/phải/giữa so với thiết kế gốc | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: sidebar lệch 2px trên Safari — issue #12)_ |
| 1.2 | **Responsive — Giao diện đa thiết bị** Kiểm tra layout thay đổi chính xác tại các breakpoint: mobile (320px, 375px), tablet (768px), desktop (1280px, 1440px) | 🔄 | 🔄 | 🔄 | 🔄 | _(ghi lại breakpoint bị lỗi nếu có)_ |
| 1.3 | **Overflow — Tràn nội dung** Kiểm tra text dài, ảnh lớn, bảng dữ liệu nhiều cột không bị tràn ra ngoài container; `overflow: hidden/scroll` hoạt động đúng | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: bảng tràn ngang trên Firefox mobile)_ |
| 1.4 | **Spacing — Khoảng cách margin/padding** Kiểm tra `margin`, `padding`, `gap` được render đồng nhất; không có khoảng trắng thừa hoặc phần tử dính vào nhau bất thường | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: margin-bottom của button khác nhau giữa Chrome và FF)_ |
| 1.5 | **Image Load — Tải và hiển thị hình ảnh** Kiểm tra ảnh tải đúng, không bị vỡ tỉ lệ (`object-fit`), lazy loading hoạt động, ảnh WebP/AVIF có fallback phù hợp | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: WebP không hiển thị trên Safari < 14 — cần fallback)_ |
| 1.6 | **Z-index — Thứ tự xếp lớp** Kiểm tra modal, tooltip, dropdown, sticky header không bị che khuất hoặc đè lên nhau sai thứ tự trên các trình duyệt | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: tooltip bị header đè trên Edge)_ |
| 1.7 | **Flexbox / CSS Grid — Layout hiện đại** Kiểm tra các grid/flex container hiển thị đúng số cột, wrap chính xác, `gap`/`align-items`/`justify-content` nhất quán | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: grid-gap không nhận giá trị trên Safari cũ — dùng gap)_ |
| 1.8 | **Shadow / Border-radius — Hiệu ứng bo viền và đổ bóng** Kiểm tra `box-shadow`, `drop-shadow`, `border-radius` render mượt, không bị cứng cạnh hoặc mất hiệu ứng | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: border-radius bị méo trên một số thẻ img trên Firefox)_ |

**Tổng kết nhóm 1:**
- ✅ Passed: `___` mục
- ❌ Failed: `___` mục
- ⚠️ Warning: `___` mục

---

## 2. 🔤 FONT RENDERING

| # | Mục kiểm tra | Chrome | Firefox | Safari | Edge | Ghi chú |
|---|-------------|:------:|:-------:|:------:|:----:|---------|
| 2.1 | **Font Load — Tải font chữ** Kiểm tra custom font (Google Fonts, self-hosted) tải đúng, không bị FOUT (Flash of Unstyled Text) hoặc FOIT (Flash of Invisible Text); fallback font hợp lý | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: font Roboto tải chậm trên Safari, nên dùng font-display: swap)_ |
| 2.2 | **Font-weight — Độ đậm của chữ** Kiểm tra các mức font-weight (300, 400, 500, 600, 700, 900) render đúng trọng lượng, không bị trình duyệt tự động thay thế bằng giá trị gần nhất | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: font-weight: 600 bị render thành 700 trên macOS Safari)_ |
| 2.3 | **Font-size — Kích thước chữ** Kiểm tra kích thước chữ nhất quán giữa các trình duyệt, đặc biệt với đơn vị `rem`/`em`; kiểm tra zoom level 100%, 125%, 150% không phá vỡ layout | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: font-size input bị Safari tự scale lên 16px để tránh zoom)_ |
| 2.4 | **Line-height — Chiều cao dòng chữ** Kiểm tra `line-height` nhất quán, text nhiều dòng không bị chồng lên nhau hoặc khoảng cách quá rộng, đặc biệt trong các component card, button, badge | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: line-height trong button bị chênh lệch 1-2px giữa Chrome và FF)_ |
| 2.5 | **Special Characters — Ký tự đặc biệt** Kiểm tra hiển thị đúng ký tự tiếng Việt (dấu thanh điệu), ký tự Unicode (emoji, icon font), ký hiệu đặc biệt (&, ©, €, →) không bị vỡ encoding | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: emoji bị vỡ trên một số phiên bản Firefox cũ hơn)_ |

**Tổng kết nhóm 2:**
- ✅ Passed: `___` mục
- ❌ Failed: `___` mục
- ⚠️ Warning: `___` mục

---

## 3. ⚙️ FUNCTIONALITY

| # | Mục kiểm tra | Chrome | Firefox | Safari | Edge | Ghi chú |
|---|-------------|:------:|:-------:|:------:|:----:|---------|
| 3.1 | **Form Submit — Gửi biểu mẫu** Kiểm tra form submit bằng cả button click và phím Enter; dữ liệu gửi đi chính xác; redirect/response sau submit hoạt động đúng trên tất cả trình duyệt | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: form submit bằng Enter không hoạt động trong Safari với một số input type)_ |
| 3.2 | **Validation — Kiểm tra dữ liệu đầu vào** Kiểm tra HTML5 native validation (`required`, `pattern`, `minlength`, `type="email"`/`"tel"`) và custom JS validation hiển thị thông báo lỗi đúng vị trí, đúng style | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: tooltip lỗi của Firefox có style mặc định khác, cần override CSS)_ |
| 3.3 | **JavaScript Events — Sự kiện JavaScript** Kiểm tra các event handler (`click`, `hover`, `focus`, `blur`, `input`, `change`, `resize`, `scroll`) hoạt động chính xác; kiểm tra console không có JS error | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: event `input` trên IE/Edge cũ cần polyfill — ghi rõ version)_ |
| 3.4 | **Dropdown / Modal — Menu thả xuống và hộp thoại** Kiểm tra dropdown mở/đóng đúng, đóng khi click ngoài; modal hiển thị overlay, focus trap hoạt động, đóng bằng Escape key; không bị kẹt scroll nền | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: modal không lock scroll nền trên iOS Safari — cần xử lý riêng)_ |
| 3.5 | **File Upload — Tải tệp lên** Kiểm tra input file chọn đơn/nhiều file; drag & drop hoạt động; hiển thị tên file đã chọn; kiểm tra giới hạn loại file (`accept`) và dung lượng; preview ảnh trước upload | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: drag & drop không hoạt động trên Safari iOS — cần fallback UI)_ |
| 3.6 | **Scroll — Cuộn trang và cuộn nội dung** Kiểm tra smooth scroll (`scroll-behavior: smooth`), infinite scroll, scroll to anchor, custom scrollbar CSS; kiểm tra `position: sticky` hoạt động đúng | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: scroll-behavior: smooth không hỗ trợ trên Safari < 15.4 — cần JS polyfill)_ |
| 3.7 | **Keyboard Navigation — Điều hướng bàn phím** Kiểm tra Tab/Shift+Tab focus đúng thứ tự, Enter/Space kích hoạt button/link, phím mũi tên trong dropdown/menu, focus indicator hiển thị rõ ràng (accessibility) | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: focus outline bị Safari ẩn theo mặc định — cần CSS :focus-visible)_ |
| 3.8 | **Links — Liên kết điều hướng** Kiểm tra internal link, external link (mở tab mới), anchor link (#section), router link (SPA); trạng thái `:visited`, `:hover`, `:active` hiển thị đúng style | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: color :visited bị một số trình duyệt giới hạn vì lý do bảo mật)_ |

**Tổng kết nhóm 3:**
- ✅ Passed: `___` mục
- ❌ Failed: `___` mục
- ⚠️ Warning: `___` mục

---

## 4. 🚀 PERFORMANCE

| # | Mục kiểm tra | Chrome | Firefox | Safari | Edge | Ghi chú |
|---|-------------|:------:|:-------:|:------:|:----:|---------|
| 4.1 | **Page Load Time — Thời gian tải trang** Đo LCP (Largest Contentful Paint) < 2.5s, FCP (First Contentful Paint) < 1.8s, TTI (Time to Interactive) < 3.8s bằng DevTools Network tab hoặc Lighthouse | 🔄 | 🔄 | 🔄 | 🔄 | _(ghi số liệu thực tế: vd Chrome LCP: 1.9s / Safari LCP: 2.8s ⚠️)_ |
| 4.2 | **Animation Smoothness — Độ mượt của animation** Kiểm tra CSS transition, keyframe animation, JS animation chạy ổn định ở 60fps; không bị giật (jank) hay lag; ưu tiên dùng `transform`/`opacity` thay `top`/`left` | 🔄 | 🔄 | 🔄 | 🔄 | _(dùng DevTools Performance tab để đo FPS; vd: animation card bị drop xuống 40fps trên Firefox)_ |
| 4.3 | **Scroll Performance — Hiệu năng cuộn trang** Kiểm tra trang cuộn mượt không bị choppiness, đặc biệt khi có ảnh, video, animation trong viewport; kiểm tra `will-change`, `contain` CSS đã được áp dụng đúng chỗ | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: scroll bị jank trên Safari khi có nhiều `box-shadow` phức tạp trong list)_ |
| 4.4 | **Memory Usage — Mức sử dụng bộ nhớ** Kiểm tra memory không tăng liên tục (memory leak) sau khi điều hướng nhiều trang, mở/đóng modal nhiều lần, thao tác lặp lại; dùng DevTools Memory tab để quan sát heap snapshot | 🔄 | 🔄 | 🔄 | 🔄 | _(vd: heap tăng từ 45MB lên 120MB sau 10 lần mở modal → kiểm tra event listener chưa được remove)_ |

**Tổng kết nhóm 4:**
- ✅ Passed: `___` mục
- ❌ Failed: `___` mục
- ⚠️ Warning: `___` mục

---

## 📊 TỔNG KẾT TOÀN BỘ

| Nhóm | Tổng mục | ✅ Passed | ❌ Failed | ⚠️ Warning | Tỉ lệ pass |
|------|:--------:|:--------:|:--------:|:---------:|:-----------:|
| 1. Layout và giao diện | 8 | `___` | `___` | `___` | `___%` |
| 2. Font rendering | 5 | `___` | `___` | `___` | `___%` |
| 3. Functionality | 8 | `___` | `___` | `___` | `___%` |
| 4. Performance | 4 | `___` | `___` | `___` | `___%` |
| **Tổng cộng** | **25** | `___` | `___` | `___` | `___%` |

---

## 🐛 DANH SÁCH LỖI CẦN XỬ LÝ

| # | Mục | Trình duyệt | Mô tả lỗi | Mức độ | Trạng thái | Người xử lý |
|---|-----|------------|-----------|:------:|:----------:|------------|
| B01 | _(vd: 1.5)_ | _(vd: Safari)_ | _(mô tả chi tiết lỗi)_ | 🔴 High | Open | _(tên)_ |
| B02 | | | | 🟡 Medium | | |
| B03 | | | | 🟢 Low | | |

> **Mức độ lỗi:** 🔴 High — ảnh hưởng nghiêm trọng đến chức năng | 🟡 Medium — ảnh hưởng trải nghiệm | 🟢 Low — lỗi thẩm mỹ nhỏ

---

## ✏️ GHI CHÚ THÊM

```
Ghi chú môi trường kiểm tra:
- OS: _______________
- Màn hình/độ phân giải: _______________
- Kết nối mạng: _______________
- Thiết bị thực tế đã test: _______________

Ghi chú bổ sung:
_______________________________________________
_______________________________________________
```

---
*Template version 1.0 — Cập nhật theo đặc thù dự án khi cần thiết.*