https://playwright.dev/docs/pages

Pages

Pages

• Mỗi BrowserContext có thể có nhiều pages khác nhau. Một Page tương ứng với 1 tab. Bạn dùng page để navigate đến các trang web, tương tác với các phần tử trên trang.

// Create a page.
const page = await context.newPage();

// Navigate explicitly, similar to entering a URL in the browser.
await page.goto('http://example.com');
// Fill an input.
await page.locator('#search').fill('query');

// Navigate implicitly by clicking a link.
await page.locator('#submit').click();
// Expect a new url.
console.log(page.url());

Multiple pages

• Mỗi browser context có thể lưu trữ nhiều pages (tabs)
  • Mỗi page hoạt động riêng biệt. Bạn có thể tương tác thoải mái mà không cần dùng hàm focus hay active tab đó trước.
  • Các page bên trong một context tuân theo các giả lập context-level, như kích thước viewport, các network routes tuỳ chỉnh hoặc ngôn ngữ browser.

// Create two pages
const pageOne = await context.newPage();
const pageTwo = await context.newPage();

// Get pages of a browser context
const allPages = context.pages();

Handling new pages

• Sự kiện page trên browser contexts có thể được sử dụng để lấy các pages mới được tạo trong conext.
  • Hiểu đơn giản thì tức là bạn click vào các phần tử mà nó bật ra tab mới, bạn bắt lấy cái tab này và tương tác trên nó.

// Start waiting for new page before clicking. Note no await.
const pagePromise = context.waitForEvent('page');
await page.getByText('open new tab').click();
const newPage = await pagePromise;
// Interact with the new page normally.
await newPage.getByRole('button').click();
console.log(await newPage.title());

• Nếu các page được bật lên một cách ngẫu nhiên, bạn không thể bắt được, thì có thể bắt sự kiện on(‘page’) như sau:

// Get all new pages (including popups) in the context
context.on('page', async page => {
  await page.waitForLoadState();
  console.log(await page.title());
});

Handling popups

• Nếu page là 1 popup (ví dụ: pages được mở bởi links target="_blank"), bạn có thể tham chiếu đến trang đó bằng cách nghe sự kiện popup trên page đó.
• Sự kiện này được chạy cùng với sự kiện browserContext.on('page'), nhưng chỉ dành cho các popups liên quan đến trang này.

// Start waiting for popup before clicking. Note no await.
const popupPromise = page.waitForEvent('popup');
await page.getByText('open the popup').click();
const popup = await popupPromise;
// Interact with the new popup normally.
await popup.getByRole('button').click();
console.log(await popup.title());

• Nếu hành động triggers page mới không xác định thì có thể sử dụng mẫu sau.

// Get all popups when they open
page.on('popup', async popup => {
  await popup.waitForLoadState();
  console.log(await popup.title());
});