Playwright Assertions và Wait - Kiểm tra chính xác trạng thái UI và xử lý bất đồng bộ

Trong bài trước, chúng ta đã nắm vững cách sử dụng Playwright Locators để tìm và tương tác với các elements. Tuy nhiên, để tạo ra những test cases thực sự có giá trị, chúng ta cần verify rằng ứng dụng hoạt động đúng như mong đợi. Đây chính là lúc Playwright Assertions phát huy tác dụng. Ở bài này chúng ta sẽ cùng tìm hiểu cách xác nhận (assert) hành vi và chờ (wait) hợp lý để xử lý các tương tác không đồng bộ như loading, animation, hoặc chờ response từ server.

1. Assertion là gì?

Assertion trong Playwright là câu lệnh kiểm tra một điều kiện nào đó đúng hoặc sai sau khi thực hiện thao tác. Assertions trong Playwright được thiết kế đặc biệt cho web testing với các tính năng nổi bật:

• Auto-waiting: Tự động chờ đến khi condition được thỏa mãn
• Retry mechanism: Tự động retry trong một khoảng thời gian nhất định
• Meaningful error messages: Thông báo lỗi chi tiết và dễ hiểu
• Built-in timeouts: Timeout tự động để tránh test bị treo

Ví dụ đơn giản:

await expect(page).toHaveTitle('Trang chủ | IT Demo');

Nếu tiêu đề không đúng, test sẽ fail ngay lập tức.

Cấu trúc cơ bản của Assertions

Playwright sử dụng expect function với cú pháp rõ ràng và dễ đọc:

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

test('Basic assertion structure', async ({ page }) => {
  await page.goto('https://dummy-demo-njndx.web.app');
  
  // Cấu trúc cơ bản: expect(locator).matcher()
  await expect(page.getByRole('heading')).toBeVisible();
  await expect(page).toHaveTitle('Home | IT Demo Dummy');
  await expect(page.getByText('Welcome')).toContainText('Welcome');
});

2. Các loại Assertion phổ biến trong Playwright

Playwright tích hợp sẵn thư viện @playwright/test với nhiều hàm assertion mạnh mẽ:

a. Kiểm tra tiêu đề trang

await expect(page).toHaveTitle(/Demo Dummy/);

b. Kiểm tra URL

await expect(page).toHaveURL(/\/dashboard/);

c. Kiểm tra text

await expect(page.getByTestId('error-msg')).toHaveText('Tài khoản không hợp lệ');

d. Kiểm tra visibility (hiển thị)

await expect(page.getByRole('heading', { name: 'Todo List' })).toBeVisible();

e. Kiểm tra checked, enabled, disabled

await expect(page.getByLabel('Ghi nhớ đăng nhập')).toBeChecked();
await expect(page.getByRole('button', { name: 'Gửi' })).toBeEnabled();

3. Cách hoạt động của Assertion + Auto-wait

Playwright tự động chờ cho đến khi điều kiện assert đúng (hoặc hết timeout mặc định – 5 giây).

Ví dụ:

await expect(page.locator('.loading-done')).toBeVisible();

➡️ Nếu .loading-done chưa xuất hiện, Playwright sẽ tự động đợi (polling) đến khi nó xuất hiện hoặc hết thời gian timeout.

Bạn không cần gọi waitForTimeout hoặc sleep như trong các framework cũ.

4. Kỹ thuật Wait nâng cao

a. Wait cho phần tử xuất hiện

await page.waitForSelector('#result');

b. Wait cho phần tử biến mất

await page.waitForSelector('.loading', { state: 'hidden' });

c. Wait cho event cụ thể (như navigation, load)

await Promise.all([
  page.waitForNavigation(),
  page.getByRole('link', { name: 'Dashboard' }).click()
]);

5. Assertion tốt vs Assertion xấu

❌ Không nên:

await page.locator('#status').innerText() === 'Đăng nhập thành công';

➡️ Không dùng assert ngoài Playwright vì không auto-wait, dễ fail.

✅ Nên dùng:

await expect(page.locator('#status')).toHaveText('Đăng nhập thành công');

6. Điều chỉnh timeout nếu cần

Nếu bạn cần đợi lâu hơn (ví dụ: xử lý lâu hoặc load chậm):

await expect(page.locator('#status')).toHaveText('Hoàn tất', { timeout: 10000 });

7. Kết hợp Assertion + Wait để viết test chắc chắn

Ví dụ kiểm tra chức năng gửi form:

await page.getByPlaceholder('Email').fill('user@example.com');
await page.getByPlaceholder('Password').fill('123456');
await page.getByRole('button', { name: 'Đăng nhập' }).click();

// Đợi message hiển thị
await expect(page.getByTestId('login-success')).toHaveText('Đăng nhập thành công');

8. Debug khi assertion thất bại

Bạn có thể chạy test ở chế độ UI:

npx playwright test --debug

Hoặc thêm lệnh await page.pause(); để xem trước trạng thái UI ngay lúc test chạy.

9. Tổng kết

Kết luận

Playwright Assertions là trái tim của test automation, giúp verify rằng ứng dụng hoạt động đúng như mong đợi. Những điểm quan trọng cần nhớ:

Key Takeaways:

1. Auto-waiting: Assertions tự động chờ điều kiện được thỏa mãn
2. Đa dạng assertion types: Page, element, content, state, count, screenshot
3. Meaningful error messages: Thông báo lỗi chi tiết giúp debug nhanh
4. Flexible timeout: Có thể tùy chỉnh timeout cho từng assertion
5. Soft assertions: Cho phép test tiếp tục dù có assertion fail

Best Practices:

• Sử dụng assertions có ý nghĩa và specific
• Kết hợp nhiều loại assertions để test toàn diện
• Sử dụng custom timeouts phù hợp với từng trường hợp
• Test cả happy path và error scenarios
• Sử dụng screenshot assertions để detect visual regression

Việc thành thạo Playwright Assertions sẽ giúp bạn tạo ra những test cases robust, reliable và có giá trị thực tế cao.