转载文章：来源（靠谱崔小拽）

通过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 前端自动化 下篇】 实践应用的更多相关文章

  1. 基于 Docker 和 GitLab 的前端自动化部署实践笔记

    基于 Docker 和 GitLab 的前端自动化部署 实践笔记 随着接触的项目越来越多,在部署测试流程上重复耗时工作也越来越多,所以对前端工作的CI/CD实现愈发迫在眉睫. 前端开发由于三大框架的崛 ...

  2. 用webpack实现前端自动化构建

    什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,cs ...

  3. 【page-monitor 前端自动化 上篇】初步调研

    转载文章:来源(靠谱崔小拽) 前端自动化测试主要在于:变化快,不稳定,兼容性复杂:故而,想通过较低的成本维护较为通用的自动化case比较困难.本文旨在通过page-monitor获取和分析dom结构, ...

  4. Web前端优化最佳实践及工具集锦

    Web前端优化最佳实践及工具集锦 发表于2013-09-23 19:47| 21315次阅读| 来源Googe & Yahoo| 118 条评论| 作者王果 编译 Web优化Google雅虎P ...

  5. 前端自动化开发之grunt

    上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天 ...

  6. 【Web前端开发最佳实践系列】前端代码推荐和建议

    一.常用的前端文件的组织结构: 1.js (放置JavaScript代码) lib(放置框架JavaScript文件) custom.js 2.css(放置CSS样式代码) lib(放置框架CSS文件 ...

  7. Web前端开发最佳实践（4）：在页面中添加必要的meta信息

    meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...

  8. Web前端开发最佳实践（3）：前端代码和资源的压缩与合并

    一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...

  9. 前端自动化构建yeoman

    前端自动化可分为: yo(脚手架工具).grunt(构建工具).bower(包管理器). OMAN的特性 http://yeoman.io/learning/   闪电般的初始化:项目开始阶段,可以基 ...

随机推荐

  1. E20190409-hm

    viable  adj. 切实可行的; 能养活的; 能自行生产发育的; 有望实现的; resolution  n. 分辨率; 解决; 决心; 坚决; produce vt. 产生; 生产; 制作; 创 ...

  2. yarn 基础

    创建: 2019/04/06  安装 mac brew install yarn  升级 brew upgrade yarn 确认是否成功 yarn --version  初始化项目 yarn ini ...

  3. E20180605-hm

    arbitrary adj. 乱; 随意的,任性的,随心所欲的; 主观的,武断的; 霸道的,专制的,专横的,独断独行的; session n. 开会,会议; (法庭的) 开庭; 会期,学期; (进行某 ...

  4. dos生成目录树

    1. tree命令详解 [Tree命令作用] 以图形显示驱动器或路径的文件夹结构. [Tree命令格式] 在命令行窗口使用tree /?查看帮助. TREE [drive:][path] [/F] [ ...

  5. Weekly Contest 78-------->811. Subdomain Visit Count (split string with space and hash map)

    A website domain like "discuss.leetcode.com" consists of various subdomains. At the top le ...

  6. Codeforces643A【一种暴力】

    mdzz,今天好烦啊,连特么暴力都不会写了. 题意是:给你n个数(<=n),然后让你求对于每个数输出含有他最多数量的区间数,还有如果存在相等的话,这个区间算小的那个 思路: 暴力起点,然后从小区 ...

  7. UnityEngine中Animator相关类的说明

    ---------------------------------------------------------------------- Animator 这个单独写,比较多 AnimationC ...

  8. 2016 Noip提高组

    2557. [NOIP2016]天天爱跑步 ★★☆   输入文件:runninga.in   输出文件:runninga.out   简单对比时间限制:2 s   内存限制:512 MB [题目描述] ...

  9. [Xcode 实际操作]三、视图控制器-(1)使用UIScrollView展示多个视图可控制器

    目录:[Swift]Xcode实际操作 本文将演示使用滚动视图创建多个页面. [Create a new Xcode project]->[Single View App]->[Next] ...

  10. Proteomes of paired human cerebrospinal fluid and plasma: Relation to blood-brain barrier permeability in older adults (文献分享一组-潘火珍)

    题目:Proteomes of paired human cerebrospinal fluid and plasma: Relation to blood-brain barrier permeab ...