https://playwright.dev/docs/events

Giới thiệu

• Playwright cho phép lắng nghe đa dạng các loại event xảy ra trên trang web như: network request, mở page mới,…
• Có một vài cách để subscribe tới các event này, add hoặc remove listener.

Chờ sự kiện

• Hầu như các script đều chờ một sự kiện nào đó xảy ra.
• Dưới đây là ví dụ thường gặp về việc chờ sự kiện (awaiting pattern)

// Bắt đầu chờ request từ trước khi goto. Note no await.
const requestPromise = page.waitForRequest('**/*logo*.png');
await page.goto('https://wikipedia.org');
const request = await requestPromise;
console.log(request.url());

• Chờ popup window

// Bắt đầu chờ popup từ trước khi click. Note no await.
const popupPromise = page.waitForEvent('popup');
await page.getByText('open the popup').click();
const popup = await popupPromise;
await popup.goto('https://wikipedia.org');

Thêm/ xóa event listener

• Đôi khi sự kiện xảy ra một các ngẫu nhiên.
• Thay vì việc chờ chúng thì ta nên gán một handler cho nó.
• Có thể hiểu handler là những logic xử lý.
  • Ví dụ thực tế: bạn thuê một người giúp việc, bảo là nếu có popup nào hiện lên thì click đóng đi
  • Thay vì bạn ngồi chờ nó hiện ra, đóng lại rồi mới tiếp tục làm việc.
  • Thì bạn thuê giúp việc, lúc nào xảy ra thì đóng là xong.
  • Bạn vẫn có thời gian làm việc của mình.

page.on('request', request => console.log(`Request sent: ${request.url()}`));
const listener = request => console.log(`Request finished: ${request.url()}`);
// On là bắt đầu lắng nghe sự kiện
page.on('requestfinished', listener);
await page.goto('https://wikipedia.org');

// Off là không lắng nghe sự kiện nữa
page.off('requestfinished', listener);
await page.goto('https://www.openstreetmap.org/');

Thêm sự kiện chỉ xảy ra một lần

• Đối với các sự kiện chỉ cần handle một lần, bạn có thể dùng once.
  • Tức là sau khi sự kiện xảy ra rồi, event handler sẽ tự động được remove đi

page.once('dialog', dialog => dialog.accept('2021'));
await page.evaluate("prompt('Enter a number:')");