如何使用nodejs puppeteer切换到新打开的窗口?

Question

我很难让puppeteer将焦点切换到新打开的窗口。

下面是我的程序试图做的事情:我试图使用puppeteer与谷歌标签管理器预览窗口进行交互，但我不能让它在点击提交按钮后与新打开的窗口进行交互。

我的木偶代码正在做以下事情(更多细节请参见下面的屏幕截图):

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

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

我的第二个理论的原因:我也怀疑它没有成功地点击开始按钮，因为当我试图采取木偶动作的截图，我可以看到开始按钮是灰色的，即使测试主机名已经填满，所以我不得不克服这一点，告诉它操纵按钮的DOM属性，以删除"禁用"使按钮可点击。但是，我不确定它是否成功点击了。

谁能告诉我如何切换木偶的焦点到新打开的窗口?

谢谢。

输入图片描述

Answer 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')，它也可以工作，它在一个新的窗口中打开一个页面。

Answer 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);
//.....
}
});