网页在提测流转给 QA 后，如何能帮他们更有效而准确的完成测试，是我一直在思考的一个问题。
QA 他们会对网页编写测试用例，在提测之前会让我们将优先级最高的用例跑通，这在一定程度上能够避免频繁的返工，保证测试的顺畅。
自己之前想过做 UI 的单元测试，一有修改就跑一遍用例，但是维护成本太高，并且每次留给我们的开发时间并不多。
最近在看多份测试记录的 BUG 单中发现，45%~70% 之间的 BUG 都是内容性问题，例如网页中缺了个字、少了段话、图片呈现不对等问题。
这些用肉眼看，其实很容易辨别。只要有个工具，能呈现不同操作下的网页，就可以大大提升 QA 的验收效率。
于是就想到了 Puppeteer（傀儡师），它是一个 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 用于读取配置文件。
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 提供的方法。
page.goto() 可跳转到指定 URL 的网页，networkidle0 可等待到页面无网络请求。
在自动化测试时，需要有个页面完成的时间点，如果用延时的方式，会不太准确，所以就想到了网络请求。
我们这边的网页以移动端居多，所以需要选择要模拟的设备，例如 iPhone 6。
page.$$() 是 ElementHandle 提供的一个方法，相当于 Document.querySelectorAll() 方法。
tabs[1].tap() 就是模拟用户触摸屏幕，另外支持的事件还包括 click()、drag()、focus() 等。
screenshot() 是一个截屏函数，内部调用 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，networkidle0 是指在 500ms 内没有任何网络连接，而 networkidle2 是指网络连接个数不超过 2 个。
在部署到服务器后，由于字体的问题，页面内的中文会出现乱码，解决办法就是给服务器安装中文字体。
参考资料：
posted on
