详解Puppeteer前端自动化测试实践

// 循环访问links
...

进行错误和访问监听

puppeteer可以监听在页面访问过程中的报错，请求等等，这样我们就可以捕获到页面的访问错误并进行上报啦，这也是我们进行测试需要的基本功能~

// 当发生页面js代码没有捕获的异常时触发。
page.on('pagerror', () => {})
// 当页面崩溃时触发。
page.on('error', () => {})
// 当页面发送一个请求时触发
page.on('request')
// 当页面的某个请求接收到对应的 response 时触发。
page.on('response')

通过以上的几个小案例，我们发现Puppeteer的功能非常强大，完全能够满足我们以上的对页面进行自动访问的需求。接下来，我们针对我们的测试单元进行个单元用例的书写

最终功能

通过我们上面对测试单元的规划，我们可以规划一下我们的测试路径

访问网站 -> 登陆 -> 访问页面1 -> 进行基本单元测试 -> 获取详情页跳转链接 -> 依次访问详情页 -> 进行基本单元测试

-> 访问页面2 …

所以，我们可以拆分出几个大类，和几个测试单元，来进行各项测试

// 包含基本的测试方法，log输出等
class Base {}
// 详情页单元，进行一些基本的单元测试
class PageDetal extends Base {}
// 页面单元，进行基本的单元测试，并获取并依次访问详情页
class Page extends PageDetal {}
// 进行登录等操作，并依次访问页面单元进行测试
class Root extends Base {}

同时，我们如何在功能页面变化时，跟踪到测试的变化呢，我们可以针对我们测试的功能，为其添加自定义标签test-role，测试时，根据自定义标签进行测试逻辑的编写。

例如针对时间切换单元，我们做一下简单的介绍：

// 1. 获取测试单元的元素
const timeSwitch = await page.$('[test-role="time-switch"]');
// 若页面没有timeSwitch, 则不用进行测试
if (!timeSwitch) return
// 2. time switch的切换按钮
const buttons = timeSwitch.$$('.time-switch-button')
// 3. 对按钮进行循环点击
for (let i = 0; i < buttons.length; i++) {
 const button = buttons[i]
 // 点击按钮
 await button.click()
 // 重点！ 等待对应的内容出现时，才认定页面访问成功
 try {
  await page.waitFor('[test-role="time-switch-content"]')
 } catch (error) {
  reportError (error)
 }
 // 截图
 await page.screenshot()
}

上面只是进行了一个简单的访问内容测试，我们可以根据我们的用例单元书写各自的测试逻辑，在我们日常开发时，只需要对需要测试的内容，加上对应的test-role即可。