网页在提测流转给 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 //边滚动边截图 }); } ~~~ ## 二、界面实现   前端界面目前比较简洁，就一个活动下拉框和一个环境下拉框，以及一个提交按钮。   提交后，就会从后台拿到页面快照，这些快照都会按照写好的脚本生成。 :-:  **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 个。   在部署到服务器后，由于字体的问题，页面内的中文会出现乱码，解决办法就是给服务器安装中文字体。 :-:  参考资料： [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)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。