Puppeteer：如何处理多个标签？

Question

场景：用于开发人员应用注册的 Web 表单，具有两部分工作流程。

第 1 页：填写开发者应用程序详细信息并单击按钮以创建应用程序 ID，该应用程序 ID 在新选项卡中打开…

第 2 页：应用程序 ID 页面。我需要从该页面复制 App ID，然后关闭选项卡并返回第 1 页并填写 App ID（从第 2 页保存），然后提交表单。

我了解基本用法 - 如何打开第 1 页并单击打开第 2 页的按钮 - 但是当第 2 页在新选项卡中打开时，我如何获得第 2 页的句柄？

例子：

 const puppeteer = require('puppeteer');

(async() => {
    const browser = await puppeteer.launch({headless: false, executablePath: '/Applications/Google Chrome.app'});
    const page = await browser.newPage();

    // go to the new bot registration page
    await page.goto('https://register.example.com/new', {waitUntil: 'networkidle'});

    // fill in the form info
    const form = await page.$('new-app-form');

    await page.focus('#input-appName');
    await page.type('App name here');

    await page.focus('#input-appDescription');
    await page.type('short description of app here');

    await page.click('.get-appId'); //opens new tab with Page 2

    // handle Page 2
    // get appID from Page 2
    // close Page 2

    // go back to Page 1
    await page.focus('#input-appId');
    await page.type(appIdSavedFromPage2);

    // submit the form
    await form.evaluate(form => form.submit());

    browser.close();
})();

2017-10-25 更新

• Browser.pages 的工作已经 完成 并 合并
• 修复 了在创建新选项卡时发出新的 Page 对象 #386 和 Request: browser.currentPage() 或类似的方式来访问 Pages #443 。

仍在寻找一个好的使用示例。

原文由 nwxdev 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

两天前提交了一个新补丁，现在您可以使用 browser.pages() 访问当前浏览器中的所有页面。工作正常，昨天自己试了:)

编辑：

如何获取作为“目标：_空白”链接打开的新页面的 JSON 值的示例。

 const page = await browser.newPage();
await page.goto(url, {waitUntil: 'load'});

// click on a 'target:_blank' link
await page.click(someATag);

// get all the currently open pages as an array
let pages = await browser.pages();

// get the last element of the array (third in my case) and do some
// hucus-pocus to get it as JSON...
const aHandle = await pages[3].evaluateHandle(() => document.body);

const resultHandle = await pages[3].evaluateHandle(body =>
  body.innerHTML, aHandle);

// get the JSON value of the page.
let jsonValue = await resultHandle.jsonValue();

// ...do something with JSON

原文由 kaiak 发布，翻译遵循 CC BY-SA 3.0 许可协议