跳至主要内容

页面

页面​

每个 浏览器上下文 可以拥有多个页面。一个 页面 代表浏览器上下文中的单个标签页或弹出窗口。它应该用于导航到 URL 并与页面内容进行交互。

// 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());

多个页面​

每个浏览器上下文可以托管多个页面（标签页）。

  • 每个页面都像一个聚焦的、活动的页面。不需要将页面带到前台。
  • 上下文中的页面会遵守上下文级别的仿真，例如视窗大小、自定义网络路由或浏览器语言环境。
// Create two pages
const pageOne = await context.newPage();
const pageTwo = await context.newPage();

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

处理新页面​

浏览器上下文上的 page 事件可以用来获取在上下文中创建的新页面。这可用于处理通过 target="_blank" 链接打开的新页面。

// 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());

如果触发新页面的操作未知，可以使用以下模式。

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

处理弹出窗口​

如果页面打开了一个弹出窗口（例如通过 target="_blank" 链接打开的页面），你可以通过监听页面上的 popup 事件来获取对该弹出窗口的引用。

除了 browserContext.on('page') 事件之外，还会触发此事件，但仅针对与该页面相关的弹出窗口。

// 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());

如果触发弹出窗口的操作未知，可以使用以下模式。

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