如何使用nodejs puppeteer切换到新打开的窗口？答案

【问题标题】：How to switch to the newly opened window using nodejs puppeteer?如何使用nodejs puppeteer切换到新打开的窗口？
【发布时间】：2021-06-07 04:52:01
【问题描述】：

让 puppeteer 将焦点切换到新打开的窗口时遇到了一些困难。

以下是我的程序正在尝试做的事情：我正在尝试使用 puppeteer 与 Google 跟踪代码管理器预览窗口进行交互，但在单击提交按钮后我无法让它与新打开的窗口进行交互。

我的 puppeteer 代码正在执行以下操作（请参阅下面的屏幕截图了解更多详细信息）：

转至https://tagassistant.google.com/#!#source=TAG_MANAGER&id=GTM-XXXXX&gtm_auth=kALKj04OP-SpPs2dMA70Tw&gtm_preview=env-562&cb=428326580326923
填写要预览的主机名，例如https://www.theage.com.au
点击开始按钮
在新打开的窗口中单击菜单项 (https://www.theage.com.au)

Puppeteer 成功执行到第 3 步，但在第 4 步失败，因为（我的第一个原因理论）它的焦点仍然在当前窗口上（如果您在浏览器上手动执行，单击开始按钮后，将打开测试站点的另一个窗口，例如www.loreal.com.au）。

我的第二个原因理论：我也怀疑它没有成功单击“开始”按钮，因为当我尝试截取 puppeteer 动作的屏幕截图时，即使已填充测试主机名，我也可以看到“开始”按钮是灰色的所以我必须通过告诉它操作按钮的 DOM 属性以删除“禁用”以使按钮可点击来克服这个问题。但是，我不确定它是否成功点击。

有人可以告诉我如何将 puppeteer 焦点切换到新打开的窗口吗？

谢谢。

enter image description here

【问题讨论】：

标签： javascript node.js puppeteer

【解决方案1】：

您没有显示任何代码，因此很难确定问题出在哪里。但一般来说，您可能希望等待弹出事件：

const waitForWindow = new Promise(resolve => page.on('popup', resolve));

await page.click('.my-link');
const newPage = await waitForWindow;

// now I can interact with the new page
const linksInnerTexts = await newPage.$$eval('a', links => links.map(l => l.innerText));

如果您的链接具有target="_blank" 属性，这是一个有效的示例，它会在新选项卡中打开一个新页面。如果您的链接看起来像 target="popup" onclick="window.open('../html-link.htm','name','width=600,height=400')，它也会在新窗口中打开一个页面。

【讨论】：

还有一个有用的事件'targetcreated'。

【解决方案2】：

谢谢大家，

我已经设法使用 targetcreated 事件让它工作。

        browser.on('targetcreated', async (target) => { //This block intercepts all new events
      if (target.type() === 'page') {               // if it tab/page
             //const page = await target.page();      // declare it
             const page = await target.page();      // declare it
             const url = page.url();                // example, look at her url
             console.log('***** ' + url);

             //.....
      }
    });

【讨论】：