E2E Testing: Playwright - The Modern Standard

Unit Test kiểm tra từng viên gạch. Integration Test kiểm tra bức tường. E2E Test kiểm tra cả ngôi nhà. Nó mở trình duyệt thật lên, click chuột thật, và đảm bảo app chạy ngon lành.

Playwright (của Microsoft) hiện là công cụ E2E tốt nhất hệ mặt trời.

1. Playwright vs Cypress

2. Setup

npm init playwright@latest

Chọn folder tests/e2e. Nó sẽ cài trình duyệt và tạo file config.

3. Viết Test đầu tiên (tests/example.spec.ts)

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

test('Khách hàng mua thành công', async ({ page }) => {
  // 1. Vào trang chủ
  await page.goto('http://localhost:3000');

  // 2. Tìm sản phẩm và click
  await page.getByText('iPhone 15').click();
  
  // 3. Check xem đã vào trang chi tiết chưa
  await expect(page).toHaveURL(/product\/iphone-15/);
  
  // 4. Click Mua ngay
  await page.getByRole('button', { name: 'Thêm vào giỏ' }).click();

  // 5. Vào giỏ hàng check
  await page.goto('/cart');
  await expect(page.getByText('iPhone 15')).toBeVisible();
});

4. Tính năng Killer: Codegen

Lười viết code? Hãy để Playwright tự viết hộ bạn.

npx playwright codegen localhost:3000

Trình duyệt sẽ mở ra. Bạn click gì, gõ gì trên web, cửa sổ Terminal bên cạnh sẽ tự động sinh ra code test tương ứng. Bạn chỉ việc copy-paste.

5. Debugging: Trace Viewer

Khi test fail, bạn không cần đoán mò. Playwright lưu lại toàn bộ Trace:

• Video quay lại màn hình lúc chạy.
• Snapshot DOM từng milisecond.
• Network Request (API) từng cái một.

Bạn có thể "tua lại thời gian" để xem tại sao test lại fail.

6. CI/CD Integration

Playwright chạy Headless (không hiện UI) rất nhẹ, phù hợp nhét vào GitHub Actions.

# .github/workflows/playwright.yml
- name: Run Playwright tests
  run: npx playwright test

Kết luận

Đừng viết E2E cho mọi thứ (chậm lắm). Chỉ viết E2E cho các luồng Critical Path (những luồng hái ra tiền):

1. Đăng ký / Đăng nhập.
2. Checkout / Thanh toán.
3. Luồng Core của sản phẩm.