页面 (Pages)

• 页面
• 多页面
• 处理新页面
• 处理弹出窗口

页面

每个 BrowserContext 可以有多个页面。Page 指的是浏览器上下文中的单个选项卡或弹出窗口。它应该用于导航到 URL 并与页面内容进行交互。

// 创建一个页面。
const page = await context.newPage();

// 显式导航，类似于在浏览器中输入 URL。
await page.goto('http://example.com');
// 填充输入框。
await page.locator('#search').fill('query');

// 通过点击链接隐式导航。
await page.locator('#submit').click();
// 期待一个新的 url。
console.log(page.url());

多页面

每个浏览器上下文可以托管多个页面（选项卡）。

• 每个页面的行为就像一个聚焦的、活动的页面。不需要将页面带到前台。
• 上下文内的页面遵循上下文级别的模拟，如视口大小、自定义网络路由或浏览器区域设置。

// 创建两个页面
const pageOne = await context.newPage();
const pageTwo = await context.newPage();

// 获取浏览器上下文的页面
const allPages = context.pages();

处理新页面

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

// 在特定操作（例如点击链接）后获取页面
const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.locator('a[target="_blank"]').click() // 打开一个新选项卡
])
await newPage.waitForLoadState();
console.log(await newPage.title());

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

// 获取上下文中的所有新页面（包括弹出窗口）
context.on('page', async page => {
  await page.waitForLoadState();
  console.log(await page.title());
})

处理弹出窗口

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

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

// 请注意，Promise.all 防止了点击和等待弹出窗口之间的竞争条件。
// 点击和等待弹出窗口之间的竞争条件。
const [popup] = await Promise.all([
  // 重要的是在点击之前调用 waitForEvent 以设置等待。
  page.waitForEvent('popup'),
  // 打开弹出窗口。
  page.locator('#open').click(),
]);
await popup.waitForLoadState();
console.log(await popup.title());

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

// 当弹出窗口打开时获取所有弹出窗口
page.on('popup', async popup => {
  await popup.waitForLoadState();
  await popup.title();
})