Playwright中context.pages()无法获取新打开标签页的原因排查

核心原因与解决办法 #

1. 点击后未等待新页面完成注册

你点击链接后立刻调用context.pages()，此时新标签页可能还没被Playwright的上下文完全注册，导致列表里看不到。解决方式是等待新页面事件触发后再获取页面列表：

修改点击后的代码：

// 先创建一个等待新页面的Promise
const newPagePromise = context.waitForEvent('page');
// 执行中键点击
await twitterLink.click({ button: "middle" });
// 等待新页面出现并加载完成
const newPage = await newPagePromise;
await newPage.waitForLoadState();

// 此时再获取页面列表就能看到新标签页
const pages = context.pages();
console.log(pages.length); // 输出应为2
let firstPageName = await pages[0].title();
let secondPageName = await pages[1].title();

2. 页面事件监听时机错误

你之前的监听代码可能是在点击操作之后才注册的，导致无法捕获到新页面的创建事件。正确的做法是在创建上下文后、点击前就注册监听：

const context = await browser.newContext();

// 提前注册page事件监听
context.on('page', async page => {
  await page.waitForLoadState();
  console.log('新页面标题:', await page.title());
});

const page = await context.newPage();
await page.goto('https://playwright.dev/');

// 后续的定位和点击操作
const twitterLink = page.locator("//a[contains(@href, 'twitter')]");
await twitterLink.click({ button: "middle" });

3. 额外注意事项

• 避免直接访问pages[1]，如果新页面未成功加载会导致报错，建议先判断pages.length是否大于1
• 确认浏览器上下文没有禁用弹窗（Playwright默认允许，无需额外设置）

内容的提问来源于stack exchange，提问作者Denis