🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
  网页在提测流转给 QA 后,如何能帮他们更有效而准确的完成测试,是我一直在思考的一个问题。   QA 他们会对网页编写测试用例,在提测之前会让我们将优先级最高的用例跑通,这在一定程度上能够避免频繁的返工,保证测试的顺畅。   自己之前想过做 UI 的单元测试,一有修改就跑一遍用例,但是维护成本太高,并且每次留给我们的开发时间并不多。   最近在看多份测试记录的 BUG 单中发现,45%~70% 之间的 BUG 都是内容性问题,例如网页中缺了个字、少了段话、图片呈现不对等问题。   这些用肉眼看,其实很容易辨别。只要有个工具,能呈现不同操作下的网页,就可以大大提升 QA 的验收效率。   于是就想到了[Puppeteer](https://pptr.dev/)(傀儡师),它是一个 Node.js 库,提供了一套 API 控制 Chrome 或 Chromium 浏览器,可生成页面快照截图、模拟用户行为等。   Chromium 是 Chrome 的开源版本,两者在界面、功能等方面会存在些区别。   虽然 Puppeteer 可以模拟用户行为,但是它不能模拟用户在客户端 WebView 中的行为,例如点击头像进入用户客户端中的主页。   简单理解,就是 Puppeteer 能呈现 Chrome 浏览器中的页面,但如果要测试客户端的样式兼容性和各种交互行为,就无法实现了。   而内容展示异常的问题,无论是在哪一端,都能表现一致,因此可以用 Puppeteer 来作为自动化测试工具。 ## 一、服务端实现   当前 Puppeteer 的最新版本是 19.2.2,API 分为 20 多个模块,可查找页面 DOM 元素、屏幕截图、处理 WebSocket、模拟移动端设备、植入脚本、请求拦截等操作。   我当前的目标是查看页面内容,所以在页面中也需要有些交互。   先基于 KOA,快速搭建一个新项目,因为 Puppeteer 库比较大,所以为了不影响其他项目的构建和运行,就单独开了个项目。   再引入相关的 Node 库,fs 用于创建目录,path 用于拼接绝对路径,[config](https://github.com/node-config/node-config)用于读取配置文件。 ~~~ const puppeteer = require('puppeteer'); const fs = require('fs'); const path = require('path'); const config = require('config'); const domain = config.get('domain'); ~~~   接着是声明一条路由,例如用 get 方法访问 test/game,传递类型和环境。 ~~~ router.get("/test/game", async (ctx) => { const { type, env = "www" } = ctx.query; let data = []; switch (type) { case "1": data = await hot(env); break; } ctx.body = { code: 0, data }; }); ~~~   hot() 函数就是自动化测试的主体,核心逻辑其实就是点击某一栏,呈现页面后,再截一张图。 ~~~ async function hot(env) { const savePath = path.resolve(__dirname, "../static/hot"); // 将相对路径转换成绝对路径 const iPhone = puppeteer.KnownDevices["iPhone 6"]; // 模拟iPhone 6 // 当指定目录不存在时,就将其创建,Sync 后缀表示同步,recursive 参数表示递归创建 !fs.existsSync(savePath) && fs.mkdirSync(savePath, { recursive: true }); // 要返回的图片路径 const paths = []; /** * 本地环境可以不需要配置 args * 但是在 Linux 服务器中在启动 puppeteer 时,默认要带上 --no-sandbox 参数 */ return puppeteer.launch({ args: ["--no-sandbox", "--disable-setuid-sandbox"] }).then(async (browser) => { const page = await browser.newPage(); // 创建新的浏览器上下文 await page.emulate(iPhone); // 模拟设备 // 默认主页 await page.goto(`https://${env}.xxx.com/game/hot.html`, { waitUntil: "networkidle0" // 等待到没有网络请求 }); // 截图 await screenshot(page, `${savePath}/1.png`); paths.push(`${domain}/static/hot/1.png`); // 查找符合样式的菜单栏 const tabs = await page.$$(".green_calss"); // 点击第二个菜单栏 tabs[1].tap(); await page.waitForNetworkIdle(); await screenshot(page, `${savePath}/2.png`); paths.push(`${domain}/static/hot/2.png`); // 点击第三个菜单栏 tabs[2].tap(); await page.waitForNetworkIdle(); await screenshot(page, `${savePath}/3.png`); paths.push(`${domain}/static/hot/3.png`); await page.close(); await browser.close(); return paths; }); } ~~~   path.resolve()、fs.existsSync() 和 fs.mkdirSync() 都是 Node.js 提供的[方法](https://www.kancloud.cn/pwstrick/fe-questions/3006880)。   page.[goto()](https://pptr.dev/api/puppeteer.page.goto)可跳转到指定 URL 的网页,networkidle0 可等待到页面无网络请求。   在自动化测试时,需要有个页面完成的时间点,如果用延时的方式,会不太准确,所以就想到了网络请求。   我们这边的网页以移动端居多,所以需要选择要模拟的设备,例如 iPhone 6。   page.$$() 是[ElementHandle](https://pptr.dev/api/puppeteer.elementhandle)提供的一个方法,相当于 Document.querySelectorAll() 方法。   tabs\[1\].[tap()](https://pptr.dev/api/puppeteer.elementhandle.tap)就是模拟用户触摸屏幕,另外支持的事件还包括 click()、drag()、focus() 等。   screenshot() 是一个截屏函数,内部调用 page.[screenshot()](https://pptr.dev/api/puppeteer.page.screenshot)方法,可截取完整页面,包括滚动区域。 ~~~ async function screenshot(page, savePath) { await page.screenshot({ path: savePath, type: "png", fullPage: true //边滚动边截图 }); } ~~~ ## 二、界面实现   前端界面目前比较简洁,就一个活动下拉框和一个环境下拉框,以及一个提交按钮。   提交后,就会从后台拿到页面快照,这些快照都会按照写好的脚本生成。 :-: ![](https://img.kancloud.cn/65/ce/65cee42b422b421e8409fb701ac2abf1_1600x1624.png =800x) **1)遇到的问题**   在实际使用中注意到,如果页面内包含一块定高区域,那么隐藏区域就需要滚动后才能呈现。   当网页中有一个资源阻塞加载时,若是 waitUntil 参数的值是 networkidle0,那页面就会报超时的错误。 ~~~ await page.goto(url, { waitUntil: ["networkidle0"] }); ~~~   但如果 goto() 方法不加等待时机,那就会一直等下去,没有结果。 ~~~ await page.goto(url); ~~~   可以改成[networkidle2](https://pptr.dev/api/puppeteer.puppeteerlifecycleevent/),networkidle0 是指在 500ms 内没有任何网络连接,而 networkidle2 是指网络连接个数不超过 2 个。   在部署到服务器后,由于字体的问题,页面内的中文会出现乱码,解决办法就是给服务器安装中文字体。 :-: ![](https://img.kancloud.cn/fd/9a/fd9a60b5b2600c4ea8010c3398c80775_702x752.png =400x) 参考资料: [Automating Google Chrome with Node.js](https://tutorialzine.com/2017/08/automating-google-chrome-with-node-js) [京喜前端自动化测试之路](https://jelly.jd.com/article/5e9d5ca110f7500156d48b42) [深入了解自动化:那些项目适合自动化测试](https://zhuanlan.zhihu.com/p/51407643) [Puppeteer中文](https://puppeteer.bootcss.com/api) [Puppeteer 入门教程](https://www.r9it.com/20171106/puppeteer.html) ***** > 原文出处: [博客园-Node.js躬行记](https://www.cnblogs.com/strick/category/1688575.html) [知乎专栏-Node.js躬行记](https://zhuanlan.zhihu.com/pwnode) 已建立一个微信前端交流群,如要进群,请先加微信号freedom20180706或扫描下面的二维码,请求中需注明“看云加群”,在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily),欢迎浏览。 ![](https://box.kancloud.cn/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200) 推荐一款前端监控脚本:[shin-monitor](https://github.com/pwstrick/shin-monitor),不仅能监控前端的错误、通信、打印等行为,还能计算各类性能参数,包括 FMP、LCP、FP 等。