Một tính năng vô cùng mạnh mẽ trong Playwright nói riêng và trong ngôn ngữ lập trình bất đồng bộ nói chung là tự động chờ – auto-waiting. Và Playwright đã làm rất tốt điều này thông qua wait. Trước tiên, nếu bạn không biết hãy cùng mình tìm hiểu xem Auto-waiting là gì ngay sau đây nhé!
Auto-Waiting Là Gì?
Auto-Waiting là một tính năng mạnh mẽ của Playwright, giúp tự động chờ (wait) cho các điều kiện cụ thể trước khi thực hiện hành động hoặc kiểm tra. Điều này giúp giảm thiểu việc phải viết các lệnh wait thủ công và làm cho các bài kiểm thử ổn định hơn.
Ví dụ về Auto-Waiting:
// Tự động chờ khi nhấp vào phần tử
await page.click('button#submit'); // Playwright sẽ chờ cho đến khi nút có thể nhấp được
// Tự động chờ khi nhập văn bản
await page.fill('input#username', 'testuser'); // Playwright sẽ chờ cho đến khi ô nhập liệu sẵn sàng
// Tự động chờ khi kiểm tra trạng thái
await expect(page.locator('div#success-message')).toBeVisible(); // Playwright sẽ chờ cho đến khi phần tử hiển thị
// Tự động chờ khi điều hướng
await page.goto('<https://example.com>'); // Playwright sẽ chờ cho đến khi trang tải xon
Cách hoạt động của Auto-Waiting
Playwright tự động chờ trong các trường hợp sau:
- Khi thực hiện hành động trên phần tử. Playwright sẽ tự động chờ cho đến khi phần tử hiển thị trên trang và có thể tương tác (không bị ẩn, không bị che khuất, không bị vô hiệu hóa). Ví dụ:
click,fill,type,hover, v.v. - Khi kiểm tra trạng thái của phần tử. Playwright sẽ tự động chờ cho đến khi trạng thái của phần tử khớp với điều kiện được yêu cầu. Ví dụ:
isVisible,isEnabled,isChecked, v.v. - Khi điều hướng trang: Playwright sẽ tự động chờ cho đến khi điều hướng hoàn tất (theo mặc định là sự kiện
load). Ví dụ:page.goto,page.waitForNavigation. - Khi chờ tải tài nguyên mạng: Playwright sẽ tự động chờ cho đến khi yêu cầu hoặc phản hồi mạng khớp với điều kiện được chỉ định. Ví dụ:
waitForResponse,waitForRequest.
Tại Sao Auto-Waiting Quan Trọng
Auto-waiting quan trọng bởi chúng giúp bài kiểm tra của bạn tin cậy hơn, có khả năng phục hồi và giảm độ không ổn định trong bài kiểm tra của mình. Chúng ta đã biết về từ khoá await mà bạn phải sư mỗi khi làm việc với promise, các loại phương thức và promise, loại hàm JavaScipt có thể đợi điều kiện mong muốn nhất định cho đến giới hạn thời gian chờ.
Rất quan trọng để hiểu rõ khái niệm này để đảm bảo rằng bạn viết bài kiểm tra đáng tin cậy và có khả năng phục hồi và giảm độ không ổn định trong bài kiểm tra của mình. Và khái niệm này được nhà viết kịch sử dụng để đợi các thành phần web khả dụng trên trang và tương tác với chúng để điều này xảy ra tự động.
Lợi ích của Auto-Waiting:
- Giảm thiểu lỗi do thời gian tải không đồng bộ: Bạn không cần phải thêm các lệnh
waitthủ công nhưpage.waitForTimeout. - Tăng tính ổn định của bài kiểm thử: Playwright tự động xử lý các trạng thái không đồng bộ, giúp bài kiểm thử ít bị lỗi hơn.
- Giảm mã thừa: Không cần viết thêm các đoạn mã để kiểm tra trạng thái của phần tử trước khi thực hiện hành động.
- Tăng tốc độ phát triển: Tập trung vào logic kiểm thử thay vì xử lý các vấn đề liên quan đến đồng bộ hóa.
Khi Nào Cần Sử Dụng Chờ Thủ Công?
Mặc dù Auto-Waiting rất mạnh mẽ, nhưng trong một số trường hợp, bạn vẫn cần sử dụng chờ thủ công:
- Chờ một điều kiện cụ thể không được hỗ trợ bởi Auto-Waiting.Ví dụ: Chờ một API trả về dữ liệu cụ thể.
await page.waitForResponse(response => response.url().includes('/api/data') && response.status() === 200);
- Chờ một khoảng thời gian cố định (không khuyến khích). Ví dụ: Chờ 2 giây trước khi thực hiện hành động tiếp theo.
await page.waitForTimeout(2000); // Không khuyến khích vì làm chậm bài kiểm thử
- Chờ cho một trạng thái tùy chỉnh. Ví dụ: Chờ cho đến khi một phần tử có thuộc tính cụ thể.
await page.waitForFunction(() => document.querySelector('#element')?.getAttribute('data-loaded') === 'true');
Mình xin tạm dừng bài viết về Auto-waiting tại đây. Bạn có thể tham khảo thêm về auto-waiting tại trang web chính thức của playwright. Hẹn gặp lại bạn trong các bài viết tiếp theo!
Happy testing!