# Gate 3 — Thiết kế TC UI, luôn áp dụng (UI Testing)

> **File gộp — giảm số lệnh Read khi Gate chạy** (xem `docs/internal/Token Problems.md` §3.6, Vấn đề F). Nội dung dưới đây là bản sao nguyên văn từ các file gốc cùng thư mục (liệt kê ở mỗi mục `## From:`) — **các file gốc vẫn là nguồn sự thật**, dùng để sửa/tham chiếu độc lập từng kỹ thuật. Khi sửa 1 kỹ thuật: sửa file gốc trước, rồi copy lại đúng phần đã sửa vào file gộp này để giữ đồng bộ.

## From: 02-ui-testing/02.01.UI-layout.md

# 02.01. UI Layout (Bố cục giao diện)

## Mục đích
Đảm bảo giao diện người dùng (UI) hiển thị chính xác, nhất quán và thẩm mỹ trên các trình duyệt, thiết bị và độ phân giải màn hình khác nhau. Kỹ thuật này giúp phát hiện các lỗi về thẩm mỹ và trải nghiệm người dùng ngay từ lớp giao diện.

## Kiến thức cần có
- Kiến thức cơ bản về CSS/HTML Layout.
- Hiểu biết về Responsive Design và các điểm ngắt (Breakpoints).
- Sử dụng công cụ Inspect của trình duyệt để kiểm tra thuộc tính phần tử.
- Tài liệu thiết kế (Figma, Adobe XD, Zeplin, v.v.).

## Quy trình thực hiện
1. **Đối chiếu thiết kế:** So sánh giao diện thực tế với bản vẽ thiết kế để kiểm tra độ chính xác về pixel, màu sắc, font chữ.
2. **Kiểm tra đa trình duyệt:** Mở ứng dụng trên Chrome, Firefox, Safari, Edge để phát hiện sự khác biệt về hiển thị.
3. **Kiểm tra Responsive:** Thay đổi kích thước trình duyệt hoặc dùng trình giả lập thiết bị để kiểm tra layout trên Mobile, Tablet và Desktop.
4. **Kiểm tra Spacing:** Sử dụng công cụ để đo khoảng cách (Padding, Margin) giữa các thành phần.
5. **Kiểm tra trạng thái:** Xem xét hiển thị của các phần tử khi Hover, Active, Disabled, hoặc khi dữ liệu quá dài.

## Checklist
- [ ] Căn lề và khoảng cách (Alignment & Spacing) có nhất quán và đúng thiết kế?
- [ ] Font chữ, kích thước, màu sắc có đúng chuẩn Design System?
- [ ] Hình ảnh, Icon có bị méo, vỡ hoặc lệch vị trí không?
- [ ] Văn bản có bị tràn (overflow), cắt xén (truncated) hoặc che khuất phần tử khác?
- [ ] Giao diện có hiển thị ổn định khi phóng to/thu nhỏ (Zoom) trình duyệt?

## Output mong đợi
- Danh sách các lỗi về giao diện (UI Bugs).
- Ảnh chụp màn hình so sánh giữa thiết kế và thực tế (nếu có sai lệch).
- Báo cáo xác nhận tính tương thích trên các thiết bị/trình duyệt mục tiêu.

---

## From: 02-ui-testing/02.02.form-validation.md

# 02.02. Form Validation (Kiểm tra biểu mẫu) - Comprehensive Matrix

## Mục đích
Đảm bảo toàn diện tính hợp lệ, an toàn, khả năng tiếp cận (Accessibility), tính tương thích và trải nghiệm người dùng (UX) cho mọi loại input trên giao diện hệ thống. Tài liệu này tích hợp các yêu cầu phân tích từ Báo cáo Phân tích Yêu cầu 16 mục để làm cơ sở thiết kế test case chi tiết.

## Quy trình kiểm thử (Validation Strategy)
1. **Phân tích kỹ thuật:** Phân vùng tương đương (Equivalence Partitioning) & Phân tích biên (Boundary Value Analysis) cho các trường dữ liệu.
2. **Kiểm tra loại dữ liệu (Type Validation):** Đảm bảo đúng định dạng, kiểu dữ liệu yêu cầu.
3. **Kiểm tra quy tắc nghiệp vụ (Business Logic Validation):** Kiểm tra sự ràng buộc, phụ thuộc động giữa các trường và các quy tắc nghiệp vụ ngầm định.
4. **Kiểm tra an toàn & rủi ro (Security & Risk Validation):** Ngăn chặn mã độc, bypass validation.
5. **Kiểm tra khả năng tiếp cận & tương thích (Accessibility & Compatibility):** Hỗ trợ Screen Reader, bàn phím và đa thiết bị.

---

## Bảng Ma trận Kiểm thử Validation (Comprehensive Matrix)

| Loại Input | Checklist Validation chi tiết (Áp dụng cho cả Required & Optional) | Ánh xạ Req ID liên quan (Từ Báo cáo 16 mục) |
| :--- | :--- | :--- |
| **Text/Password (All)** | - Trạng thái: Bắt buộc (Required) hoặc Không bắt buộc (Optional).<br>- Độ dài: Giới hạn ký tự tối thiểu/tối đa (Min/Max length).<br>- Xử lý khoảng trắng: Tự động loại bỏ khoảng trắng đầu/cuối (Trimming).<br>- Duy nhất: Kiểm tra tính trùng lặp dữ liệu (Unique).<br>- Định dạng: Kiểm tra theo biểu thức chính quy (Regex - email, số điện thoại, mật khẩu mạnh).<br>- Loại ký tự đặc biệt: Ký tự Latin, Kanji, Katakana, Halfwidth/Fullwidth.<br>- Bảo mật: Kiểm tra chèn thẻ script (XSS Injection), mã SQL (SQL Injection).<br>- Thao tác: Kiểm tra sao chép/dán (Copy/Paste), tự động hoàn thành (Autofill). | **Req_08** (Validations)<br>**Req_07** (Business Rules)<br>**Req_15** (Risks)<br>**Req_12** (Compatibility) |
| **Number/Price/Quantity** | - Trị số: Giá trị tối thiểu/tối đa (Min/Max value).<br>- Dấu số: Cho phép số âm hay chỉ cho phép số dương, số 0.<br>- Số thập phân: Số lượng chữ số sau dấu phẩy (Decimal places).<br>- Định dạng: Hiển thị phân tách hàng nghìn (ví dụ: 1,000,000).<br>- Ràng buộc nhập: Vô hiệu hóa nhập chữ cái và ký tự đặc biệt từ bàn phím.<br>- Tương thích thiết bị di động: Hiển thị bàn phím ảo dạng số (Numeric Keypad). | **Req_08** (Validations)<br>**Req_12** (Compatibility)<br>**Req_07** (Business Rules) |
| **Date/Time Picker** | - Định dạng: Định dạng hiển thị chuẩn (YYYY/MM/DD, DD/MM/YYYY hh:mm).<br>- Logic thời gian: Ngày quá khứ, hiện tại, tương lai; logic so sánh (Ngày bắt đầu <= Ngày kết thúc).<br>- Phương thức nhập: Cho phép nhập tay (manual input) kết hợp chọn từ lịch hiển thị (datepicker popup).<br>- Đơn vị thời gian: Giờ hoạt động, định dạng 12h/24h. | **Req_08** (Validations)<br>**Req_07** (Business Rules)<br>**Req_12** (Compatibility) |
| **Dropdown (Select)** | - Trạng thái mặc định: Hiển thị placeholder thích hợp (ví dụ: "Vui lòng chọn...").<br>- Danh sách lựa chọn: Dữ liệu tải động từ DB hoặc danh sách tĩnh cố định.<br>- Thao tác: Khả năng tìm kiếm nhanh (Search/Filter) trong dropdown dài, khả năng đa chọn (Multi-select).<br>- Phím tắt: Điều hướng lên/xuống bằng phím mũi tên và chọn bằng Enter. | **Req_07** (Business Rules)<br>**Req_11** (Accessibility)<br>**Req_08** (Validations) |
| **Radio / Checkbox** | - Trạng thái mặc định: Trạng thái được check/uncheck mặc định khi load form.<br>- Ràng buộc chọn: Đối với Radio, chỉ cho phép chọn duy nhất 1 option tại một thời điểm. Đối với Checkbox, hỗ trợ chọn nhiều hoặc "Chọn tất cả" (Select All).<br>- Kích thước vùng click: Vùng click bao gồm cả nhãn chữ (label) đi kèm. | **Req_07** (Business Rules)<br>**Req_11** (Accessibility) |
| **Toggle / Switch** | - Trạng thái mặc định: On/Off, Active/Inactive.<br>- Tác vụ kích hoạt: Bật/tắt dẫn đến ẩn/hiển thị trường dữ liệu khác tức thì hoặc kích hoạt API chạy ngầm. | **Req_07** (Business Rules)<br>**Req_10** (API/External System) |
| **File Upload (Image/Doc)** | - Định dạng file: Chỉ chấp nhận phần mở rộng/MIME type hợp lệ (ví dụ: .png, .jpg, .pdf).<br>- Kích thước file: Dung lượng file tối đa cho phép (Max upload size).<br>- Số lượng: Số lượng file tối đa có thể upload cùng lúc (Single/Multi-upload).<br>- Tính toàn vẹn/Bảo mật: Ngăn chặn upload file giả mạo đuôi (File spoofing), kiểm tra mã độc trong file.<br>- Trải nghiệm: Hỗ trợ tính năng kéo và thả (Drag & Drop), tiến trình upload (Progress bar). | **Req_08** (Validations)<br>**Req_15** (Risks) |
| **Rich Text Editor** | - Giới hạn dữ liệu: Độ dài tối đa ký tự (bao gồm cả thẻ HTML ẩn).<br>- Định dạng sao chép: Xử lý làm sạch định dạng khi copy/paste văn bản từ Word/Web.<br>- Bảo mật: Loại bỏ hoàn toàn các thẻ `<script>`, `<iframe>` nguy hại. | **Req_08** (Validations)<br>**Req_15** (Risks) |
| **Multi-select / Tag Inputs** | - Số lượng: Số lượng tag tối thiểu/tối đa được phép chọn.<br>- Ràng buộc trùng: Không cho phép thêm trùng lặp cùng một tag.<br>- Thao tác xóa: Dễ dàng xóa tag bằng nút "x" hoặc phím Backspace. | **Req_08** (Validations)<br>**Req_11** (Accessibility) |
| **Hidden Input** | - Tính đúng đắn: Dữ liệu ẩn (ID, Token) khớp với DB hoặc Session hiện tại.<br>- Bảo mật: Không thể chỉnh sửa hoặc thao túng dữ liệu ẩn thông qua công cụ Inspect Element/Developer Tools để bypass logic nghiệp vụ. | **Req_15** (Risks)<br>**Req_02** (Scope Boundary) |

---

## Checklist tổng quát (Áp dụng cho mọi trường & Form)

### 1. Phân quyền và Phạm vi kiểm thử (Scope & Permissions)
- [ ] **Trạng thái UI theo vai trò (Req_06 & Req_02):** Kiểm tra xem các trường thông tin có hiển thị đúng trạng thái (Enabled/Disabled/Read-only) tương ứng với quyền của tài khoản đang đăng nhập hay không.
- [ ] **Bám sát phạm vi kiểm thử (Req_02 & Req_16):** Chỉ thực hiện test các input thuộc Scope chỉ định của màn hình/tính năng, không mở rộng kiểm thử sang các module ngoài phạm vi.

### 2. Trải nghiệm người dùng & Thông báo lỗi (UX & Error Handling)
- [ ] **Thời điểm kiểm tra (Validation Trigger):** Lỗi phải hiển thị đúng lúc (khi bấm Submit hoặc ngay khi người dùng Focus out/Blur khỏi trường nhập).
- [ ] **Nội dung thông báo lỗi (Req_08):** Thông báo lỗi phải rõ ràng, chỉ rõ tên trường bị lỗi và cách khắc phục (ví dụ: "Email không đúng định dạng", không thông báo chung chung như "Lỗi nhập liệu").
- [ ] **Giữ lại dữ liệu lỗi (UX):** Hệ thống không được tự động xóa (clear) các dữ liệu người dùng đã nhập lỗi khi hiển thị thông báo lỗi, để người dùng dễ sửa đổi.
- [ ] **Tập trung con trỏ (Focus):** Sau khi Submit thất bại, tự động chuyển tiêu điểm (Focus) vào trường nhập liệu bị lỗi đầu tiên từ trên xuống dưới.

### 3. Khả năng tiếp cận (Accessibility - Req_11)
- [ ] **Liên kết nhãn (Labeling):** Mọi trường input phải được liên kết chính xác với một thẻ `<label>` bằng thuộc tính `for` tương ứng với `id` của input đó.
- [ ] **Thuộc tính ARIA:** Các trường bắt buộc phải có thuộc tính `aria-required="true"`. Khi có thông báo lỗi hiển thị, input tương ứng phải được bổ sung thuộc tính `aria-invalid="true"` và trỏ tới ID của thông báo lỗi qua `aria-describedby`.
- [ ] **Thông báo lỗi động (Aria Live):** Khung chứa thông báo lỗi phải sử dụng `aria-live="assertive"` để Screen Reader ngay lập tức đọc nội dung lỗi cho người dùng khiếm thị khi nó xuất hiện.

### 4. Tính tương thích & Bảo mật (Compatibility & Security - Req_12 & Req_15)
- [ ] **Bản phím ảo trên di động (Req_12):** Hiển thị đúng loại bàn phím ảo trên Mobile/Tablet (ví dụ: bàn phím chữ cái cho Text, bàn phím số/number cho Number, bàn phím email chứa phím `@` cho Email).
- [ ] **Chống Bypass Validation (Req_15):** Kiểm tra xem hệ thống có xử lý validate ở phía Server (Server-side validation) hay không. Thử nghiệm gửi dữ liệu lỗi bằng cách vô hiệu hóa Javascript trên trình duyệt hoặc gọi API trực tiếp qua công cụ (Postman/Fiddler) để đảm bảo API từ chối dữ liệu không hợp lệ.

---

## Hướng dẫn thực hiện
Khi thiết kế test case (Bước 03. Test Scenario & Case Builder), QA bắt buộc phải đối chiếu **TẤT CẢ các trường nhập liệu** trong màn hình kiểm thử với bảng **Ma trận kiểm thử Validation** này. 
*Lưu ý: Ngay cả đối với các trường Không bắt buộc (Optional Fields), nếu người dùng có nhập dữ liệu, QA vẫn phải thực hiện kiểm thử đầy đủ các quy tắc validation tương ứng (như Trimming, loại ký tự đặc biệt, độ dài tối đa).*

---

## From: 02-ui-testing/02.03.navigation.md

# 02.03. Navigation (Điều hướng)

## Mục đích
Đảm bảo luồng di chuyển của người dùng giữa các trang, các phần của ứng dụng diễn ra liền mạch, đúng logic nghiệp vụ và không có các liên kết bị lỗi hoặc ngõ cụt.

## Kiến thức cần có
- Hiểu biết về User Flow (Luồng người dùng).
- Khái niệm về Sitemap và cấu trúc liên kết nội bộ.
- Kiến thức về Breadcrumbs, Pagination (Phân trang) và Deep Linking.

## Quy trình thực hiện
1. **Kiểm tra Menu & Links:** Click vào tất cả các mục menu, footer links, và các liên kết trong nội dung để đảm bảo dẫn đến đúng trang.
2. **Kiểm tra Nút Back/Forward:** Sử dụng tính năng quay lại và tiến tới của trình duyệt để xác nhận trạng thái trang được bảo toàn hoặc cập nhật đúng.
3. **Kiểm tra Breadcrumbs:** Xác nhận đường dẫn phân cấp hiển thị đúng vị trí hiện tại và có thể click để quay lại các cấp cha.
4. **Kiểm tra Phân trang:** Kiểm tra việc chuyển trang, nhảy trang và hiển thị số lượng bản ghi trên mỗi trang.
5. **Kiểm tra Deep Link:** Sao chép URL của một trang cụ thể và mở trong tab ẩn danh để xem hệ thống có dẫn trực tiếp đến trang đó (hoặc yêu cầu login) đúng hay không.

## Cách viết Steps điều hướng trong testcase

> Xem chuẩn đầy đủ ở `test-skills/rules/qa-writing-standards.md` mục 6.2.

Không viết trần path/URL kỹ thuật trong Steps. Mô tả đúng thao tác click menu/tab qua UI, path kỹ thuật đi kèm trong ngoặc để đối chiếu:

```text
<n>. Click menu "<Tên menu>" → click "<Tên màn hình/tab>" để mở màn hình <Tên màn hình> (<path>).
```

Ví dụ mở `/supplier/orders`: `1. Click menu "注文管理".<br>2. Click "注文" để mở màn hình 注文管理 (/supplier/orders).`

Ngoại lệ: case đang test chính hành vi gõ thẳng URL (kiểm tra chặn truy cập trực tiếp khi chưa đăng nhập, kiểm tra deep-link) — khi đó path là dữ liệu test, được phép ghi thẳng "Nhập trực tiếp URL `<path>` vào thanh địa chỉ trình duyệt".

## Checklist
- [ ] Có liên kết nào dẫn đến trang lỗi 404 hoặc trang trắng không?
- [ ] Các liên kết mở trong tab mới (target="_blank") có hoạt động đúng yêu cầu?
- [ ] Menu có làm nổi bật (Highlight) mục hiện tại khi người dùng đang ở trang đó?
- [ ] Sau khi thực hiện một hành động (vd: lưu), hệ thống có điều hướng về đúng trang mong đợi?
- [ ] Logo ứng dụng có luôn dẫn về trang chủ khi được click?

## Output mong đợi
- Sơ đồ các luồng điều hướng chính đã được kiểm thử.
- Danh sách các lỗi liên kết (Broken links) hoặc lỗi điều hướng logic.

---

## From: 02-ui-testing/02.04.localization.md

# 02.04. Localization (Địa phương hóa)

## Mục đích
Đảm bảo ứng dụng hiển thị chính xác ngôn ngữ, định dạng dữ liệu và tuân thủ các quy tắc văn hóa của người dùng ở từng vùng địa lý khác nhau (i18n & l10n).

## Kiến thức cần có
- Khái niệm Internationalization (i18n) và Localization (l10n).
- Hiểu biết về các bộ mã ký tự (UTF-8).
- Quy tắc định dạng ngày tháng, tiền tệ, số điện thoại của các quốc gia mục tiêu.

## Quy trình thực hiện
1. **Chuyển đổi ngôn ngữ:** Thay đổi Locale/Ngôn ngữ trong cài đặt ứng dụng hoặc trình duyệt.
2. **Kiểm tra dịch thuật:** Rà soát toàn bộ giao diện (Labels, Buttons, Tooltips, Messages) để đảm bảo không còn văn bản tiếng gốc (hardcoded).
3. **Kiểm tra định dạng:** Xác nhận ngày tháng (vd: DD/MM/YYYY vs MM/DD/YYYY), tiền tệ (vd: $, VND), và dấu phân cách hàng ngàn/thập phân hiển thị đúng.
4. **Kiểm tra Layout:** Xem xét giao diện khi chuyển sang ngôn ngữ có từ ngữ dài (vd: tiếng Đức) hoặc ngắn để đảm bảo không vỡ layout.
5. **Kiểm tra hình ảnh/icon:** Đảm bảo các hình ảnh hoặc biểu tượng không gây hiểu lầm hoặc vi phạm văn hóa địa phương.

## Checklist
- [ ] Mọi văn bản hiển thị trên UI đã được dịch hoàn toàn?
- [ ] Ký tự đặc biệt (có dấu, chữ tượng hình) hiển thị đúng, không lỗi font?
- [ ] Định dạng số và tiền tệ có phù hợp với quốc gia đã chọn?
- [ ] Thời gian hiển thị có đúng với múi giờ (Timezone) của người dùng không?
- [ ] Có lỗi layout (vỡ khung, tràn chữ) do độ dài văn bản dịch khác nhau?

## Output mong đợi
- Bảng đối chiếu dịch thuật đã kiểm tra.
- Danh sách các lỗi về font chữ, định dạng hoặc nội dung chưa được địa phương hóa.