前述：
Hi~ 这是本菜鸟第二次写关于前端测试的文章，基于第一次写的关于前端性能的自动化测试之后的又一篇关于前端GUI层面的自动化测试的文章。那先来谈谈为什么做这个吧~
背景：
相信个大大小小的公司，在新版发布之后，都回去走一遍线上ui的测试，不论新增还是迭代，并且就算校验了，也不能阻止线上可能出现的偶发状况，比方前端在SSR的时候，某个字段内带有特殊字符，走到浏览器渲染层面的时候，就会被当成特殊字符解析，这个时候，页面的某些dom元素就会“被”丢失。嗯？什么？还能被丢失？说到这，相信小伙伴跟我一样，瞪大了双眼~ 当然这个也算是SSR渲染带来的一个痛点。校验字符的合法性需要走到浏览器层，直☞用户。类似的可能还会存在多标签带来的隐患。比方说页面中，head标签中，多了一个标签，直接导致，第一个闭合标签后的字符还没被解析，直接当成了文本，展示了出来。这样给到用户，是不是很不友好。用户看了懵，研发知道了头大，啥玩意？？既然出现了这样的问题，那么就需要解决问题拉。继续往下看~
需要解决的问题：
-
服务包含特殊字符的情况下，在页面渲染过程中存在dom丢失问题；
-
Html结构中出现多对标签，导致页面解析出错，出现其他乱码字符问题；
-
以上不同问题的出现，就针对前端页面该具备的容错能力，兜底能力建设上，提供针对性的错误场景和错误场景代码覆盖点的捕捉、汇总。
-
前端线上页面，UI层级出现较大差异的预警能力。
知道要解决的问题之后，当然就需要知道怎么解决，开始调研👇
调研：
既然走到渲染层，就需要知道，当前的前端页面是怎样渲染方式：
- 客户端渲染；
- 服务端渲染。
可行方案（可处理层面）：
- 服务端渲染：在node解析html层，进行数据的重构，在服务端渲染结束之前。针对性的进行数据处理，插入指定的特殊字符等。最后走常规流程到浏览器进行渲染，校验其合法性
- 客户端渲染：浏览器获取到对应的html字符串后，对部分标签元素标签进行篡改，甚至对部分dom元素里面的内容进行篡改。来校验页面渲染是否合法且可正常渲染
解决方案 （选择走客户端渲染方式）
思路
- 不论是服务端渲染还是浏览器渲染，最后的解析，属于浏览器行为，那么便可以在浏览器进行解析的过程中，进行处理。去校验前端渲染 浏览器的合法性，高可用性
- 基于UI层面的测试而言，需要关注的其中之一，样式测试（ 固定界面样式测试 + 结构不变界面样式测试 + 计算样式测试 ）。基于样式，前端架构的页面设计大都有基准的框架，div块清晰的分层结构。
- 页面出现乱码的问题，可定义为：可感知的问题：即界面展示层级差异。这便依赖视觉感知测试以及视觉回归测试。（样式层级）；深层次就是dom树节点发生了改变，导致页面出现较大的差异。所以依赖对dom的检测对比（dom层级）
方案：（图像识别 + dom对比 ）
1. 图像识别对比（picdiff）。相对而言就是对于整个页面进行截图，该页面的本次截图与上次的截图，在像素上的差异，差异像素占总像素之比。设定预期的阈值，判定差异量
2. dom树diff对比 (domdiff)。即在截图的基础上，然后执行一段js，遍历整个dom树，获取元素计算样式和元素内文本内容，构造出一个JSON结构（如下图），然后diff这个json来判断页面差异。
详细设计
picdiff层面：
对需要校验的页面进行自动化，先对执行的页面进行校验：是否为第一次校验？若是第一次，则需要保存首次截图，将保存的图片定义为oldpic。丢入预处理池；在第二次执行过程中，判断当前执行页面是否存在，若存在，将本次截图丢进处理池，这个时候，去拿到上一次的预处理图片，进行diff，即每次diff都是拿本次的pic与上次的pic进行对比。
代码片段：
实例：
domdiff层面：
该处的处理和pic类似，都是拿当前数据同上次数据进行对比，直接上代码：
实例：
说了半天，没讲到重点？这样做的目的到底是什么？是不是有小伙伴有这样的困惑？那接下来就讲一下这个工具能带来的收益吧
目的 & 收益
目的：
将建设的工具，铺到整个前端项目中，将项目中的高频页面，核心页面，倒流到测试环境，监控线上不同页面，不同打开是否是正常打开，是都加载完全，是都存在异常。这个可以起到很好的作用了。这一点有点类似前端的混沌工程建设中的一环，前端的混沌，与后端的混沌完全不同，后端可能是基于服务，基于集群，基于数据。但是前端完全是面对用户，直接展示在用户层面。那么页面是否崩溃，是否异常，是否缺失，其实对一个项目，或者一条业务线来讲都至关重要了。那这个工具，也很好的监控，预警，实时解决了。
收益：
既可以释放高百分比的人力回归，也可以降低线上页面崩溃风险，提高线上质量。这样一看，一举多得呀~
适用场景&优势
适用场景：
- domdiff 可用于web页面，也可用于H5页面；
- domdiff 可用于生产环境，也可用于测试环境（依赖数据建设）。
优势：（imgdiff + domdiff）
- domdiff 在imgdiff之上增加了dom树diff。diff结果更加严谨，准确；
- picdiff 对于页面的准确度捕捉，准确度相对较低，加上domdiff的dom节点比较，可以将整个页面的diff准确度提高到90%以上
- domdiff 可依托大量且不同的初始数据进行单页面多场景测试，既可以针对检测UI层面得渲染，也可检测针对不同错误场景，前端层面得一个容错和兜底能力。
项目地址：
项目实例：
文中有说的不对的地方，还请指出~
