Puppeteer技术问题：如何与新窗口交互或将其并入同一实例

我之前在非无头模式做测试时也踩过一模一样的坑！问题根源在于：非无头模式下，页面点击生成的新窗口默认不会被Puppeteer自动追踪，所以browser.pages()只能拿到初始化时就存在的标签页，根本找不到刚打开的新窗口。下面给你两种靠谱的解决方法：

方法一：监听targetcreated事件捕获新窗口 #

在点击触发新窗口的元素之前，先监听浏览器的targetcreated事件，等新窗口创建时直接获取对应的Page对象：

// 先设置监听，等待新目标出现
const newTargetPromise = new Promise(resolve => {
  browser.once('targetcreated', target => {
    resolve(target.page());
  });
});

// 点击打开新窗口的元素
await page.click('#your-open-new-window-button');

// 获取新窗口的Page对象
const newWindow = await newTargetPromise;

// 现在可以正常和新窗口交互了
await newWindow.waitForSelector('#some-element-in-new-window');
const elementText = await newWindow.$eval('#some-element-in-new-window', el => el.textContent);
console.log(elementText);

方法二：用page.waitForTarget精准匹配 #

如果你知道新窗口的URL或标题特征，用waitForTarget能更精准地定位目标：

// 点击打开新窗口
await page.click('#your-open-new-window-button');

// 等待新目标出现，可通过URL、标题等条件筛选
const newTarget = await browser.waitForTarget(target => {
  // 示例：匹配URL包含特定路径
  return target.url().includes('new-window-specific-path');
});

// 将目标转换为可操作的Page对象
const newWindow = await newTarget.page();

// 非无头模式下可以把窗口前置，方便观察操作
await newWindow.bringToFront();
// 后续交互示例
await newWindow.type('#input-box', 'test content');

为什么browser.pages()不好用？ #

非无头模式下，Chromium的新窗口会以独立的"target"存在，而browser.pages()仅返回Puppeteer初始化时就关联的页面，或是已经被显式追踪的页面。只有通过target相关的事件或等待方法，才能把新窗口纳入Puppeteer的控制范围。

另外要注意：确保新窗口是由当前测试的Page对象触发打开的，如果是外部程序打开的窗口，Puppeteer是无法捕获的哦。

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