1

通过page-diff的初步调研和源码分析,确定page-diff在前端自动化测试和监控方面做一些事情。本篇主要介绍下,page-diff在具体的实践中的一些应用

核心dom校验

前端的快速发展,造成前端dom无论结构还是命名经常变化,每次都尽可能关注每个dom的变化,不可能也没有必要。但是核心dom是相对变化较小,但是比较重要,因此可以利用page-monitor 修改关注结构中的核心代码,核心架构的变化。

上图是未修改的代码,下图是忽略footer内部变化
F1AE4B80-CFC6-4A94-AB24-86297DCDD759
0141A2E8-9B5E-439A-9FEC-1147ACF982DF
实践中可以针对自身的核心dom进行进一步优化

局部dom校验

项目中,往往在某一时期特别关心某些板块,或者某些板块相对容易出错;因此,可以利用page-monitor 进行局部dom的细节diff。中篇中对只针对header进行对比diff做了详细介绍,此处不赘述,上图。

FDF6B258-5A69-47D1-B1FF-4EB38D7B8677

算法优化

由于获取了完整了dom的json,因此可以通过相关阈值的设定或者算法的优化;来对比结果,进行更加优化的分级预警和分析;作者一般对非核心预警超过15%变化会做出预警,超过更高阈值会进一步的预警等等。
贴一个dom 细节图
dom

其他分析

小拽通过上面的举例,旨在抛砖引玉,希望page-monitor或者dom结构在前端的自动化测试有一定应用,提升产品质量。

最终再上一张流程图,便于分析
page-diff 流程图

相关文章:
【page-monitor 前端自动化 上篇】 初步调研
【page-monitor 前端自动化 中篇】 源码分析


崔小拽
2.1k 声望189 粉丝

靠谱,爱分享,屌丝小码农。