Playwright Component Testing cho Tester: test UI cô lập nhanh hơn E2E (có trắc nghiệm)

1. Tóm tắt nhanh & Playwright Component Testing là gì

Chào bạn! Khi mới làm quen với automation, bạn thường học Playwright qua các test E2E: mở trình duyệt, vào trang, điền form, bấm nút. Cách đó rất trực quan nhưng có một vấn đề: mỗi test phải tải cả một trang web, đôi khi cả một luồng nhiều bước, nên chạy chậm và dễ 'flaky' (lúc pass lúc fail) vì phụ thuộc mạng, tốc độ server. Component Testing giải quyết đúng vấn đề đó cho một nhóm test rất lớn: các test chỉ liên quan tới MỘT component UI, không cần cả hệ thống.

2. Component Testing khác gì E2E Testing

Hãy nghĩ về kim tự tháp kiểm thử: dưới cùng là Unit Test (test một hàm thuần, không có UI), ở giữa là Component Test (test một component UI cô lập), trên cùng là E2E Test (test cả một luồng qua trình duyệt thật, có server/API thật). Càng lên cao, test càng 'thật' hơn nhưng cũng càng chậm và tốn công bảo trì hơn.

Điểm mấu chốt: CT KHÔNG thay thế E2E, mà lấp đúng khoảng trống mà Unit Test không với tới (vì Unit Test không đụng DOM) và E2E làm quá chậm để chạy thường xuyên (vì phải tải cả trang). Một dự án khỏe mạnh thường có rất nhiều Unit Test, khá nhiều Component Test, và một số ít E2E Test cho các luồng quan trọng nhất.

3. Vì sao Tester nên biết Playwright CT

Ngày càng nhiều đội frontend tách UI thành các component nhỏ, tái sử dụng (nút, thẻ sản phẩm, giỏ hàng mini…). Nếu chỉ test qua E2E, bạn phải đi qua nhiều màn hình chỉ để chạm được một component sâu bên trong — vừa chậm vừa khó tạo ra những trạng thái hiếm (như 'hết hàng', 'lỗi mạng', 'vượt tồn kho'). CT cho bạn quyền truy cập trực tiếp: truyền thẳng props để tạo ra bất kỳ trạng thái nào bạn muốn, ngay lập tức.

Với Tester automation, biết CT nghĩa là bạn có thêm một công cụ đúng việc: khi cần kiểm tra kỹ một component (nhiều biến thể props, nhiều trạng thái), CT nhanh gấp chục lần và cho phản hồi ngay trong Pull Request — trước khi code được merge. Đây cũng là kỹ năng ngày càng được các công ty làm sản phẩm (SaaS, TMĐT) hỏi trong phỏng vấn vị trí SDET/Automation Tester.

4. Chuẩn bị: cài đặt & cấu hình Playwright CT

Playwright CT là gói riêng, không dùng chung file cấu hình với E2E. Với dự án React, bạn cần cài @playwright/experimental-ct-react và tạo một file cấu hình CT riêng.

▶ Bước 1: Cài gói CT cho React: npm install -D @playwright/experimental-ct-react.

▶ Bước 2: Tạo file playwright-ct.config.ts, chỉ định testDir trỏ tới thư mục chứa các file *.spec.tsx của component.

▶ Bước 3: Chạy thử: npx playwright test -c playwright-ct.config.ts để xác nhận môi trường mount hoạt động.