如何从 Puppeteer 中的按钮打开新窗口页面？答案

【问题标题】：How do I open a new window page from a button in Puppeteer?如何从 Puppeteer 中的按钮打开新窗口页面？
【发布时间】：2022-02-07 17:33:58
【问题描述】：

我正在尝试从 Puppeteer 中的按钮打开一个新窗口页面。

举个例子：我正在登录一个网站，当我点击登录按钮时，会弹出一个新的新窗口页面，重定向到该按钮要访问的站点。我该怎么做？

【问题讨论】：

标签： javascript node.js puppeteer

【解决方案1】：

您只需在执行page.click 时按Shift 按钮即可做到这一点要捕捉新打开的窗口，您可以使用 waitForTarget。

const puppeteer = require('puppeteer')

;(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null,
    })
    const context = browser.defaultBrowserContext()
    const page = (await context.pages())[0]
    await page.goto('https://www.amazon.com/gp/product/B093GQSVPX/ref=ppx_yo_dt_b_asin_title_o00_s00?ie=UTF8&psc=1', {waitUntil: 'load'})
    await page.waitForSelector('a[title="Add to List"]', {visible: true})
    await page.keyboard.down('Shift')
    await page.click('a[title="Add to List"]')
    await page.keyboard.up('Shift')
    const popup = await browser.waitForTarget(
        (target) => target.url().includes('www.amazon.com/ap/signin')
    )

    const popupPage = await popup.page()
    await popupPage.waitForSelector('a.a-link-expander[role="button"]')
    await popupPage.click('a.a-link-expander[role="button"]')
    await popupPage.click('input#continue[type="submit"]')
    await browser.close()
})()

【讨论】：