谷歌浏览器插件 获取浏览器多 Tab 页签

背景

在使用playwright回放过程中，会存在打开浏览器多 tab 页签的场景，需要获取对应页面的 page 对象，然后进行操作激活。

一般会用browser.newPage()来创建一个新页面，但如果有多个标签页的话，可能每个标签页对应一个page对象，关键就是获取到每一个 tab 页签的 page 对象。

解决方案

方法一：使用 context.pages() 动态获取所有页面

使用 context.pages() 动态获取所有页面，直接通过上下文获取当前所有页面，按需操作。

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const mainPage = await context.newPage();
  await mainPage.goto('https://example.com');

  // 打开新页面（例如通过链接）
  await mainPage.click('a[target="_blank"]');

  // 动态获取所有页面并操作
  const allPages = context.pages();
  const newPage = allPages[allPages.length - 1]; // 假设最后一个为新页面
  await newPage.waitForLoadState();
  await newPage.bringToFront();
  console.log('当前页面 URL:', newPage.url());

  await browser.close();
})();

方法二: 监听 context.on('page') 处理所有新页面

直接通过上下文获取当前所有页面，按需操作。

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const mainPage = await context.newPage();
  await mainPage.goto('https://example.com');

  // 打开新页面（例如通过链接）
  await mainPage.click('a[target="_blank"]');

  // 动态获取所有页面并操作
  const allPages = context.pages();
  const newPage = allPages[allPages.length - 1]; // 假设最后一个为新页面
  await newPage.waitForLoadState();
  await newPage.bringToFront();
  console.log('当前页面 URL:', newPage.url());

  await browser.close();
})();

关键点总结

• 捕获新页面：监听 context.on('page') 事件。
• 管理页面对象：通过 context.pages() 获取所有未关闭的页面，避免手动维护数组。
• 激活页面：使用 page.bringToFront() 模拟用户切换标签页。
• 等待加载完成：在操作新页面之前，确保使用 waitForLoadState() 等待资源加载。

可以根据自己具体场景选择合适的方法，需要确保在操作前页面已准备就绪。