Các loại Wait trong Playwright – Cách xử lý đồng bộ hiệu quả trong kiểm thử tự động

Trong kiểm thử tự động với web, một trong những vấn đề phổ biến nhất là đồng bộ (synchronization) giữa test script và trạng thái thực tế của ứng dụng. Nếu không xử lý đúng, test có thể bị flaky (lúc pass lúc fail).

Playwright giải quyết vấn đề này rất tốt nhờ cơ chế auto-waiting kết hợp với nhiều loại wait linh hoạt giúp bạn kiểm soát chính xác thời điểm thực thi.

1. Auto-waiting (Cơ chế mặc định)

Playwright có cơ chế tự động chờ trước khi thực hiện hành động. Điều này giúp giảm rất nhiều lỗi timing trong test.

Khi bạn thực hiện một action như click, Playwright sẽ tự động đảm bảo element:

• Đã có trong DOM
• Hiển thị (visible)
• Không bị animation
• Đang ở trạng thái sẵn sàng tương tác
• Có thể nhận sự kiện

await page.locator('#button').click();

👉 Bạn không cần thêm wait thủ công trong hầu hết các trường hợp.

2. Wait theo trạng thái (Selector States)

Trong một số tình huống đặc biệt, bạn cần chờ element đạt một trạng thái cụ thể.

Chờ hiển thị (visible)

await page.locator('.modal').waitFor({ state: 'visible' });

Chờ ẩn (hidden)

await page.locator('.spinner').waitFor({ state: 'hidden' });

Chờ attach/detach DOM

await page.locator('#dynamic').waitFor({ state: 'attached' });

👉 Cách này hữu ích khi làm việc với modal, loading spinner hoặc DOM động.

3. Wait cho Navigation (Điều hướng trang)

Khi làm việc với chuyển trang, Playwright hỗ trợ chờ URL hoặc trạng thái load.

Chờ URL thay đổi

await page.goto('https://example.com');
await page.waitForURL('**/success');

Chờ trạng thái load của trang

await page.waitForLoadState('load');
await page.waitForLoadState('domcontentloaded');
await page.waitForLoadState('networkidle');

👉 Rất hữu ích khi test SPA hoặc trang có nhiều request API.

4. Custom Wait Function (Chờ theo điều kiện tùy chỉnh)

Khi logic phức tạp hơn, bạn có thể tự định nghĩa điều kiện chờ.

await page.waitForFunction(() => {
  return document.querySelector('.counter').innerText === '10';
});

Chờ với polling interval

await page.waitForFunction(
  () => window.someVariable === true,
  { polling: 100 }
);

👉 Dùng khi bạn cần kiểm tra state của UI hoặc biến JS trong page.

5. Wait với Timeout

Bạn có thể kiểm soát thời gian chờ tối đa cho từng tình huống.

Timeout cho element

await page.locator('.slow-element').waitFor({
  timeout: 60000
});

Timeout cho toàn bộ test

test.setTimeout(120000);

👉 Tránh test bị fail sớm khi hệ thống chậm.

6. Conditional Wait (Chờ điều kiện song song)

Trong một số case, bạn cần chờ nhiều khả năng xảy ra và lấy kết quả đầu tiên.

const result = await Promise.race([
  page.waitForSelector('.success'),
  page.waitForSelector('.error')
]);

👉 Hữu ích trong flow xử lý kết quả API hoặc trạng thái hệ thống không xác định trước.

Kết luận

Việc hiểu và sử dụng đúng các loại wait trong Playwright giúp bạn:

• Giảm flaky test
• Tăng độ ổn định test suite
• Viết test ngắn gọn hơn nhờ auto-waiting
• Xử lý tốt các tình huống UI phức tạp

Playwright đã thiết kế hệ thống wait rất thông minh, vì vậy thay vì lạm dụng sleep, bạn nên ưu tiên các cơ chế wait có sẵn để test trở nên đáng tin cậy hơn.