最近在研究 Web自动化测试，之前做了些实践，但效果并不理想。
对于 QA 来说，公司的网页交互并不多，用手点点也能满足。对于前端来说，如果要做成自动化，就得维护一堆的脚本。
当然，这些脚本也可以 QA 来维护，但前提是得让他们觉得做这件事的 ROI 很高，依目前的情况看，好像不高。
所以在想，做一个平台，在这个平台中可以保存些数据，并且在旁边提供个小窗口，呈现要测试的 H5 网页，如下图所示（画图工具是excalidraw）。
在修改相关数据后，可以直接看到网页的变化。
QA 或前端可以不用再写脚本代码，就能实现自动化测试。
目前想到两块，第一块是拦截请求，mock 响应；第二块是记录页面行为，然后自动回放，最后截图，和上一次的截图做对比分析，看是否相同。
一、拦截请求
拦截请求就是将响应 mock 成自己想要的数据，然后查看页面的呈现。
这样就能模拟各种场景，毕竟测试环境的业务数据肯定不能满足所有场景，所以需要自己造。
有了平台后，就能将造的数据保存在数据库中，可随时调取查看页面呈现。
1）拦截
现在就要实现拦截，我首先想到的就是注入脚本，然后在 XMLHttpRequest 或 fetch() 埋入拦截代码。
以 XMLHttpRequest 为例，在 monitorXHR() 函数中就可以让请求转发到代理处。
var _XMLHttpRequest = window.XMLHttpRequest; // 保存原生的XMLHttpRequest // 覆盖XMLHttpRequest window.XMLHttpRequest = function (flags) { var req = new _XMLHttpRequest(flags); // 调用原生的XMLHttpRequest monitorXHR(req); // 埋入我们的“间谍” return req; };
例如将所有的请求都 post 到 test/proxy 接口，这是一个 Node 接口，代码如下。
代码比较简单，没有考虑各种请求，例如自定义的 header、cookie 等。因为没有经过实践，只是展示下思路，所以肯定存在着 BUG。
思路就是将整理好的请求地址、参数等信息转发过来后，先从数据库中查看是否有指定的 mock 数据。
如果有就直接返回，若没有，就再去请求原接口。
router.post("/test/proxy", async (ctx) => { const { id, method, url, params } = ctx.request.body; // 通过ID查找存储在 MongoDB 中的拦截记录 const row = await services.app.getOne(id); if (row) { ctx.body = row.response; return; } // 没有拦截就请求原接口 const { data } = await axios[method](url, params); ctx.body = data; });
理论上，是完成了拦截，但是现在还有个很重要的问题，那就是 XMLHttpRequest 或 fetch() 那段间谍脚本该怎么注入。
2）注入脚本
暂时想到了三个方法，第一个是通过控制 iframe 在页面中注入脚本。
因为那张 H5 示例页面，可以放到 iframe 中呈现，所以这种注入方式理论上可行。
只需要读取 HTMLIFrameElement 中的 contentDocument 属性就能得到页面中的 document。
document.getElementById('inner').contentDocument.body.innerHTML
但是 iframe 有个同源限制，必须是同源的才能通过脚本读取到 contentDocument。
况且注入的时机也比较讲究，必须在发起请求之前，改写 XMLHttpRequest 或 fetch()，若用 JavaScript 添加 script 元素，恐怕不够及时。
那么第二个方法，就是在构建的时候将脚本注入，当然，在上线后，这些脚本都是要去除掉的，仅限测试的时候使用。
不过这种方法不够自动化，需要研发配合，像我们这种小公司，就那么几个项目，倒也问题不大。
第三个方法是用无头浏览器（例如 puppeteer）将脚本注入（如下所示），然后再把新的页面结构作为响应返回。
await page.evaluate(async () => { const img = new Image(); img.src = "xxx.png"; document.body.appendChild(img); }); // 获取 HTML 结构 const html = await page.content();
但有个地方要注意，输出页面结构的域名要和之前相同（需要运维配合），否则那些脚本很有可能因为跨域而无法执行了。
二、记录页面行为
网页就是一棵 DOM 树，要记录页面行为，其实就是记录发生动作的 DOM 元素以及相关的动作参数。
脚本注入的方式可以参考上面的 3 种方法，平台的布局也与上面的类似，只是表单中的参数可能略有不同。
1）保存 DOM 元素
DOM 元素是不能直接 JSON 序列化的，所以需要将其映射成一个指定结构的对象，如下所示。
{ "type": "scrollTo", "rect": { "top": 470, "left": 8, "width": 359, "height": 400 }, "scroll": { "top": 189.5, "left": 0 }, "tag": "div" }
tag 是元素类型，例如 div、button、window 等；type 是事件类型，例如点击、滚动等；rect 是坐标和尺寸，scroll 是滚动距离。
这种结构就可以顺利存储到数据库中了。
2）监控行为
目前实验，就只监控了点击和滚动两种行为。
为 body 元素绑定 click 事件，采用捕获的事件传播方式。
/** * 监控 body 内的点击行为 */ document.body.addEventListener('click', (e) => { behaviors.push({ type: 'click', rect: offsetRect(e.target), tag: e.target.tagName.toLowerCase() }); }, true);
rect 的尺寸和坐标本来是通过 getBoundingClientRect() 获取的，但是该方法参照的是视口的左上角，也就是说会随着滚动而改变坐标。
所以就换了一种能更加精确获取坐标的方法，如下所示，nodeMap 是一个 Map 数据结构，key 可以是一个元素对象，用于缓存计算过的元素坐标。
// 元素缓存 const nodeMap = new Map(); /** * 读取元素真实的坐标 */ function offsetRect(node) { // 从缓存中读取node信息 const exist = nodeMap.get(node); if(exist) { return exist; } let top = 0, left = 0; const width = node.offsetWidth const height = node.offsetHeight; while (node) { top += node.offsetTop; left += node.offsetLeft; node = node.offsetParent; } const rect = { top, left, width, height }; nodeMap.set(node, rect); // 缓存node信息 return rect; }
下面是对滚动的监控代码，throttle() 是一个节流函数，不节流会影响滚动的性能。
在 startScroll() 函数中会计算滚动条距离顶部和左边的距离，window 和元素读取的属性略有不同。
/** * 节流 */ function throttle(fn, wait) { let start = 0; return (e) => { const now = +new Date(); if (now - start > wait) { fn(e); start = now; } }; } /** * 对滚动节流 */ const startScroll = throttle((e) => { const target = e.target; let tag, rect, scroll; if(target.defaultView === window) { tag = 'window'; scroll = { top: window.pageYOffset, left: window.pageXOffset }; }else { tag = target.tagName.toLowerCase(); scroll = { top: target.scrollTop, left: target.scrollLeft }; rect = offsetRect(target); } behaviors.push({ type: 'scrollTo', rect, scroll, tag }); }, 100); /** * 监控页面的滚动行为 */ window.addEventListener('scroll', (e) => { startScroll(e); }, true);
3）还原
在得到数据结构后，就得让其还原，呈现完成一系列动作后的页面。
我写的算法比较简单，还有很大的优化空间。目前就是遍历存储的行为数组，然后深度优先搜索 body 内的所有子元素。
当坐标和尺寸满足条件时，返回元素。不过这种方式非常依赖这两个参数，因此只要结构发生变化，那么动作就无法完成。
function revert(behaviors) { let isFind = false; // 深度优先遍历 const dfs = (node, target) => { if (!node) return; const rect = offsetRect(node); const tag = node.tagName.toLowerCase(); // console.log(node, rect, target) // 根据坐标定位元素 if (target.tag === tag && target.rect.top === rect.top && target.rect.left === rect.left && target.rect.width === rect.width && target.rect.height === rect.height) { target.node = node; //记录元素 isFind = true; return; } node.children && Array.from(node.children).forEach((value) => { if (isFind) { return; } dfs(value, target); }); }; behaviors.forEach(item => { isFind = false; // window对象单独处理 if(item.tag === 'window') { item.node = window; }else { dfs(document.body, item); } const { node } = item; // 没有找到符合要求的元素 if(!node) return; switch(item.type) { case 'scrollTo': // 滚动 node.scrollTo({ ...item.scroll, behavior: 'smooth' }); break; default: // 其他事件 node[item.type](); break; } }); }
scrollTo() 是一个滚动的方法，smooth 是一种平滑选项，奇怪的是，当我去掉此选项时，滚动就无法完成了。
4）截图
本来是计划用脚本来实现截图的，可选的库是 dom-to-image 和 html2canvas。
但是测试下来得到的截图结果都不是很理想，于是就仍然采用 puppeteer 来实现截图。
先将行为脚本注入，然后等几秒，最后再截图。这种截图得到的结果比较准确，但就是执行过程有点慢，经常需要十几秒甚至更长。
await page.evaluate(async () => { const scrpt = document.createElement("script"); scrpt.src = "xx.js"; document.body.appendChild(scrpt); }); await page.waitForTimeout(2000); await page.screenshot({ path: `xx/1.png`, type: "png" });
两张截图的对比可以通过 pixelmatch 完成，下面是官方提供的 node.js 使用示例，pngjs 是一个 png 图像编解码器。
const fs = require('fs'); const PNG = require('pngjs').PNG; const pixelmatch = require('pixelmatch'); const img1 = PNG.sync.read(fs.readFileSync('img1.png')); const img2 = PNG.sync.read(fs.readFileSync('img2.png')); const {width, height} = img1; const diff = new PNG({width, height}); pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1}); fs.writeFileSync('diff.png', PNG.sync.write(diff));
