How to shift puppeteers focus to a pop up window

Question

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?

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.

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.

Answer 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

cd node_modules/puppeteer
npm run build

Answer 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.

This is my test runner which does the following:

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

2. Finds the newly opened page object

3. Runs some tests on the opened page.

4. Finally, a call to "openSearchWindow" which actually triggers the 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.

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