用 Puppeteer 处理新tab页

2019-04-25
阅读 2 分钟
阅读量 1740

使用 puppeteer 打开页面后,有些链接或者按钮会主动打开新 tab 页(target=_blank), 那么如何控制浏览器打开新tab,并且获取新tab页面内容,并且最后返回原始页面?本文列出了一个可行的方法。

初始代码

对于带有 target="_blank"a 元素,或者一些按钮,点击后将开启新tab页面。

比如下面的代码:

let page = await browser.newPage()
await page.goto(url)
let btn = await page.waitForSelector('#btn')
await btn.click()

上述代码做的事情是:开启新tab,导航到某url,等待按钮元素的出现,点击按钮。假设这时会开启新的tab页面,这时遇到的问题是,如何拿到新 tab 页,并控制它?

解决方法

只需要在点击之前,事先定义一个 Promise(Promise的概念可以参考这篇:Promise 概念的理解),用于返回新tab的page对象即可:

let page = await browser.newPage()
await page.goto(url)
let btn = await page.waitForSelector('#btn')

//在点击按钮之前,事先定义一个promise,用于返回新tab的page对象
const newPagePromise = new Promise(res => 
  browser.once('targetcreated', 
    target => res(target.page())
  )
);
await btn.click()

//点击按钮后,等待新tab对象
let newPage = await newPagePromise;

// 继续操作新tab页面
let title = await newPage.title()
expect(title).to.equal('新tab页面标题');

//关闭新tab页面
await newPage.close()

//切换回原始页面
await page.bringToFront()

这样就完成了获取新tab页面内容,并最后返回原始页面。

若无特别说明,本站文章均为原创,并采用 署名协议 CC-BY-NC 授权。
欢迎转载,惟请保留原文链接,且不得用于商业用途。