# Checklist Test Responsive Website trên Multi-Browser
## Dành cho Developer Việt Nam

> **Phiên bản:** 1.0 | **Cập nhật:** 2025 | **Tác giả:** Dành cho dev team VN

---

## 📋 Mục lục

- [1. Setup Môi Trường](#1-setup-môi-trường)
- [2. Bảng Viewport Test](#2-bảng-viewport-test)
- [3. Checklist 5 Điểm Kiểm Tra Mỗi Browser](#3-checklist-5-điểm-kiểm-tra-mỗi-browser)
- [4. Ghi Chú Manifest V3 & uBlock Origin](#4-ghi-chú-manifest-v3--ublock-origin)
- [5. Playwright Automation](#5-playwright-automation)

---

## 1. Setup Môi Trường

### 1.1 Cài đặt Browsers

#### 🟡 Google Chrome
- [ ] Tải Chrome Stable từ [chrome.google.com](https://www.google.com/chrome/)
- [ ] Tải Chrome Beta (test tính năng mới trước release)
- [ ] Cài đặt Chrome Canary (bleeding edge, debug sớm)
- [ ] Kiểm tra version: `chrome://version/` — yêu cầu tối thiểu **Chrome 110+**
- [ ] Bật flags cần thiết: `chrome://flags/#enable-experimental-web-platform-features`

#### 🦊 Mozilla Firefox
- [ ] Tải Firefox Release từ [mozilla.org/vi/firefox](https://www.mozilla.org/vi/firefox/)
- [ ] Tải Firefox Developer Edition (có devtools nâng cao)
- [ ] Tải Firefox Nightly (test CSS mới nhất)
- [ ] Kiểm tra version: Yêu cầu tối thiểu **Firefox 109+**
- [ ] Bật `about:config` → tìm `layout.css.container-queries.enabled` → set `true`

#### 🐸 Cốc Cốc
- [ ] Tải Cốc Cốc từ [coccoc.com](https://coccoc.com/browser)
- [ ] Kiểm tra Chromium engine version: `coccoc://version/`
- [ ] Lưu ý: Cốc Cốc dùng **Chromium fork** — test đặc biệt font tiếng Việt
- [ ] Kiểm tra tính năng download tích hợp không ảnh hưởng UX
- [ ] Test trang với **quảng cáo** vì Cốc Cốc có ad blocker built-in

#### 🔵 Microsoft Edge
- [ ] Tải Edge từ [microsoft.com/edge](https://www.microsoft.com/edge)
- [ ] Kiểm tra version: Yêu cầu tối thiểu **Edge 110+** (Chromium-based)
- [ ] Bật IE Compatibility Mode nếu cần test legacy: `edge://compat/`
- [ ] Kiểm tra Collections và Sidebar không chặn layout
- [ ] Test chế độ **InPrivate** (tương đương Incognito)

#### 📱 Mobile Browsers (Optional nhưng Khuyến nghị)
- [ ] Cài Android Emulator qua Android Studio hoặc dùng thiết bị thật
- [ ] Cài Safari trên máy Mac/iOS thật (hoặc dùng BrowserStack)
- [ ] Cài Samsung Internet trên thiết bị Android Samsung

---

### 1.2 Cài đặt Extensions Cần Thiết

#### Extensions cho Chrome / Edge / Cốc Cốc (Chromium-based)

| Extension | Mục đích | Link |
|-----------|----------|------|
| **React DevTools** | Debug React app | Chrome Web Store |
| **Vue DevTools** | Debug Vue app | Chrome Web Store |
| **Redux DevTools** | Debug state management | Chrome Web Store |
| **Lighthouse** | Audit performance | Built-in Chrome |
| **ColorZilla** | Pick màu, test contrast | Chrome Web Store |
| **Wappalyzer** | Detect tech stack của competitor | Chrome Web Store |
| **JSON Viewer** | Format JSON response | Chrome Web Store |
| **axe DevTools** | Accessibility testing | Chrome Web Store |

- [ ] Cài **React DevTools** (nếu dùng React)
- [ ] Cài **Vue DevTools** (nếu dùng Vue)
- [ ] Cài **Wappalyzer** — phân tích tech stack
- [ ] Cài **ColorZilla** — kiểm tra màu sắc/contrast
- [ ] Cài **axe DevTools** — test accessibility (WCAG)
- [ ] Cài **JSON Viewer** — debug API response
- [ ] Cài **ModHeader** — thêm custom headers khi test
- [ ] Cài **EditThisCookie** — test cookie behavior

#### Extensions cho Firefox

- [ ] Cài **Firefox Multi-Account Containers** — test multi-session
- [ ] Cài **React DevTools** (Firefox version)
- [ ] Cài **axe DevTools** (Firefox version)
- [ ] Cài **ColorZilla** (Firefox version)
- [ ] Cài **uBlock Origin** (xem ghi chú Section 4)

---

### 1.3 Cấu hình DevTools

#### Chrome DevTools
- [ ] Mở DevTools: `F12` hoặc `Ctrl+Shift+I`
- [ ] Bật **Preserve log** trong Network tab (giữ log khi navigate)
- [ ] Bật **Disable cache** trong Network tab khi đang test
- [ ] Cấu hình **Device Toolbar**: `Ctrl+Shift+M`
- [ ] Thêm custom devices vào Device Toolbar (xem Section 2)
- [ ] Bật **CSS Overview** trong More tools
- [ ] Cài đặt **Workspace** để sync file local với DevTools

#### Firefox DevTools
- [ ] Mở DevTools: `F12`
- [ ] Bật **Responsive Design Mode**: `Ctrl+Shift+M`
- [ ] Kiểm tra **CSS Grid Inspector** — Firefox có inspector tốt nhất
- [ ] Bật **Browser Console**: `Ctrl+Shift+J` — xem tất cả browser errors
- [ ] Cấu hình **Performance Monitor** trong More Tools

---

### 1.4 Cài đặt Tools Bổ Sung

- [ ] Cài **Node.js** v18+ và **npm** (cần cho Playwright)
- [ ] Cài **Playwright**: `npm init playwright@latest`
- [ ] Cài **BrowserSync** để live reload: `npm i -g browser-sync`
- [ ] Cài **ngrok** để test trên thiết bị thật: `npm i -g ngrok`
- [ ] Tài khoản **BrowserStack** hoặc **LambdaTest** (test cross-browser trả phí)
- [ ] Cài **Responsively App** (free tool xem multi-viewport cùng lúc)

```bash
# Cài đặt nhanh tất cả tools cần thiết
npm init playwright@latest
npm install -g browser-sync
npm install -g ngrok

# Cài Playwright browsers
npx playwright install chromium firefox webkit
npx playwright install-deps
```

---

## 2. Bảng Viewport Test

> **Hướng dẫn:** Dùng bảng này để xác định viewport cần test và browser ưu tiên cho từng kích thước màn hình phổ biến tại Việt Nam.

### 2.1 Bảng Viewport Chính

| Viewport | Phân loại | Thiết bị Tương Ứng Phổ Biến tại VN | Browser Ưu Tiên | Thứ tự Test |
|----------|-----------|--------------------------------------|-----------------|-------------|
| **360px** | Mobile S | Samsung Galaxy A-series, Xiaomi Redmi, OPPO A-series | Cốc Cốc Mobile, Chrome Mobile | ⭐ Cao nhất |
| **393px** | Mobile M | iPhone 14/15, Samsung Galaxy S23, Pixel 7 | Chrome Mobile, Safari (iOS) | ⭐ Cao nhất |
| **768px** | Tablet | iPad Air, Samsung Galaxy Tab, Lenovo Tab | Chrome, Firefox, Edge | ⭐ Trung bình |
| **1366px** | Desktop S | Laptop 14" phổ thông (ASUS, Acer, HP) | Chrome, Cốc Cốc, Edge | ⭐ Cao nhất |

### 2.2 Chi tiết từng Viewport

#### 📱 360px — Mobile Small
```
Mô tả: Viewport phổ biến nhất VN (segment giá rẻ, mid-range Android)
Thiết bị thật:
  - Samsung Galaxy A14, A24, A54
  - Xiaomi Redmi Note series
  - OPPO A57, A77
  - Vivo Y-series
  
CSS Breakpoint: @media (max-width: 375px)
Orientation: Portrait (chính), Landscape (phụ)
```

- [ ] Thêm device profile vào Chrome DevTools:
  - Width: `360` | Height: `800` | DPR: `3` | Name: `Samsung A-series (VN)`
- [ ] Test landscape: Width `800` | Height: `360`
- [ ] Kiểm tra text không overflow container
- [ ] Kiểm tra button min-height `44px` (touch target)
- [ ] Kiểm tra navigation menu mobile hiển thị đúng

#### 📱 393px — Mobile Medium / Standard
```
Mô tả: iPhone 14/15 viewport, đang trở thành chuẩn mới
Thiết bị thật:
  - iPhone 14, 14 Pro, 15, 15 Pro
  - Samsung Galaxy S23, S24
  - Google Pixel 7, 8
  
CSS Breakpoint: @media (max-width: 430px)
Orientation: Portrait (chính)
```

- [ ] Thêm device profile:
  - Width: `393` | Height: `852` | DPR: `3` | Name: `iPhone 15 Pro`
- [ ] Test với Safari rendering (dùng BrowserStack nếu không có Mac)
- [ ] Kiểm tra safe-area-inset (notch/Dynamic Island)
- [ ] Kiểm tra `env(safe-area-inset-bottom)` cho bottom navigation
- [ ] Test form input — tránh zoom-in khi focus (font-size ≥ 16px)

#### 📟 768px — Tablet
```
Mô tả: Viewport tablet phổ biến, layout chuyển tiếp mobile → desktop
Thiết bị thật:
  - iPad (9th/10th gen)
  - Samsung Galaxy Tab A8, A9
  - Lenovo Tab M10
  
CSS Breakpoint: @media (min-width: 768px) and (max-width: 1023px)
Orientation: Portrait & Landscape đều quan trọng
```

- [ ] Test cả Portrait (768×1024) và Landscape (1024×768)
- [ ] Kiểm tra layout grid chuyển từ 1-col → 2-col đúng không
- [ ] Kiểm tra sidebar behavior (collapsed/expanded)
- [ ] Test hover states (tablet có thể dùng chuột ngoài)
- [ ] Kiểm tra images responsive không bị vỡ tỉ lệ

#### 🖥️ 1366px — Desktop Small
```
Mô tả: Kích thước phổ biến nhất laptop VN (văn phòng, sinh viên)
Thiết bị thật:
  - ASUS VivoBook 14"
  - Acer Aspire 14"
  - HP Pavilion 14"
  - Lenovo IdeaPad 14"
  
CSS Breakpoint: @media (min-width: 1280px)
Scale: Thường dùng 125% Windows scaling
```

- [ ] Lưu ý: Windows mặc định scale 125% → effective viewport ~1093px
- [ ] Test với browser zoom 100%, 110%, 125%
- [ ] Kiểm tra max-width container (thường 1200px hoặc 1280px)
- [ ] Kiểm tra sidebar và main content layout
- [ ] Test dropdown menu và mega menu

### 2.3 Viewport Bổ Sung (Tham khảo thêm)

| Viewport | Thiết bị | Ghi chú |
|----------|----------|---------|
| 320px | iPhone SE (old), Galaxy S5 | Cận biên, vẫn cần check |
| 375px | iPhone SE (2022), iPhone 13 mini | Phổ biến iOS mid-range |
| 414px | iPhone Plus/Max models | iOS large screen |
| 1024px | iPad Landscape, Surface | Breakpoint quan trọng |
| 1440px | Desktop 15.6", Full HD monitor | Desktop standard |
| 1920px | Full HD monitor | Desktop cao cấp |

---

## 3. Checklist 5 Điểm Kiểm Tra Mỗi Browser

> **Hướng dẫn:** Copy block checklist này cho từng browser. Tick [x] khi pass, ghi chú bug nếu fail.

### 📝 Template — Thông tin session test

```
URL test: _______________
Ngày test: _______________
Tester: _______________
Browser + Version: _______________
OS: _______________
Viewport: _______________
Kết quả tổng: PASS / FAIL / PARTIAL
```

---

### 🟡 CHROME — Checklist Kiểm Tra

#### Điểm 1: Layout & Visual Rendering

- [ ] **1.1** Flexbox layout hiển thị đúng — không bị wrap sai, gap đúng
- [ ] **1.2** CSS Grid hiển thị đúng — số cột đúng với viewport
- [ ] **1.3** Images load đúng — không bị vỡ, đúng tỉ lệ aspect-ratio
- [ ] **1.4** `position: sticky` hoạt động đúng (header, sidebar)
- [ ] **1.5** Scrollbar không che content — kiểm tra `overflow: hidden` không thiếu
- [ ] **1.6** Z-index đúng — modal, dropdown không bị ẩn sau element khác
- [ ] **1.7** Border-radius, box-shadow render đúng
- [ ] **1.8** CSS animation/transition mượt mà (không giật lag)
- [ ] **1.9** Dark mode (nếu có) — `prefers-color-scheme: dark` hoạt động
- [ ] **1.10** Print stylesheet hoạt động đúng: `Ctrl+P` preview

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Chi tiết: _______________
Screenshot: _______________
```

#### Điểm 2: Font Tiếng Việt & Typography

- [ ] **2.1** Font load đúng — không bị fallback sang system font lạ
- [ ] **2.2** Ký tự đặc biệt tiếng Việt hiển thị đúng: `ắ ẹ ổ ướ ềm ặng ự`
- [ ] **2.3** Font tiếng Việt phổ biến render tốt:
  - [ ] Google Fonts: **Be Vietnam Pro** — font chuẩn cho web VN
  - [ ] Google Fonts: **Nunito** / **Inter** với Vietnamese subset
  - [ ] System font: `SVN-Gilroy`, `UTM Avo` (nếu dùng font có bản quyền)
- [ ] **2.4** Line-height đủ rộng cho dấu thanh (tối thiểu `1.6` cho body text VN)
- [ ] **2.5** Text không bị clipped phần trên/dưới (dấu mũ, dấu nặng)
- [ ] **2.6** Font-weight render đúng — `400`, `600`, `700` có sự khác biệt rõ
- [ ] **2.7** Text overflow xử lý đúng: `text-overflow: ellipsis` với text VN dài
- [ ] **2.8** Paragraph spacing đọc được — không quá chật hoặc quá thưa
- [ ] **2.9** Heading hierarchy rõ ràng: H1 > H2 > H3
- [ ] **2.10** Font trong `<input>`, `<textarea>` đồng nhất với body font

**Lệnh kiểm tra nhanh trong Console:**
```javascript
// Kiểm tra font đã load chưa
document.fonts.ready.then(() => {
  document.fonts.forEach(font => {
    console.log(`${font.family} - ${font.weight} - ${font.status}`);
  });
});

// Test render dấu tiếng Việt
document.body.insertAdjacentHTML('beforeend',
  '<div style="position:fixed;top:0;right:0;background:yellow;padding:8px;z-index:9999">Test: Tiếng Việt ắ ẹ ổ ướ ặng ự</div>'
);
```

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Chi tiết: _______________
```

#### Điểm 3: JavaScript Errors & Console

- [ ] **3.1** Mở Console: `F12` → tab Console
- [ ] **3.2** **Không có lỗi màu đỏ** (Error level) khi load trang
- [ ] **3.3** Kiểm tra Warning — phân biệt warning quan trọng vs không quan trọng
- [ ] **3.4** Không có `Uncaught TypeError` hoặc `Uncaught ReferenceError`
- [ ] **3.5** Không có `Failed to load resource` (404 cho JS/CSS/Image)
- [ ] **3.6** Không có CORS errors nếu gọi API cross-origin
- [ ] **3.7** Không có `Content Security Policy` violation
- [ ] **3.8** Không có `Deprecated API` warnings quan trọng
- [ ] **3.9** Test tương tác: click button, submit form — không phát sinh error
- [ ] **3.10** Kiểm tra Memory leaks (Performance tab → Record → Heap snapshot)

**Lệnh kiểm tra trong Console:**
```javascript
// Bắt tất cả unhandled errors
window.addEventListener('error', (e) => {
  console.table({
    message: e.message,
    filename: e.filename,
    line: e.lineno,
    col: e.colno
  });
});

// Bắt Promise rejections chưa xử lý
window.addEventListener('unhandledrejection', (e) => {
  console.error('Unhandled Promise Rejection:', e.reason);
});

// Đếm số lỗi trong session
let errorCount = 0;
const origError = console.error;
console.error = (...args) => { errorCount++; origError(...args); };
// Sau khi test xong: console.log('Total errors:', errorCount);
```

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Số lỗi Error: ___  | Số Warning: ___
Chi tiết lỗi chính: _______________
```

#### Điểm 4: Lighthouse Score

- [ ] **4.1** Mở Lighthouse: DevTools → tab Lighthouse (hoặc tab Performance Insights)
- [ ] **4.2** Chọn mode: **Navigation** | Categories: All | Device: **Mobile** trước
- [ ] **4.3** Chạy audit và ghi lại điểm số:

| Metric | Mục tiêu | Kết quả Thực tế | Pass/Fail |
|--------|----------|-----------------|-----------|
| Performance | ≥ 80 | ___ | [ ] |
| Accessibility | ≥ 90 | ___ | [ ] |
| Best Practices | ≥ 90 | ___ | [ ] |
| SEO | ≥ 90 | ___ | [ ] |
| PWA (nếu có) | ≥ 80 | ___ | [ ] |

- [ ] **4.4** Kiểm tra Core Web Vitals trong kết quả Lighthouse:

| CWV Metric | Mục tiêu | Kết quả | Pass/Fail |
|------------|----------|---------|-----------|
| LCP (Largest Contentful Paint) | ≤ 2.5s | ___ | [ ] |
| FID / INP (Interaction to Next Paint) | ≤ 200ms | ___ | [ ] |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | ___ | [ ] |
| FCP (First Contentful Paint) | ≤ 1.8s | ___ | [ ] |
| TTFB (Time to First Byte) | ≤ 600ms | ___ | [ ] |

- [ ] **4.5** Chạy lại với Device: **Desktop** và so sánh
- [ ] **4.6** Export kết quả: nút **Download Report** → lưu JSON/HTML
- [ ] **4.7** Kiểm tra Opportunities: ảnh chưa nén, render-blocking resources
- [ ] **4.8** Kiểm tra Diagnostics: DOM size, unused CSS/JS
- [ ] **4.9** Test ở chế độ Incognito (extensions không ảnh hưởng score)
- [ ] **4.10** So sánh điểm Production vs Staging — không chênh lệch quá 10 điểm

**Lệnh chạy Lighthouse CLI:**
```bash
# Cài lighthouse CLI
npm install -g lighthouse

# Chạy audit và xuất báo cáo
lighthouse https://your-site.com \
  --output html \
  --output-path ./lighthouse-report.html \
  --chrome-flags="--headless" \
  --preset=desktop

# Chạy với mobile preset
lighthouse https://your-site.com \
  --output json \
  --output-path ./lighthouse-mobile.json \
  --form-factor=mobile \
  --throttling-method=simulate
```

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Performance score: ___
Vấn đề chính cần fix: _______________
```

#### Điểm 5: Network Throttle & Performance thực tế

- [ ] **5.1** Mở DevTools → Network tab
- [ ] **5.2** Test với **3G Fast** preset (phổ biến nhất tại VN ngoại thành):
  - Download: 1.5 Mbps | Upload: 750 Kbps | Latency: 40ms
- [ ] **5.3** Test với **3G Slow** preset (vùng nông thôn, tín hiếu yếu):
  - Download: 400 Kbps | Upload: 400 Kbps | Latency: 200ms
- [ ] **5.4** Test với **4G/LTE** (người dùng thành thị VN):
  - Download: 9 Mbps | Upload: 9 Mbps | Latency: 170ms
- [ ] **5.5** Kiểm tra trang load được trong ≤ 5s với 3G Fast
- [ ] **5.6** Kiểm tra trang **usable** (interactive) trong ≤ 3s với 4G
- [ ] **5.7** Kiểm tra lazy loading: images ngoài viewport không load ngay
- [ ] **5.8** Kiểm tra tổng kích thước trang: khuyến nghị ≤ 2MB
- [ ] **5.9** Kiểm tra số lượng requests: khuyến nghị ≤ 80 requests
- [ ] **5.10** Test offline mode: Service Worker có cache không?

**Custom throttle profile VN (tạo trong Chrome DevTools):**
```
Profile: Vietnam Mobile Average
Download: 5,000 Kbps
Upload: 2,000 Kbps  
Latency: 80ms

Profile: Vietnam Rural 3G
Download: 1,000 Kbps
Upload: 500 Kbps
Latency: 150ms
```

**Thêm Custom Profile:**
1. Network tab → Throttle dropdown → Add...
2. Điền thông số như trên
3. Save và chọn khi test

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Load time (3G Fast): ___s
Total size: ___MB | Total requests: ___
Bottleneck chính: _______________
```

---

### 🦊 FIREFOX — Checklist Kiểm Tra

#### Điểm 1: Layout & Visual Rendering

- [ ] **1.1** So sánh layout với Chrome — phát hiện CSS khác biệt
- [ ] **1.2** CSS Grid: Firefox có Grid Inspector tốt nhất → dùng để debug
- [ ] **1.3** Scrollbar: Firefox dùng scrollbar rộng hơn → kiểm tra layout không bị đẩy
- [ ] **1.4** `scrollbar-gutter: stable` — Firefox support tốt, Chrome mới support
- [ ] **1.5** `aspect-ratio` CSS property render đúng
- [ ] **1.6** CSS `gap` trong Flexbox — kiểm tra (Firefox cũ có bug)
- [ ] **1.7** CSS `filter` và `backdrop-filter` — Firefox render khác Chrome
- [ ] **1.8** `position: sticky` trong table — Firefox có behavior khác
- [ ] **1.9** CSS Custom Properties (variables) hoạt động đúng
- [ ] **1.10** Kiểm tra Responsive Design Mode: `Ctrl+Shift+M`

**Dùng Firefox Grid Inspector:**
```
1. Click vào element có display:grid trong Inspector
2. Click icon lưới bên cạnh "grid" trong Rules panel  
3. Xem overlay grid để debug alignment
```

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Khác biệt so với Chrome: _______________
```

#### Điểm 2: Font Tiếng Việt & Typography

- [ ] **2.1** Font rendering: Firefox dùng **antialiasing khác** Chrome → kiểm tra font có sắc nét không
- [ ] **2.2** Kiểm tra `font-smooth: antialiased` — Firefox không support `-webkit-font-smoothing`
- [ ] **2.3** Ký tự đặc biệt tiếng Việt render đúng: `ắ ẹ ổ ướ ềm ặng ự`
- [ ] **2.4** Web fonts load đúng — Firefox cache fonts khác Chrome
- [ ] **2.5** `font-feature-settings` hoạt động đúng (nếu dùng OpenType features)
- [ ] **2.6** Text trong SVG render đúng (Firefox khác Chrome về SVG text)
- [ ] **2.7** `letter-spacing` với text tiếng Việt — kiểm tra không bị tách dấu
- [ ] **2.8** Firefox Linux: kiểm tra font fallback khác Windows/Mac
- [ ] **2.9** `<input type="text">` placeholder font đúng
- [ ] **2.10** PDF export (nếu có): tiếng Việt trong PDF đúng không

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Chi tiết: _______________
```

#### Điểm 3: JavaScript Errors & Console

- [ ] **3.1** Mở Browser Console: `Ctrl+Shift+J` (xem tất cả errors)
- [ ] **3.2** Mở Web Console trong DevTools: `F12` → Console
- [ ] **3.3** Không có lỗi JS (Firefox có thể báo lỗi khác Chrome với cùng code)
- [ ] **3.4** Test APIs: `IntersectionObserver`, `ResizeObserver` — Firefox support đầy đủ
- [ ] **3.5** Kiểm tra `localStorage`, `sessionStorage` hoạt động
- [ ] **3.6** Test `fetch()` và `XMLHttpRequest` — CORS behavior đúng
- [ ] **3.7** Kiểm tra Event Listeners: Firefox DevTools có tab Event Listeners tốt
- [ ] **3.8** Test Web Animations API nếu dùng
- [ ] **3.9** Kiểm tra Performance tab — Firefox có Flame Graph khác Chrome
- [ ] **3.10** Test với Firefox Multi-Account Containers (session isolation)

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Số lỗi Error: ___ | Số Warning: ___
JS APIs không support: _______________
```

#### Điểm 4: Lighthouse Score

> **Lưu ý:** Firefox không có Lighthouse built-in. Dùng các phương án thay thế:

- [ ] **4.1** Dùng **Lighthouse CLI** để chạy audit (xem lệnh ở Section Chrome)
- [ ] **4.2** Cài extension **Lighthouse** cho Firefox (unofficial)
- [ ] **4.3** Dùng **PageSpeed Insights** online: [pagespeed.web.dev](https://pagespeed.web.dev)
- [ ] **4.4** Dùng Firefox **Performance** tab để đo FPS và timeline
- [ ] **4.5** Dùng Firefox **Network** tab để đo load time thủ công
- [ ] **4.6** So sánh kết quả Lighthouse CLI với Chrome DevTools Lighthouse

| Metric | Mục tiêu | Kết quả CLI | Pass/Fail |
|--------|----------|-------------|-----------|
| Performance | ≥ 80 | ___ | [ ] |
| Accessibility | ≥ 90 | ___ | [ ] |
| Best Practices | ≥ 90 | ___ | [ ] |
| SEO | ≥ 90 | ___ | [ ] |

- [ ] **4.7** Dùng Firefox **Accessibility Inspector** để kiểm tra a11y
- [ ] **4.8** Test với **WAVE** extension trên Firefox

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Performance score (CLI): ___
```

#### Điểm 5: Network Throttle & Performance

- [ ] **5.1** Mở Network tab: `F12` → Network
- [ ] **5.2** Bật **Disable Cache** trong Network tab
- [ ] **5.3** Dùng throttle dropdown: chọn **GPRS**, **Regular 3G**, **Good 3G**
- [ ] **5.4** Kiểm tra **Waterfall** chart — identify slow requests
- [ ] **5.5** Kiểm tra **Timings** của từng request (DNS, TCP, TTFB, Download)
- [ ] **5.6** Test `preload`, `prefetch`, `preconnect` hints hoạt động đúng
- [ ] **5.7** Kiểm tra HTTP/2 vs HTTP/1.1 (Protocol column)
- [ ] **5.8** Test Service Worker caching trong Application tab
- [ ] **5.9** Tổng kích thước transferred vs resources (compression ratio)
- [ ] **5.10** Kiểm tra không có resource load từ HTTP (mixed content) khi site HTTPS

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Load time: ___s | Total size: ___MB
```

---

### 🐸 CỐC CỐC — Checklist Kiểm Tra

> **Context:** Cốc Cốc chiếm ~20-25% thị phần browser tại Việt Nam. Ưu tiên test cho user VN phổ thông.

#### Điểm 1: Layout & Visual Rendering

- [ ] **1.1** Kiểm tra Chromium version: `coccoc://version/` — so sánh với Chrome stable
- [ ] **1.2** Layout đúng như Chrome (cùng Chromium engine)
- [ ] **1.3** **Ad blocker built-in** của Cốc Cốc có block bất kỳ resource nào không
- [ ] **1.4** Kiểm tra Banner/Popup quảng cáo bị block — ảnh hưởng layout không
- [ ] **1.5** Download manager tích hợp — không can thiệp vào UX download
- [ ] **1.6** Kiểm tra trang với Cốc Cốc News feed (new tab) — không can thiệp
- [ ] **1.7** Test shopping features của Cốc Cốc (nếu site là e-commerce)
- [ ] **1.8** So sánh rendering với Chrome cùng viewport
- [ ] **1.9** Kiểm tra CSS đặc thù Chromium hoạt động đúng
- [ ] **1.10** Test Print layout: Cốc Cốc có thêm watermark không?

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Cốc Cốc version: ___ | Chromium base: ___
Ad blocker block resource: _______________
```

#### Điểm 2: Font Tiếng Việt & Typography

> **Đây là điểm QUAN TRỌNG NHẤT khi test Cốc Cốc**

- [ ] **2.1** Cốc Cốc có font rendering tối ưu cho tiếng Việt hơn Chrome không?
- [ ] **2.2** Kiểm tra font hệ thống VN được ưu tiên: `Times New Roman` → VN characters
- [ ] **2.3** Ký tự dấu thanh hiển thị ĐÚNG và RÕ: `ắ ẹ ổ ướ ềm ặng ự ờ ẫ`
- [ ] **2.4** Test text nặng về tiếng Việt (bài báo, nội dung blog dài)
- [ ] **2.5** Kiểm tra font trong `<input>` và form elements
- [ ] **2.6** Vietnamese spell check (nếu browser có) không gạch chân từ đúng
- [ ] **2.7** Copy-paste text tiếng Việt vào input — không bị lỗi encoding
- [ ] **2.8** Text trong table cells đúng
- [ ] **2.9** Font trong tooltip và popover đúng
- [ ] **2.10** Kiểm tra font trong PDF viewer tích hợp Cốc Cốc

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Font issues: _______________
```

#### Điểm 3: JavaScript Errors & Console

- [ ] **3.1** Mở DevTools: `F12` (Cốc Cốc dùng Chromium DevTools)
- [ ] **3.2** Không có JS errors — giống Chrome test
- [ ] **3.3** Test Cốc Cốc-specific APIs nếu có (payment, download)
- [ ] **3.4** Kiểm tra extension của Cốc Cốc không inject script gây lỗi
- [ ] **3.5** Test analytics tracking: GA4, Facebook Pixel không bị block
- [ ] **3.6** Kiểm tra nếu dùng Google Maps API
- [ ] **3.7** Test video player (YouTube embed, Vimeo) hoạt động
- [ ] **3.8** Test tính năng chia sẻ mạng xã hội VN: Zalo, Facebook
- [ ] **3.9** Test payment gateway VN: VNPay, MoMo, ZaloPay (nếu có)
- [ ] **3.10** Không có `net::ERR_BLOCKED_BY_CLIENT` errors

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Scripts bị block bởi Cốc Cốc: _______________
```

#### Điểm 4: Lighthouse Score

- [ ] **4.1** Chạy Lighthouse trong Cốc Cốc DevTools (có sẵn như Chrome)
- [ ] **4.2** So sánh score với Chrome — thường tương đương
- [ ] **4.3** Kiểm tra performance có bị ảnh hưởng bởi ad blocker built-in không

| Metric | Mục tiêu | Kết quả | So sánh Chrome |
|--------|----------|---------|----------------|
| Performance | ≥ 80 | ___ | Chênh: ___ |
| Accessibility | ≥ 90 | ___ | Chênh: ___ |
| Best Practices | ≥ 90 | ___ | Chênh: ___ |
| SEO | ≥ 90 | ___ | Chênh: ___ |

- [ ] **4.4** Chạy Lighthouse ở Incognito mode (Cốc Cốc: `Ctrl+Shift+N`)
- [ ] **4.5** Kiểm tra score không bị ảnh hưởng bởi features của Cốc Cốc

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Score khác biệt đáng kể: _______________
```

#### Điểm 5: Network Throttle & Performance

- [ ] **5.1** Network throttle: Cốc Cốc hỗ trợ đầy đủ như Chrome
- [ ] **5.2** Test với 3G — simulate môi trường user VN ngoại thành
- [ ] **5.3** Kiểm tra CDN resources load tốt (jsDelivr, Cloudflare, unpkg)
- [ ] **5.4** Test với VPN bật (một số user VN dùng VPN) — site vẫn load đúng
- [ ] **5.5** Kiểm tra kết nối WebSocket hoạt động đúng
- [ ] **5.6** Test download file — Cốc Cốc có download manager riêng
- [ ] **5.7** Kiểm tra media streaming (video, audio) không bị buffering bất thường
- [ ] **5.8** Test lazy loading hoạt động đúng
- [ ] **5.9** Kiểm tra tổng bandwidth tiêu thụ
- [ ] **5.10** Test với DNS của nhà mạng VN (VNPT, Viettel, FPT) — không bị block domain

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Load time: ___s | Total size: ___MB
```

---

### 🔵 EDGE — Checklist Kiểm Tra

#### Điểm 1: Layout & Visual Rendering

- [ ] **1.1** Edge version: `edge://version/` — Chromium-based từ Edge 79+
- [ ] **1.2** Layout đúng như Chrome (cùng Blink engine)
- [ ] **1.3** Kiểm tra **Sidebar** của Edge không che content (Thu/mở sidebar)
- [ ] **1.4** Kiểm tra **Shopping** feature Edge không popup không mong muốn
- [ ] **1.5** Kiểm tra **Immersive Reader** mode — layout trang đơn giản hóa đúng không
- [ ] **1.6** Test **IE Compatibility Mode** nếu cần: `edge://compat/`
- [ ] **1.7** Kiểm tra **Vertical Tabs** không ảnh hưởng viewport
- [ ] **1.8** Test với **Edge Collections** open — không ảnh hưởng layout
- [ ] **1.9** Kiểm tra CSS rendering đúng như Chrome
- [ ] **1.10** Test **Split Screen** feature (Edge 109+)

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Edge sidebar issues: _______________
```

#### Điểm 2: Font Tiếng Việt & Typography

- [ ] **2.1** Font tiếng Việt render đúng — Edge/Chromium tương đương Chrome
- [ ] **2.2** Kiểm tra `Segoe UI` (Windows font) khi dùng system font stack
- [ ] **2.3** Ký tự đặc biệt tiếng Việt: `ắ ẹ ổ ướ ềm ặng ự`
- [ ] **2.4** ClearType rendering trên Windows — Edge tối ưu hơn Chrome đôi khi
- [ ] **2.5** Test với Windows Scaling 125% — font không bị blur
- [ ] **2.6** Kiểm tra font trong **Immersive Reader** đúng với tiếng Việt
- [ ] **2.7** Web fonts load đúng
- [ ] **2.8** `font-display: swap` hoạt động đúng — không bị FOIT
- [ ] **2.9** Kiểm tra font trong form elements
- [ ] **2.10** Test text-to-speech của Edge với tiếng Việt (nếu site có a11y)

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Font issues: _______________
```

#### Điểm 3: JavaScript Errors & Console

- [ ] **3.1** Mở DevTools: `F12` — Edge DevTools tương tự Chrome
- [ ] **3.2** Không có JS errors
- [ ] **3.3** Test Microsoft-specific APIs nếu cần (Teams integration, etc.)
- [ ] **3.4** Kiểm tra Edge extensions không inject scripts gây lỗi
- [ ] **3.5** Test **Clarity** analytics của Microsoft (nếu site dùng)
- [ ] **3.6** Test Azure AD authentication (nếu là internal tool)
- [ ] **3.7** Kiểm tra Web Share API hoạt động
- [ ] **3.8** Test Notification API
- [ ] **3.9** Không có `net::ERR_BLOCKED_BY_CLIENT`
- [ ] **3.10** Test Performance Monitor: `edge://performance/`

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Edge-specific errors: _______________
```

#### Điểm 4: Lighthouse Score

- [ ] **4.1** Chạy Lighthouse trong Edge DevTools (có sẵn, giống Chrome)
- [ ] **4.2** So sánh với Chrome Lighthouse score

| Metric | Mục tiêu | Kết quả Edge | Kết quả Chrome | Chênh lệch |
|--------|----------|--------------|----------------|------------|
| Performance | ≥ 80 | ___ | ___ | ___ |
| Accessibility | ≥ 90 | ___ | ___ | ___ |
| Best Practices | ≥ 90 | ___ | ___ | ___ |
| SEO | ≥ 90 | ___ | ___ | ___ |

- [ ] **4.3** Test ở InPrivate mode: `Ctrl+Shift+N`
- [ ] **4.4** Kiểm tra Edge Clarity session recording không ảnh hưởng score
- [ ] **4.5** Test với Edge Efficiency Mode bật/tắt — performance khác không

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
```

#### Điểm 5: Network Throttle & Performance

- [ ] **5.1** Network throttle: Edge hỗ trợ đầy đủ như Chrome
- [ ] **5.2** Test với 3G Fast và 4G preset
- [ ] **5.3** Kiểm tra **Sleeping Tabs** feature — tab background không ảnh hưởng test
- [ ] **5.4** Test với **Efficiency Mode** bật — ảnh hưởng JS performance?
- [ ] **5.5** Kiểm tra WebP images load đúng (Edge Chromium support đầy đủ)
- [ ] **5.6** Test Service Worker và caching
- [ ] **5.7** Kiểm tra HTTP/3 (QUIC) nếu server support
- [ ] **5.8** Test với Edge tracking prevention — Standard/Balanced/Strict
- [ ] **5.9** Kiểm tra fonts từ Google Fonts không bị block bởi tracking prevention
- [ ] **5.10** So sánh load time với Chrome — không chênh lệch > 10%

**Bug ghi chú:**
```
[ ] PASS  [ ] FAIL
Tracking prevention level: ___
Ảnh hưởng đến load: _______________
```

---

### 📊 Bảng Tổng Hợp Kết Quả

| Điểm kiểm tra | Chrome | Firefox | Cốc Cốc | Edge |
|---------------|--------|---------|---------|------|
| Layout & Visual | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ |
| Font tiếng Việt | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ |
| JS Errors | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ |
| Lighthouse | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ |
| Network/Perf | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ | [ ]✅ [ ]❌ |
| **TỔNG** | **__/5** | **__/5** | **__/5** | **__/5** |

---

## 4. Ghi Chú về Manifest V3 và uBlock Origin

> ⚠️ **QUAN TRỌNG cho developer:** Những thay đổi này ảnh hưởng trực tiếp đến môi trường test và trải nghiệm người dùng.

### 4.1 Manifest V3 là gì?

Chrome Extension Manifest V3 (MV3) là phiên bản API mới cho Chrome extensions, được Google bắt buộc áp dụng từ **2024**. MV3 thay thế hoàn toàn Manifest V2 (MV2) với những thay đổi lớn về cách extensions hoạt động.

#### Timeline quan trọng:
- [ ] **Đọc và nắm rõ:** Chrome đã tắt MV2 extensions từ **Q1 2024** (Enterprise Policy vẫn giữ đến 2025)
- [ ] **Lưu ý:** Firefox vẫn support MV2 và MV3 song song — Firefox KHÔNG bắt buộc MV3
- [ ] **Tác động:** uBlock Origin MV2 không còn hoạt động trên Chrome Stable

### 4.2 Tác động của MV3 đến Testing

#### ❌ Những gì MV3 KHÔNG còn cho phép:

```
webRequestBlocking API bị loại bỏ
→ Extensions không thể block/modify network requests theo thời gian thực
→ Ảnh hưởng: Ad blocker không mạnh như trước trên Chrome

declarativeNetRequest API thay thế
→ Rules phải được define trước, không dynamic
→ Giới hạn số lượng rules (tối đa 30,000 static rules)
→ Giới hạn dynamic rules (tối đa 5,000 rules)

Remote code execution bị cấm
→ Extensions không thể fetch và execute code từ server
→ Phải bundle tất cả code vào extension package
```

#### ✅ Giải pháp thay thế cho developer khi test:

- [ ] **Dùng Firefox + uBlock Origin MV2** để test với ad blocker đầy đủ tính năng
  - Firefox không bị ảnh hưởng bởi Chrome MV3 policy
  - uBlock Origin trên Firefox vẫn dùng MV2 → blocking mạnh nhất

- [ ] **Dùng Chrome + uBlock Origin Lite (MV3)**
  - Tính năng bị giảm so với MV2
  - Không thể dùng "element picker" để block custom elements
  - Vẫn block được phần lớn quảng cáo phổ biến

- [ ] **Test site của bạn với cả hai trường hợp:**
  ```
  Trường hợp A: Không có ad blocker (đa số user mobile VN)
  Trường hợp B: Có uBlock Origin (user desktop có kỹ thuật)
  Trường hợp C: Cốc Cốc với ad blocker built-in
  ```

### 4.3 uBlock Origin — Tình trạng hiện tại 2025

| Browser | uBlock Origin | Version | Tình trạng |
|---------|--------------|---------|------------|
| **Firefox** | uBlock Origin | MV2 | ✅ Hoạt động đầy đủ |
| **Chrome** | uBlock Origin Lite | MV3 | ⚠️ Tính năng giảm |
| **Edge** | uBlock Origin Lite | MV3 | ⚠️ Tính năng giảm |
| **Cốc Cốc** | uBlock Origin Lite | MV3 | ⚠️ Tính năng giảm |

> **Ghi chú thêm:** Edge cho phép cài extensions từ Chrome Web Store, nhưng vẫn bị giới hạn bởi MV3 policy nếu cài từ Chrome Store.

### 4.4 Checklist kiểm tra tác động đến site của bạn

- [ ] **Test analytics có bị block không:**
  - [ ] Google Analytics 4 bị block bởi uBlock Origin?
  - [ ] Facebook Pixel bị block?
  - [ ] Hotjar/Microsoft Clarity bị block?
  - [ ] → Nếu có, site có fallback mechanism không?

- [ ] **Test ads (nếu site có quảng cáo):**
  - [ ] Google AdSense render đúng khi không có blocker
  - [ ] Layout không bị vỡ khi ads bị block
  - [ ] Fallback content hiển thị khi ads bị block

- [ ] **Test với uBlock Origin Lite trên Chrome:**
  ```
  1. Cài uBlock Origin Lite từ Chrome Web Store
  2. Bật extension
  3. Test lại tất cả 5 điểm kiểm tra
  4. So sánh với không có extension
  ```

- [ ] **Test với uBlock Origin đầy đủ trên Firefox:**
  ```
  1. Cài uBlock Origin trên Firefox
  2. Bật medium mode hoặc hard mode
  3. Test site — ghi nhận những gì bị block
  4. Đảm bảo UX không bị phá vỡ
  ```

- [ ] **Implement fallback cho resources quan trọng:**
  ```javascript
  // Ví dụ: kiểm tra analytics có load không
  window.addEventListener('load', () => {
    if (typeof gtag === 'undefined') {
      console.warn('GA4 bị block bởi ad blocker');
      // Implement fallback hoặc thông báo user
    }
  });
  ```

### 4.5 Khuyến nghị cho team phát triển

- [ ] **Không nên:** Dùng anti-adblock script để chặn user dùng ad blocker
- [ ] **Nên:** Thiết kế layout graceful degradation khi ads bị block
- [ ] **Nên:** Serve analytics từ first-party domain/subdomain để tránh bị block
- [ ] **Nên:** Implement Server-Side Tracking cho analytics quan trọng
- [ ] **Nên:** Test tất cả tính năng critical mà không phụ thuộc vào third-party scripts

### 4.6 Extensions thay thế cho developer environment

```
Thay thế uBlock Origin MV2 trên Chromium:
├── uBlock Origin Lite (MV3) — vẫn tốt, chỉ giảm một số tính năng nâng cao
├── AdGuard (có MV3 version) — alternative tốt
└── Brave Browser — built-in blocker mạnh (dùng để test)

Tuyệt đối dùng Firefox nếu cần:
├── Block theo custom filter list
├── Block network request động
└── Dùng element picker để tạo custom rules
```

---

## 5. Playwright Automation

> **Mục đích:** Tự động hóa quá trình test responsive để chạy regression test nhanh, tiết kiệm thời gian test thủ công lặp lại.

### 5.1 Setup Playwright

```bash
# Bước 1: Khởi tạo project Playwright
npm init playwright@latest
# Chọn: TypeScript, tests folder, GitHub Actions, install browsers

# Hoặc cài vào project hiện có
npm install --save-dev @playwright/test

# Bước 2: Cài tất cả browsers
npx playwright install
npx playwright install-deps  # Linux: cài system dependencies

# Bước 3: Kiểm tra cài đặt
npx playwright --version
```

### 5.2 Cấu hình playwright.config.ts

```typescript
// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30 * 1000,
  expect: {
    timeout: 5000
  },
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  
  reporter: [
    ['html', { outputFolder: 'playwright-report' }],
    ['json', { outputFile: 'test-results.json' }],
    ['list']
  ],

  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    locale: 'vi-VN',        // Locale tiếng Việt
    timezoneId: 'Asia/Ho_Chi_Minh',  // Timezone Việt Nam
  },

  projects: [
    // ===== DESKTOP BROWSERS =====
    {
      name: 'Chrome Desktop 1366px',
      use: {
        ...devices['Desktop Chrome'],
        viewport: { width: 1366, height: 768 },
        channel: 'chrome',
      },
    },
    {
      name: 'Firefox Desktop 1366px',
      use: {
        ...devices['Desktop Firefox'],
        viewport: { width: 1366, height: 768 },
      },
    },
    {
      name: 'Edge Desktop 1366px',
      use: {
        ...devices['Desktop Edge'],
        viewport: { width: 1366, height: 768 },
        channel: 'msedge',
      },
    },

    // ===== TABLET =====
    {
      name: 'iPad 768px Chrome',
      use: {
        ...devices['iPad (gen 7)'],
        // Viewport: 768x1024
      },
    },
    {
      name: 'iPad 768px Firefox',
      use: {
        ...devices['iPad (gen 7)'],
        browserName: 'firefox',
      },
    },

    // ===== MOBILE =====
    {
      name: 'Mobile 393px Chrome - iPhone 15',
      use: {
        ...devices['iPhone 15 Pro'],
        // Viewport: 393x852, DPR: 3
      },
    },
    {
      name: 'Mobile 360px Chrome - Samsung Galaxy',
      use: {
        browserName: 'chromium',
        viewport: { width: 360, height: 800 },
        deviceScaleFactor: 3,
        hasTouch: true,
        isMobile: true,
        userAgent: 'Mozilla/5.0 (Linux; Android 13; Samsung Galaxy A54) AppleWebKit/537.36',
      },
    },
    {
      name: 'Mobile 393px Safari - iPhone',
      use: {
        ...devices['iPhone 15 Pro'],
        browserName: 'webkit',
      },
    },
  ],
});
```

### 5.3 Lệnh Playwright Cơ bản

#### Chạy tests

```bash
# Chạy tất cả tests
npx playwright test

# Chạy với UI mode (visualize test execution)
npx playwright test --ui

# Chạy test cụ thể
npx playwright test tests/responsive.spec.ts

# Chạy trên browser cụ thể
npx playwright test --project="Chrome Desktop 1366px"
npx playwright test --project="Firefox Desktop 1366px"
npx playwright test --project="Mobile 360px Chrome - Samsung Galaxy"

# Chạy tất cả mobile viewports
npx playwright test --project="Mobile*"

# Chạy với headed mode (xem browser chạy)
npx playwright test --headed

# Chạy với debug mode (dừng từng bước)
npx playwright test --debug

# Chạy test theo tên
npx playwright test -g "responsive layout"

# Chạy và xem báo cáo
npx playwright test && npx playwright show-report
```

#### Screenshot và Visual Testing

```bash
# Chụp screenshot tất cả viewports
npx playwright test --project="*" screenshot.spec.ts

# Update baseline screenshots
npx playwright test --update-snapshots

# Chạy visual regression tests
npx playwright test visual.spec.ts
```

### 5.4 Test Cases Responsive Cơ Bản

```typescript
// tests/responsive.spec.ts
import { test, expect } from '@playwright/test';

// Test configuration cho từng viewport
const VIEWPORTS = {
  mobile_small: { width: 360, height: 800 },
  mobile_medium: { width: 393, height: 852 },
  tablet: { width: 768, height: 1024 },
  desktop: { width: 1366, height: 768 },
};

test.describe('Responsive Layout Tests', () => {
  
  // ===== Test 1: Layout không bị vỡ =====
  test('Layout không bị overflow ngang', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('networkidle');
    
    // Kiểm tra không có horizontal scrollbar
    const bodyWidth = await page.evaluate(() => document.body.scrollWidth);
    const viewportWidth = await page.evaluate(() => window.innerWidth);
    
    expect(bodyWidth).toBeLessThanOrEqual(viewportWidth);
  });

  // ===== Test 2: Navigation menu =====
  test('Navigation menu hoạt động đúng trên mobile', async ({ page, isMobile }) => {
    await page.goto('/');
    
    if (isMobile) {
      // Mobile: kiểm tra hamburger menu
      const hamburger = page.locator('[data-testid="hamburger-menu"]');
      await expect(hamburger).toBeVisible();
      
      // Desktop nav hidden trên mobile
      const desktopNav = page.locator('nav.desktop-nav');
      await expect(desktopNav).toBeHidden();
      
      // Mở hamburger menu
      await hamburger.click();
      const mobileMenu = page.locator('[data-testid="mobile-menu"]');
      await expect(mobileMenu).toBeVisible();
    } else {
      // Desktop: kiểm tra nav hiển thị
      const desktopNav = page.locator('nav.desktop-nav');
      await expect(desktopNav).toBeVisible();
    }
  });

  // ===== Test 3: Font tiếng Việt load đúng =====
  test('Font tiếng Việt render đúng', async ({ page }) => {
    await page.goto('/');
    
    // Kiểm tra font đã load
    const fontLoaded = await page.evaluate(async () => {
      await document.fonts.ready;
      const testFont = new FontFace('Be Vietnam Pro', 'url(https://fonts.gstatic.com/...)');
      return document.fonts.check('16px "Be Vietnam Pro"');
    });
    
    // Kiểm tra text tiếng Việt không bị overflow
    const vietnameseText = page.locator('h1');
    await expect(vietnameseText).toBeVisible();
    
    // Chụp screenshot để visual review
    await page.screenshot({
      path: `screenshots/font-test-${Date.now()}.png`,
      fullPage: false
    });
  });

  // ===== Test 4: Images responsive =====
  test('Images không bị vỡ layout', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('networkidle');
    
    // Kiểm tra tất cả images đã load
    const brokenImages = await page.evaluate(() => {
      const images = Array.from(document.querySelectorAll('img'));
      return images.filter(img => !img.complete || img.naturalWidth === 0).length;
    });
    
    expect(brokenImages).toBe(0);
    
    // Kiểm tra images không overflow container
    const overflowImages = await page.evaluate(() => {
      const images = Array.from(document.querySelectorAll('img'));
      return images.filter(img => {
        const rect = img.getBoundingClientRect();
        return rect.right > window.innerWidth;
      }).length;
    });
    
    expect(overflowImages).toBe(0);
  });

  // ===== Test 5: Forms hoạt động đúng =====
  test('Form inputs không bị zoom-in trên iOS', async ({ page, isMobile }) => {
    await page.goto('/contact'); // hoặc trang có form
    
    if (isMobile) {
      // Kiểm tra font-size của inputs >= 16px (tránh zoom iOS)
      const inputFontSize = await page.evaluate(() => {
        const input = document.querySelector('input[type="text"]');
        if (!input) return null;
        return parseFloat(window.getComputedStyle(input).fontSize);
      });
      
      if (inputFontSize !== null) {
        expect(inputFontSize).toBeGreaterThanOrEqual(16);
      }
    }
  });
});

// ===== Visual Regression Tests =====
test.describe('Visual Regression - Screenshot Comparison', () => {
  
  const pages_to_test = ['/', '/about', '/contact', '/products'];
  
  for (const pagePath of pages_to_test) {
    test(`Screenshot: ${pagePath}`, async ({ page }) => {
      await page.goto(pagePath);
      await page.waitForLoadState('networkidle');
      
      // Ẩn dynamic content để screenshot ổn định
      await page.evaluate(() => {
        // Ẩn timestamps, live data
        document.querySelectorAll('[data-dynamic]').forEach(el => {
          (el as HTMLElement).style.visibility = 'hidden';
        });
      });
      
      await expect(page).toHaveScreenshot(`${pagePath.replace('/', 'home')}.png`, {
        fullPage: true,
        maxDiffPixelRatio: 0.02, // Cho phép 2% pixels khác
      });
    });
  }
});
```

### 5.5 Test JavaScript Errors Tự Động

```typescript
// tests/console-errors.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Console Errors & JS Health', () => {
  
  test('Không có console errors khi load trang', async ({ page }) => {
    const errors: string[] = [];
    const warnings: string[] = [];
    
    // Lắng nghe console messages
    page.on('console', (msg) => {
      if (msg.type() === 'error') {
        errors.push(`[ERROR] ${msg.text()}`);
      }
      if (msg.type() === 'warning') {
        warnings.push(`[WARN] ${msg.text()}`);
      }
    });
    
    // Lắng nghe page errors (uncaught exceptions)
    page.on('pageerror', (error) => {
      errors.push(`[UNCAUGHT] ${error.message}`);
    });
    
    await page.goto('/');
    await page.waitForLoadState('networkidle');
    
    // Tương tác cơ bản
    await page.mouse.move(100, 100);
    await page.waitForTimeout(1000);
    
    // Assert
    if (errors.length > 0) {
      console.log('=== ERRORS FOUND ===');
      errors.forEach(e => console.log(e));
    }
    
    expect(errors).toHaveLength(0);
  });

  test('Không có failed network requests (4xx, 5xx)', async ({ page }) => {
    const failedRequests: string[] = [];
    
    page.on('response', (response) => {
      if (response.status() >= 400) {
        failedRequests.push(`${response.status()} - ${response.url()}`);
      }
    });
    
    await page.goto('/');
    await page.waitForLoadState('networkidle');
    
    if (failedRequests.length > 0) {
      console.log('=== FAILED REQUESTS ===');
      failedRequests.forEach(r => console.log(r));
    }
    
    // Có thể filter các URL không quan trọng
    const criticalFailures = failedRequests.filter(url => 
      !url.includes('analytics') && 
      !url.includes('tracking')
    );
    
    expect(criticalFailures).toHaveLength(0);
  });
});
```

### 5.6 Test Performance với Playwright

```typescript
// tests/performance.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Performance Tests', () => {
  
  test('Đo Core Web Vitals', async ({ page }) => {
    await page.goto('/');
    
    // Đo performance metrics
    const metrics = await page.evaluate(() => {
      return new Promise((resolve) => {
        let lcp = 0;
        let cls = 0;
        let fcp = 0;
        
        // Observe LCP
        new PerformanceObserver((list) => {
          const entries = list.getEntries();
          lcp = entries[entries.length - 1].startTime;
        }).observe({ type: 'largest-contentful-paint', buffered: true });
        
        // Observe CLS
        new PerformanceObserver((list) => {
          list.getEntries().forEach(entry => {
            if (!(entry as any).hadRecentInput) {
              cls += (entry as any).value;
            }
          });
        }).observe({ type: 'layout-shift', buffered: true });
        
        // FCP từ Navigation Timing
        const paintEntries = performance.getEntriesByType('paint');
        const fcpEntry = paintEntries.find(e => e.name === 'first-contentful-paint');
        if (fcpEntry) fcp = fcpEntry.startTime;
        
        setTimeout(() => resolve({ lcp, cls, fcp }), 3000);
      });
    });
    
    console.log('Performance Metrics:', metrics);
    
    // Assert Core Web Vitals thresholds
    expect((metrics as any).lcp).toBeLessThan(2500);  // LCP < 2.5s
    expect((metrics as any).cls).toBeLessThan(0.1);    // CLS < 0.1
    expect((metrics as any).fcp).toBeLessThan(1800);   // FCP < 1.8s
  });

  test('Kiểm tra tốc độ load với Network Throttle', async ({ page, context }) => {
    // Simulate 3G Fast (Vietnam rural)
    await context.route('**/*', async (route) => {
      await new Promise(r => setTimeout(r, 50)); // Add artificial delay
      await route.continue();
    });
    
    const startTime = Date.now();
    await page.goto('/');
    await page.waitForLoadState('domcontentloaded');
    const domLoadTime = Date.now() - startTime;
    
    await page.waitForLoadState('networkidle');
    const fullLoadTime = Date.now() - startTime;
    
    console.log(`DOM Load: ${domLoadTime}ms | Full Load: ${fullLoadTime}ms`);
    
    // Trang phải usable trong 5 giây với 3G
    expect(domLoadTime).toBeLessThan(5000);
  });
});
```

### 5.7 Lệnh Nhanh Hàng Ngày (Quick Reference)

```bash
# ============================================
# PLAYWRIGHT QUICK REFERENCE CHO DEV VN
# ============================================

# 1. Chạy tất cả tests
npx playwright test

# 2. Chạy chỉ mobile viewports
npx playwright test --project="Mobile*"

# 3. Chạy với UI để debug visually
npx playwright test --ui

# 4. Debug một test cụ thể
npx playwright test tests/responsive.spec.ts --debug

# 5. Chụp screenshots tất cả browsers và viewports
npx playwright test screenshot.spec.ts --project="*"

# 6. Cập nhật baseline screenshots
npx playwright test --update-snapshots

# 7. Xem HTML report sau khi test
npx playwright show-report

# 8. Chạy test và mở report tự động
npx playwright test && npx playwright show-report

# 9. Chạy với specific grep pattern
npx playwright test -g "Font tiếng Việt"

# 10. Generate test từ recording
npx playwright codegen http://localhost:3000

# 11. Chạy test parallel trên tất cả browsers
npx playwright test --workers=4

# 12. Chạy và export kết quả JSON
npx playwright test --reporter=json > results.json

# 13. Chạy chỉ failed tests từ lần trước
npx playwright test --last-failed

# 14. Kiểm tra config
npx playwright test --list

# 15. Install browsers mới
npx playwright install --with-deps
```

### 5.8 Script NPM hữu ích

```json
// Thêm vào package.json
{
  "scripts": {
    "test": "playwright test",
    "test:ui": "playwright test --ui",
    "test:mobile": "playwright test --project='Mobile*'",
    "test:desktop": "playwright test --project='*Desktop*'",
    "test:chrome": "playwright test --project='Chrome*'",
    "test:firefox": "playwright test --project='Firefox*'",
    "test:edge": "playwright test --project='Edge*'",
    "test:360": "playwright test --project='Mobile 360px*'",
    "test:393": "playwright test --project='Mobile 393px*'",
    "test:768": "playwright test --project='iPad*'",
    "test:1366": "playwright test --project='*Desktop 1366px'",
    "test:screenshots": "playwright test screenshot.spec.ts",
    "test:update-snapshots": "playwright test --update-snapshots",
    "test:report": "playwright show-report",
    "test:ci": "CI=true playwright test --workers=1",
    "test:headed": "playwright test --headed",
    "test:debug": "playwright test --debug",
    "codegen": "playwright codegen http://localhost:3000",
    "test:all-browsers": "playwright test --project='Chrome*' --project='Firefox*' --project='Edge*'"
  }
}
```

---

## 📌 Quick Reference Card

> In ra hoặc lưu làm bookmark để dùng hàng ngày

### Viewport Shortcuts

| Shortcut | Viewport | Dùng cho |
|----------|----------|---------|
| `npm run test:360` | 360px | Samsung A-series, Xiaomi |
| `npm run test:393` | 393px | iPhone 14/15 |
| `npm run test:768` | 768px | iPad, Galaxy Tab |
| `npm run test:1366` | 1366px | Laptop 14" phổ thông |

### Browser Shortcuts

| Shortcut | Browser |
|----------|---------|
| `npm run test:chrome` | Chrome |
| `npm run test:firefox` | Firefox |
| `npm run test:edge` | Edge |

### 5 Điểm Kiểm Tra Mỗi Browser (Tóm tắt)

```
✅ 1. LAYOUT      → Flexbox, Grid, Responsive, Z-index, Scrollbar
✅ 2. FONT VN     → Ký tự dấu thanh, Line-height, Font load, Encoding
✅ 3. JS ERRORS   → Console errors, Failed requests, CORS, Promise rejections
✅ 4. LIGHTHOUSE  → Perf ≥80, A11y ≥90, CWV (LCP<2.5s, CLS<0.1, INP<200ms)
✅ 5. NETWORK     → 3G test, Load time, Request count, Total size
```

### MV3 Checklist Nhanh

```
⚠️  uBlock Origin MV2 → Chỉ còn dùng được trên Firefox
⚠️  Chrome/Edge/Cốc Cốc → Chỉ có uBlock Origin LITE (MV3)
✅  Test site với/không ad blocker để đảm bảo graceful degradation
✅  Dùng Firefox để test với full ad blocker capability
```

---

*📅 Checklist này nên được review và cập nhật mỗi **6 tháng** hoặc khi có browser major update*  
*🔗 Tham khảo thêm: [web.dev](https://web.dev) | [caniuse.com](https://caniuse.com) | [playwright.dev](https://playwright.dev)*