通过page-diff的初步调研和源码分析,确定page-diff在前端自动化测试和监控方面做一些事情。本篇主要介绍下,page-diff在具体的实践中的一些应用
核心dom校验
前端的快速发展,造成前端dom无论结构还是命名经常变化,每次都尽可能关注每个dom的变化,不可能也没有必要。但是核心dom是相对变化较小,但是比较重要
,因此可以利用page-monitor 修改关注结构中的核心代码,核心架构的变化。
上图是未修改的代码,下图是忽略footer内部变化
实践中可以针对自身的核心dom进行进一步优化
局部dom校验
项目中,往往在某一时期特别关心某些板块,或者某些板块相对容易出错;因此,可以利用page-monitor 进行局部dom的细节diff。中篇中对只针对header进行对比diff做了详细介绍,此处不赘述,上图。
算法优化
由于获取了完整了dom的json,因此可以通过相关阈值的设定或者算法的优化;来对比结果,进行更加优化的分级预警和分析;作者一般对非核心预警超过15%变化会做出预警,超过更高阈值会进一步的预警等等。
贴一个dom 细节图
其他分析
小拽通过上面的举例,旨在抛砖引玉,希望page-monitor或者dom结构在前端的自动化测试有一定应用,提升产品质量。
相关文章:
【page-monitor 前端自动化 上篇】 初步调研
【page-monitor 前端自动化 中篇】 源码分析
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。