Puppeteer:如何处理多个标签? [英] Puppeteer: How to handle multiple tabs?

问题描述

场景:用于开发者应用注册的 Web 表单，包含两部分工作流程.

Scenario: Web form for developer app registration with two part workflow.

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

Page 1: Fill out developer app details and click on button to create Application ID, which opens, in a new tab...

第 2 页:App ID 页面.我需要从这个页面复制 App ID，然后关闭选项卡并返回第 1 页并填写 App ID(从第 2 页保存)，然后提交表单.

Page 2: The App ID page. I need to copy the App ID from this page, then close the tab and go back to Page 1 and fill in the App ID (saved from Page 2), then submit the form.

我了解基本用法 - 如何打开页面 1 并单击打开页面 2 的按钮 - 但是当页面 2 在新标签页中打开时，如何获得页面 2 的句柄?

I understand basic usage - how to open Page 1 and click the button which opens Page 2 - but how do I get a handle on Page 2 when it opens in a new tab?

例子:

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 和 请求:browser.currentPage() 或类似的方式来访问 Pages #443.

• The work for Browser.pages has been completed and merged
• Fixes Emit new Page objects when new tabs created #386 and Request: browser.currentPage() or similar way to access Pages #443.

仍在寻找一个好的用法示例.

Still looking for a good usage example.

推荐答案

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

A new patch has been committed two days ago and now you can use browser.pages() to access all Pages in current browser. Works fine, tried myself yesterday :)

如何获取打开为目标:_blank"链接的新页面的 JSON 值的示例.

An example how to get a JSON value of a new page opened as 'target: _blank' link.

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

这篇关于Puppeteer:如何处理多个标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！