https://playwright.dev/docs/navigations

Introduction

• Playwright có khả năng navigate (điều hướng) đến các URL và xử lý mọi việc xảy ra khi người dùng tương tác với trang web

Basic navigation

• Cách đơn giản nhất để navigation là mở 1 URL

// Navigate the page
await page.goto('https://example.com');

• Đoạn code trên sẽ tải lại trang web và chờ cho đến khi trang web kích hoạt load event – load event được kích hoạt khi toàn bộ trang web được tải xong bao gồm các dependent resources như: stylesheet, script, iframe, image
  • Hãy hình dung như bạn lái xe đến 1 quán cà phê, phải đợi đến khi mọi thứ trong quán đều sẵn sàng từ bàn ghế, cốc, đồ uống thì mới có thể ngồi xuống thưởng thức được.
• Note: Nếu trang web navigate bạn sang khác trước khi trang hiện tại load xong, page.goto() sẽ chờ đến khi trang mới tải xong rồi mới tiếp tục.

Khi nào thì page loaded xong?

• Các trang web hiện đại thực hiện nhiều việc sau khi load event được trigger.
  • Ví dụ: lazy load, cập nhật UI, tải resource, script và stylesheet nặng khác sau khi load event được trigger
• Không có cách nào để xác định được chính xác trang đã được tải hoàn tất – điều này còn phụ thuộc vào từng website, framework,… Vậy thì khi nào bạn có thể bắt đầu tương tác với trang?
• Trong Playwright, bạn có thể tương tác với trang bất kỳ lúc nào. Nó sẽ tự động chờ cho các target element trở nên có thể thao tác được

// Navigate and click element
// Click will auto-wait for the element
await page.goto('https://example.com');
await page.getByText('Example Domain').click();

• Trong đoạn code trên, nó sẽ chờ cho đến khi “Example Domain” hiển thị, chờ cho đến khi có thể click được(không bị hide, disable,…) rồi mới click vào nó
• Playwright giống như 1 người dùng cực kỳ nhanh tay, thấy text hiển thị là click ngay. Bạn không cần phải lo lắng về việc xem tất cả mọi thứ đã tải xong chưa, Playwright sẽ tự lo hết

Hydration

• Đôi khi bạn sẽ gặp phải tình huống Playwright sẽ thực hiện hành động, nhưng không có gì xảy ra.
  • Hoặc bạn nhập vào input, nhưng nó lại biến mất! Lý do phổ biến nhất là trang web chưa “tỉnh ngủ” hoàn toàn (hydration)
• Hình dung trang web như 1 người vừa mới thức dậy. Ban đầu họ sẽ “lờ đờ” gửi cho bạn 1 bản nháp (static version) của trang web. Sau đó, họ mới “tỉnh táo” hơn, gửi thêm phần động (dynamic part) và trang web mới hoạt động đầy đủ
• Playwright thì thấy gì là làm ngay. Nếu thấy hiển thị trên trang web nhưng các listener chưa được thêm vào, click vào nó sẽ không có bất kỳ phản hồi nào
• Để kiểm tra xem web có bị hydration không, bạn có thể mở Chrome DevTools, chọn Slow 3G trong phần Network và load lại trang. Nếu bị hydration, bạn sẽ thấy nó sẽ không phản hồi và text nhập vào sẽ bị xoá mất
• Cách để khắc phục lỗi này là đảm bảo các phần tử chúng ta tương tác đều bị disabled cho đến khi trang đã hoàn toàn hoạt động (tỉnh ngủ), nghĩa là bạn cần chỉnh sửa ở phía dev.

Waiting for navigation

• Click vào 1 phần tử có thể kích hoạt nhiều lần navigation. Trong trường hợp này nên sử dụng page.waitForUrl() để chờ đến 1 URL cụ thể

await page.getByText('Click me').click();
await page.waitForURL('**/login');

Navigation events

• Playwright chia quá trình hiển thị 1 trang web mới thành 2 giai đoạn: navigation và loading
• Navigation bắt đầu bằng cách thay đổi URL hoặc tương tác với trang web (như click vào 1 link). Tuy nhiên quá trình này có thể bị huỷ bỏ chẳng hạn như gặp 1 địa chỉ DNS không thể giải quyết hoặc chuyển thành download file
• Navigation được coi là “hoàn thành” khi response headers đã đọc xong của trang mới và cập nhật lịch sử duyệt web. Chỉ khi chuyển trang thành công, trang web mới bắt đầu loading document
• Loading bao gồm việc tải phần còn lại của dữ liệu từ network, phân tích dữ liệu, thực thi scripts, kích hoạt các event:
  • page.url() được đặt thành URL mới
  • Nội dung trang web được tải từ mạng và phân tích cú pháp
  • Event page.on('domcontentloaded') được trigger
  • Trang web thực thi 1 số script và download các resource như stylesheets và image
  • Event page.on(‘load’) được kích hoạt
  • Trang web tiếp tục thực thi dynamically loaded scripts
• Nói cách khác, navigation giống như bạn lái xe đến 1 địa điểm mới, còn loading giống như bạn bước vào 1 ngôi nhà mới, dọn dẹp, sắp xếp và tận hưởng không gian mới.