如何将 puppeteers 的焦点转移到弹出窗口答案

【问题标题】：How to shift puppeteers focus to a pop up window如何将 puppeteers 的焦点转移到弹出窗口
【发布时间】：2018-04-15 22:18:35
【问题描述】：

我正在使用 Puppeteer 在网站内运行测试。单击按钮后，将出现一个带有报告的新弹出浏览器窗口。在那个新窗口中是我想提取的信息。如何让 puppeteer 将焦点转移到这个新创建的浏览器窗口？

我的 puppeteer 页面上有多个打印按钮，点击它会创建一个弹出窗口，我正在尝试获取这些页面的 pdf。这是我正在使用的代码。

let printButtons = await this.page.$$('#printNowButton');
for (var i = 0; i < printButtons.length; i++) {
    printButtons[i].click();
    const fileName = ('Document'+ i + '.pdf');
    browser.on('targetcreated', async target => {
        if ((target.url() !== 'about:blank')) {
            try {
                const pageList = await browser.pages();
                const newPage = await pageList[pageList.length - 1];
                await newPage.pdf({
                    path: fileName,
                    format: 'A4'
                }).then(() => {
                    newPage.close();
                });
            } catch (e) {
                console.log('Error: ' + e);
            }
        }
    });
}

我正在使用 puppeteer 版本 0.13.0 任何其他获得我想要达到的目标的方式也值得赞赏。

【问题讨论】：

如果您找到了解决方案，请进行更新。
发布您的代码，以便愿意提供帮助的人更深入地了解该场景。
您可能需要分两步完成此操作。单击所有按钮，然后等待，然后在所有选项卡完成加载后循环遍历 pages 数组，例如let pages = await browser.pages();

标签： javascript node.js puppeteer

【解决方案1】：

你的情况有两种情况首先，如果您使用低于 v0.13.0 的版本，您将无法做到这一点其次，如果您使用的是节点版本 6，则必须手动构建节点组件

cd node_modules/puppeteer
npm run build

【讨论】：

【解决方案2】：

我已经解决了一个类似的用例，我正在测试一个通过 window.open 打开一个新窗口的页面，我需要在运行一些测试后找到它。为“targetcreated”添加监听器是可行的，只要你在打开新窗口之前注册监听器。

这是我的测试运行器，它执行以下操作：

为“targetcreated”事件添加一个监听器，其中：
查找新打开的页面对象
在打开的页面上运行一些测试。
最后，调用“openSearchWindow”实际上触发了 window.open。

这是测试运行器。我已经用 cmets 替换了我自己的代码，以便您使用。

await browser.on('targetcreated', async () => {
    const foundPage = await changePage(theNewURLOfThePopUpWindow);
    if(foundPage) {
        //Run some basic tests on the new page
        const hasLoaded = await runSomeTestsHere();
        expect(hasLoaded).to.be.true;
        done();
    } else {
        done('Failed to find new page.');
    }
});
//Opens the new popup window by clicking a button
await openSearchWindow(page);

changePage 是一个简单的函数，它遍历所有打开的浏览器页面，并为具有匹配 url 的页面保存页面对象。运行此程序后，您可以使用新页面进行测试（如果已打开）。

async function changePage(url) {
    let pages = await browser.pages();
    let foundPage = false;
    for(let i = 0; i < pages.length; i += 1) {
        if(pages[i].url() === url) {
            foundPage = true;
            module.exports.page = pages[i];//set the new working page as the popup
            break;
        }
    }
    return foundPage;
}

【讨论】：