用 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页面内容，并最后返回原始页面。

如果您对本文有疑问或者寻求合作，欢迎 联系邮箱 。邮箱已到剪贴板

精彩评论