前端UI自动化puppeteer实践

背景
在表单（web页面）测试过程中，要经常对表单基本功能进行回归，曾经考虑过使用webUI自动化工具，减少重复性的操作，但是因为之前用过appium，对UI自动化的体验不是很好，所以有些纠结，但是，再仔细想一下，有可能存在比较好用又确实能提升效率的工具，也不妨去尝试一下。
上网查询了一下，puppeteer具有可以使用录制脚本的工具puppeteer-recorder、截图等功能，找了个demo开始试了一下，发现坑较少，安装方便，使用比较流畅。
puppeteer介绍
Puppeteer 是一个Node库， 它提供高级API，通过DevTools Protocol 来控制Chrome 或 Chromium。 Puppeteer 默认运行为headless ，但是可以配置为运行为non-headless。详见文末参考链接。
效果展示
目录结构
cases：用例脚本
config：配置文件，可区分测试、线上环境
screenshot_outputs：输出的截图文件
utils：用到的通用方法

image.png
运行结果截图：

image.png	image.png	image.png

测试思路
1、在脚本中写入测试执行步骤
2、运行脚本
3、查看执行结果（截图），查看是否符合预期。
这样操作会使简单很测试很多。就拿表单人工审核为例，全部人工操作的话，需要填写并提交表单，登录表单运营后台，找到对应的目录及表单，对表单进行审核，再重新打开表单并进行查看，而自动化的话，在写好脚本（在脚本中可进行接口请求）之后，就可以直接运行脚本，查看结果。

image.png

环境搭建
1、安装puppeteer：npm install puppeteer（前提是安装了node、npm）
2、安装chrome插件puppeteer-recorder（可自行百度，比较简单）
3、npm init，初始化一个项目
脚本编写

const puppeteer = require('puppeteer');
const config = require('../configs/constants');
const request = require('../utils/request');

/*
用例步骤：
1.医生提交表单
2.设置人工审核失败
3.修改表单
4.设置人工审核成功
5.点击编辑字段，预期不可编辑
*/

(async () => {
  const templateId = config.manulTemplate
  console.log('templateId: ', templateId)
  const urlPrefix = config.urlPrefix
  const url = `${urlPrefix}${templateId}/edit`
  console.log('submitUrl:', url)
  const cookies = config.cookies
  const auditUrlPrefix = config.auditUrlPrefix
  
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto(url)
  await page.setViewport({ width: 600, height: 1500 })

  // 设置Cookie
  await page.setCookie(...cookies)
  const cookiesSet = await page.cookies(url)
  // console.log(JSON.stringify(cookiesSet))

  // 医生填写并提交表单
  await page.goto(url)
  let input_area = await page.waitForSelector('div > div > .base > .text > .text__input')
  await input_area.type("hello world")

  // 多行文本
  const input_area_multi = await page.waitForSelector('div > div > .base > .textarea > .textarea__input')
  await input_area_multi.type("hello world02")
  await page.screenshot({path: '../screenshot_outputs/manul/01_before_subimit.png'})

  // 提交
  await page.click('.page > div > .content > .footer--btm > .operator--right')
  await page.waitForSelector('body > .mask > .prompt > .prompt__footer > .prompt__btn--primary')
  await page.click('body > .mask > .prompt > .prompt__footer > .prompt__btn--primary')
  await page.waitFor(3000)

  // 获取表单content_Uid
  let res = await request.get(`${config.getTemplateUrlPrifix}templateUid=${templateId}`)
  // console.log(res);
  const contentUid = res.data.list[0].contentUid
  console.log('url: ', `${urlPrefix}${templateId}/edit/${contentUid}`);
  await page.goto(`${urlPrefix}${templateId}/edit/${contentUid}`)
  await page.screenshot({path: '../screenshot_outputs/manul/02_afterSubmit_edit.png'})

  // 设置人工审核失败
  res = await request.put(`${auditUrlPrefix}${contentUid}`, {
       test: "test"
  })
  console.log(res);
  await page.goto(`${urlPrefix}${templateId}/edit/${contentUid}`)
  await page.screenshot({path: '../screenshot_outputs/manul/03_auditFailed.png'})

  // 修改单行文本
  input_area = await page.waitForSelector('div > div > .base > .text > .text__input')
  await input_area.type(" edit")
  await page.waitFor(3000)
  await page.screenshot({path: '../screenshot_outputs/manul/04_secondEdit.png'})
  // 提交
  await page.click('.page > div > .content > .footer--btm > .operator--right')
  await page.waitForSelector('body > .mask > .prompt > .prompt__footer > .prompt__btn--primary')
  await page.click('body > .mask > .prompt > .prompt__footer > .prompt__btn--primary')
  await page.waitFor(3000)
  
  // 设置人工审核成功
  res = await request.put(`${auditUrlPrefix}${contentUid}`, {
      test: "test"
  })
  console.log(res);
  await page.goto(`${urlPrefix}${templateId}/edit/${contentUid}`)
  await page.screenshot({path: '../screenshot_outputs/manul/05_auditSuccessful.png'})

  // 点击编辑字段
  await page.click('div > div > .base > .text > .text__input')
  await page.screenshot({path: '../screenshot_outputs/manul/06_auditSuccessful_edit.png'})
  await browser.close()
})()

遇到问题
1、puppeteer-recorder只能录制获取元素、点击元素操作，没有获取到填写文本的操作，需要修改或添加已录制好的脚本
2、有些地方例如截图前，接口请求结束后，需要使用等待方法。await page.waitFor(3000)
3、使用await进行接口请求，不然会出现同步异步问题，后面的语句开始执行（但是要用到的参数还没有获取到）
参考：
https://zhuanlan.zhihu.com/p/76237595
https://www.jianshu.com/p/679f07ba474b