用 Puppeteer 处理新tab页

发表时间

使用 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 授权。欢迎转载,请保留原文链接


分类

相关文章