如何将木偶操作者的焦点转移到弹出窗口

I'm using Puppeteer to run a test within a website. Once a button has been clicked, a new popup browser window appears with a report. Within that new window is information I'd like to extract. How can I get puppeteer to shift it's focus to this newly created browser window?

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

I have multiple print buttons on my puppeteer page clicking on which creates a popup, I am trying to get a pdf of those pages. Here is the code I am using.

我的木偶操作页面上有多个打印按钮,点击它会创建弹出窗口,我正在尝试获取这些页面的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);
            }
        }
    });
}

I am using puppeteer version 0.13.0 Any other way to obtain what I am trying to achieve is also appreciated.

我正在使用puppeteer版本0.13.0任何其他方式来获得我想要实现的目标也很感激。

2 个解决方案

#1

There are two scenarios in you case First,If you are using version less than v0.13.0 you won't be able to do it Second if you are using node version 6 you have to build node components manually

在您的情况下有两种情况首先,如果您使用的版本低于v0.13.0,则无法执行此操作。如果您使用的是节点版本6,则必须手动构建节点组件

cd node_modules/puppeteer
npm run build

#2

I've solved a similar use case where I'm testing a page that opens a new window via window.open, and I need to find it after to run some tests. Adding a listener for "targetcreated" works, as long as you register the listener before opening the new window.

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

This is my test runner which does the following:

这是我的测试运行器,它执行以下操作:

Adds a listener for the "targetcreated" event, in which it:

为“targetcreated”事件添加一个侦听器,其中:
Finds the newly opened page object

查找新打开的页面对象
Runs some tests on the opened page.

在打开的页面上运行一些测试。
Finally, a call to "openSearchWindow" which actually triggers the window.open.

最后,调用“openSearchWindow”实际上触发了window.open。

Here is the test runner. I've replaced my own code with comments to make it easier for you to use.

这是测试跑步者。我已经用注释替换了我自己的代码,以便于您使用。

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 is a simple function that loops through all open browser pages and saves the page object for the page with a matching url. After running this you can use the new page for your tests, if it is opened.

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;
}

#1