码迷,mamicode.com
首页 > 其他好文 > 详细

【page-monitor 前端自动化 下篇】 实践应用

时间:2017-04-05 11:50:49      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:对比   阈值   monitor   一些事   实践   优化   content   命名   tor   

转载文章:来源(靠谱崔小拽

通过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 前端自动化 下篇】 实践应用

标签:对比   阈值   monitor   一些事   实践   优化   content   命名   tor   

原文地址:http://www.cnblogs.com/xiaoyaowuming/p/6667866.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!