Puppeteer如何与新窗口交互或将新窗口强制到同一实例中

Question

我有一个测试的一部分，它点击网页上的一个节点，然后打开一个新窗口。我尝试过browser.pages()，不幸的是，它只与原始Chromium实例中预先存在的选项卡交互，而不是新窗口。

示例：

let pages = await browser.pages();
let newWindow = pages[pages.length - 1];
// try to find element on newWindow - fails
// last element in pages is still window that click was made in to open new window

我在Puppeteer API中找到了event: 'targetcreated'，但一直不知道如何使用它来访问新窗口。

我也尝试过使用browser.targets()获取新实例，但没有成功。

我想知道如何与新窗口实例交互，或者如何强制所有新窗口在同一实例中打开，以便可以通过browser.pages()与它们交互。

我不认为这是关于检测何时打开新选项卡的类似主题的链接问题的重复，因为我不仅试图检测何时打开新选项卡，而且还试图在打开新选项卡/窗口的测试中访问新选项卡/窗口。

Answer 1

我能够使用targetCreated的事件侦听器来解决这个问题，多个用户都能够帮助我进行设置。我必须弄清楚的另一个不是很明显的部分是如何使用事件侦听器在创建它的测试中实际访问新页面。我使用了一个带有global.pages变量的lodash，事件侦听器会将任何新页面添加到该变量中，请参见以下代码：

package.json

{
"name": "workflow-tests",
  "version": "1.0.0",
  "description": "Workflow tests",
  "main": "index.js",
  "scripts": {
    "test": "mocha test/bootstrap.js --recursive test"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chai": "^4.1.0",
    "mocha": "^3.4.2"
  },
  "dependencies": {
    "puppeteer": "^1.0.0"
  }
}

test/bootstrap.js：

const puppeteer = require('puppeteer');
const { expect } = require('chai');
const _ = require('lodash');
const globalVariables = _.pick(global, ['browser', 'expect', 'pages']);

// puppeteer options
const opts = {
    headless: false,
    slowMo: 100,
    timeout: 10000
};

// expose variables
before (async function () {
    global.expect = expect;
    global.browser = await puppeteer.launch(opts);
    global.pages = await global.browser.pages();
    // console.log('global.pages.length', global.pages.length);

    // Event listener for taargetCreated events (new pages/popups)
    // adds the new page to the global.pages variable so it can be accessed immediately in the test that created it
    global.browser.on('targetcreated', async () => {
        // console.log('New Tab Created');
        global.pages = await global.browser.pages();
        // console.log('global.pages.length', global.pages.length);
    });
});

// close browser and reset global variables
after (function () {
    browser.close();
    global.browser = globalVariables.browser;
    global.expect = globalVariables.expect;
    global.pages = globalVariables.pages;
});

test/workflow1.js -可以访问创建的弹出窗口的伪代码/示例测试：

describe('Workflow tests', function () {
    let page = null;
    this.timeout(60000);

    it('should access new window after clicking opens it', () => {
        return new Promise(async (resolve, reject) => {
            page = global.pages[0];
            await page.setViewport({ width: 1500, height: 1000 });
            await page.goto('https://system.netsuite.com/pages/customerlogin.jsp');

            // click something that opens a new window or use this test/example new window opener
            window.open('http://www.example.com', '_blank');

            // targetCreated event listener in test.bootstrap.js activated and sets global.pages to all open windows in instance
            // new page/popup is last item in global.pages array
            let popup = global.pages[global.pages.length - 1];

            // do things in the new window - #addr2 is an example selector from my instance
            await popup.waitForSelector('#addr2');
            await popup.click('#addr2');
            await popup.keyboard.type("popup test typing! :D");
            await popup.keyboard.press('Enter');
            resolve();
        })
    })
});

这些测试将使用命令npm test运行。因为这些测试使用async，所以它们需要某个版本的node，我相信它是任何node >= 8.9.1。我尝试在较早版本的node上运行这些测试，但它们不起作用。