Triển khai Playwright E2E cho website này

Kiểm thử tự động chỉ thực sự đáng tin khi nó mô phỏng đúng hành vi của người dùng thật trên trình duyệt thật.

🧭 Mô hình tổng thể

Source Commit -> Build Preview Site -> Playwright Runner
                         |                    |
                         |                    +-> Desktop Chrome (1280x720)
                         |                    +-> Mobile Pixel 5 (375x812)
                         v
                Quality Gate (Pass 100%) -> Public HTML Test Report

Quy trình kiểm thử đầu cuối (End-to-End Testing) sử dụng Playwright để tự động khởi tạo môi trường xem trước (preview server), sau đó chạy song song các kịch bản người dùng trên cả hai cấu hình màn hình máy tính và thiết bị di động. Kết quả được lưu trữ thành báo cáo trực quan có lịch sử chạy phục vụ nghiệm thu chất lượng phần mềm.

📱 Thiết bị và môi trường thực thi

Hệ thống thiết lập hai hồ sơ thiết bị (device profiles) độc lập nhằm bảo đảm trải nghiệm đồng nhất trên mọi kích thước màn hình:

• Chromium Desktop: Mô phỏng trình duyệt Chrome máy tính với khung nhìn 1280×720 pixel, kiểm tra khả năng tương tác chuột, bàn phím và bố cục đa cột.
• Chromium Mobile: Mô phỏng điện thoại Google Pixel 5 với khung nhìn 375×812 pixel, kiểm tra tương tác cảm ứng, thanh tiến độ cuộn trang và bảo đảm giao diện không bị tràn ngang (scrollWidth <= window.innerWidth).

Mỗi kịch bản kiểm thử được chạy độc lập trên cả hai môi trường, giúp phát hiện sớm các lỗi vỡ giao diện hoặc mất cân đối tính năng giữa desktop và mobile.

🎯 Phạm vi kiểm thử các tính năng cốt lõi

Tính năng chính
|
+-- Header Navigation
|   `-- 5 domain -> đúng URL + H1
+-- Reading Time
|   `-- cuộn 0% -> 100% -> "Đã đọc xong"
+-- Pagefind Search
|   `-- từ khóa Việt + ?q= -> kết quả / fallback
+-- Tag Filter
|   `-- trạng thái lọc còn trên URL
+-- No-JS Fallback
|   `-- bài, directory, changelog vẫn đọc được
+-- Accessibility (AxeBuilder)
|   `-- không có lỗi nghiêm trọng
`-- Route không có
    `-- 404 -> về trang chủ / tìm kiếm

Các kịch bản chạy trên cả Desktop Chrome và Mobile Pixel 5. Fallback là đường dẫn thay thế khi chỉ mục tìm kiếm không dùng được; AxeBuilder quét DOM để phát hiện lỗi tiếp cận nghiêm trọng.

⚙️ Tích hợp CI/CD - Github Action

PR Created -> Quality Gate (Smoke Tests) -> Merge Main -> Deploy Pages
                    |                                          |
                    +-- Chặn merge nếu có lỗi                  +-- Xuất HTML Report

1. Trên Pull Request: Mỗi khi có thay đổi mã nguồn, GitHub Actions tự động kích hoạt bộ smoke test để kiểm tra tính toàn vẹn trước khi cho phép hợp nhất vào nhánh chính.

2. Trên nhánh Main: Khi deploy lên production, toàn bộ bài test được thực thi, xuất bản tệp HTML report chi tiết và cập nhật lịch sử kiểm thử vào snapshot phục vụ công khai trên website.

🔗 Các báo cáo kiểm thử công khai

Kết quả kiểm thử Playwright được tổ chức thành hai tầng báo cáo độc lập:

• Trang tổng quan và Lịch sử đo lường: https://pkduong.github.io/playwright-test/ — Thể hiện tổng số bài test, tỷ lệ vượt qua (Pass Rate 100%), thời gian chạy và bảng lịch sử kiểm thử qua từng commit. Liên kết này được tích hợp ngay tại footer của toàn bộ website (Playwright report | Hiệu năng lab: LCP 757 ms | Báo cáo tải K6).

• Báo cáo HTML nguyên bản chi tiết: https://pkduong.github.io/playwright-test/report/index.html — Báo cáo tương tác chính thức của Playwright với đầy đủ các bước thực thi, ảnh chụp màn hình và phân loại chi tiết theo từng trình duyệt.

📚 Kết luận

Kiểm thử tự động với Playwright tạo thành lớp bảo vệ chất lượng thứ ba bên cạnh Vitest (Unit Test) và Lighthouse/K6 (Performance Test). Việc kết hợp kiểm thử đa thiết bị với chế độ no-JS giúp website duy trì độ bền vững cao, không bị hồi quy tính năng sau mỗi lần phát hành mã nguồn mới.

🧾 Tóm tắt bỏ túi (Take away)

📝 Nhật ký thay đổi bộ kiểm thử (Test Changelog)