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');
});