:::danger 自动化：由程序代替人工进行系统校验的过程。
什么是UI自动化测试
UI（User Interface）用户界面通过对web应用及App应用进行自动化测试的过程。 :::

主要功能： 1、自动化测试能在较少的时间内执行更多的测试用例。 2、自动化测试能够减少人为的错误。 3、自动化测试能够克服手动的局限性。 4、自动化测试可以重复执行。

:::success 什么项目适合做UI自动化测试？

1、需求变动不频繁
前端代码变更维护不方便
2、项目周期长
项目端，上线之后不需要再去测试
3、项目需要回归测试
不用回归测试也不需要进行UI自动化测试 :::

Puppeteer

官网文档 | API文档

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools) 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行，但是可以通过修改配置文件运行“有头”模式。

功能

  • 生成页面 PDF。
  • 抓取 SPA（单页应用）并生成预渲染内容（即“SSR”（服务器端渲染））。
  • 自动提交表单，进行 UI 测试，键盘输入等。
  • 创建一个时时更新的自动化测试环境。 使用最新的 JavaScript 和浏览器功能直接在最新版本的Chrome中执行测试。
  • 捕获网站的 timeline trace，用来帮助分析性能问题。
  • 测试浏览器扩展。

架构

:::success Puppeteer的API仿照了浏览器的结构（透明部分表示这些浏览器结构在Puppeteer中暂未实现） ::: image.png

起步

安装

  1. npm install pnpm -g // 因为Puppeteer体积比较大, 所以这里需要pnpm来管理下
  2. pnpm add puppeteer

代码

  1. const puppeteer = require('puppeteer');
  3. // 睡眠函数，做延迟用
  4. const sleep = (time:number) => {
  5.   return new Promise((resolve, reject) => {
  6.     setTimeout(resolve,time)
  7.   })
  8. }
  10. (async () => {
  11.   // 创建一个browser实例。 一个 Browser 实例可以有多个 Page 实例。
  12.   const browser = await puppeteer.launch({
  13.     headless: false, // 使用无头模式
  14.     defaultViewport: null,  // 为每个页面设置一致的视口。默认为 800x600 视口。null禁用默认视口
  15.     args: ['--start-maximized'] // 全屏显示
  16.   })
  18.   // 创建一个page实例。page可以理解为浏览器的标签页
  19.   const page = await browser.newPage()
  20.   await page.goto('http://www.jd.com') // 导航到一个url
  23.   await page.focus('#key')  // 输入框聚焦
  24.   await page.keyboard.sendCharacter('大白兔奶糖') // 在输入框中输入需要搜索的内容
  25.   await page.click('.button') // 获取到搜索框，并做点击处理
  27.   await page.waitForSelector('.gl-item')  // 等待选取元素全部加载完毕，因为网页的内容可能是懒加载的
  29.   let isScroll = true // 标识页面是否在滚动的状态，true标识页面滚动。
  30.   let step = 500 // 标记滚动的步长
  32.   // 添加一个while循环
  33.   while (isScroll) {
  34.     isScroll = await page.evaluate((step: number) => {
  35.       let scrollTop = document.scrollingElement?.scrollTop ?? 0  // 给定一个滚动高度差
  36.       document.scrollingElement!.scrollTop = scrollTop + step  // 做滚动处理，每次的滚动距离为step 
  37.       return document.body.clientHeight > scrollTop + screen.height ? true : false
  39.     }, step)
  41.     await sleep(500) //这里做延迟处理，避免处理太快看不清
  42.   }
  44.   await page.screenshot({ path: "image.png", fullPage: true })
  47.   // await page.pdf({path: 'hn.pdf', format: 'A4'})
  49.   // await browser.close()
  50. })()