Kiểm thử đầu-cuối mô phỏng người dùng thật trên trình duyệt thật – mạnh nhưng đắt, nên dùng có chọn lọc.

Chọn công cụ kiểm thử giao diện

Ba công cụ phổ biến: Selenium (lâu đời, nhiều ngôn ngữ, cơ sở người dùng doanh nghiệp lớn), Cypress (chạy trong trình duyệt, trải nghiệm dev tốt) và Playwright (của Microsoft, hỗ trợ Chromium/Firefox/WebKit, nhiều ngôn ngữ, tự động chờ và công cụ gỡ lỗi mạnh). Hiện Playwright được xem là lựa chọn mặc định cho dự án web mới, nên bài này dùng nó; các nguyên tắc vẫn áp dụng cho công cụ khác.

Cài đặt và chạy thử

Cần Node.js đã cài. Trong thư mục dự án mới:

npm init playwright@latest
npx playwright test          # chạy toàn bộ (headless)
npx playwright test --ui     # giao diện tương tác, xem từng bước
npx playwright show-report   # xem báo cáo HTML

Viết kiểm thử đầu tiên

Kiểm thử mô phỏng người dùng: mở trang, tìm phần tử theo vai trò và nhãn như người dùng nhìn thấy, rồi kiểm tra kết quả.

import { test, expect } from '@playwright/test';

test('trang chủ có tiêu đề đúng', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await expect(page).toHaveTitle(/Playwright/);
});

test('mở trang Get started', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
});

Playwright tự chờ phần tử sẵn sàng trước khi thao tác và các khẳng định expect tự thử lại – vì vậy bạn hầu như không cần sleep cố định.

Gỡ lỗi và ổn định

Bật trace (trace: "on-first-retry" trong playwright.config) để khi kiểm thử đỏ trong CI, bạn mở Trace Viewer xem ảnh chụp từng bước, mạng và console. Dùng Page Object hoặc hàm hỗ trợ để gom các thao tác lặp, và dùng fixture để chuẩn bị dữ liệu/đăng nhập sẵn (lưu storageState) thay vì đăng nhập lại ở mọi ca.

Kiểm tra khả năng truy cập tự động

Có thể kết hợp thư viện @axe-core/playwright để quét lỗi truy cập cơ bản (thiếu nhãn, tương phản kém). Công cụ tự động chỉ phát hiện một phần vấn đề, vẫn cần kiểm tra thủ công bằng bàn phím và trình đọc màn hình.