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

通过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. Job for mysqld.service failed because the control process exited with error code. See "systemctl status mysqld.service" and "journalctl -xe" for details.

    一.前言 Job for mysqld.service failed because the control process exited with error code. See "sys ...

  2. 5 手写Java Stack 核心源码

    Stack是Java中常用的数据结构之一,Stack具有"后进先出(LIFO)"的性质. 只能在一端进行插入或者删除,即压栈与出栈 栈的实现比较简单,性质也简单.可以用一个数组来实 ...

  3. Codeforces Round #269 (Div. 2) A,B,C,D

    CodeForces - 471A 首先要有四个数相等,然后剩下两个数不同就是Bear,否则就是Elephant. #include <bits/stdc++.h> using names ...

  4. Lightoj1037【状压DP】

    题意: 给出n个怪的生命值,然后n个怪手里有一把枪,给出n*n的矩阵代表第i个怪对第j个怪的伤害值: 现在让你去干掉n个怪,只能平A使怪扣一滴血,干掉目标后, 可以把这个目标的武器拿进口袋然后用这个武 ...

  5. DRF教程4-视图集和路由类

    rest框架包括一个处理viewset的抽象,允许开发人员集中精力处理api交互和建模,url构造都根据常见方式自动处理. ViewSet类 几乎和VIew类一样,不过它提供read,update这样 ...

  6. CSS以及JS各种库的在线CDN引用地址

    JS类—— html5.js,让你的IE浏览器支持H5新特性:http://html5shiv.googlecode.com/svn/trunk/html5.js   (记得要注释判断哦) JQuer ...

  7. sftp 常用命令 以及 以及与 scp 的比较

    1.scp 不能容忍网络闪断,因此一旦出现网络闪断,那么scp 命令就会异常退出 sftp 可以容忍网络闪断,而且具备断电续传,因此sftp 适用于网络更慢的环境, 2. sftp 是一个交互式文件传 ...

  8. hdu4832Chess(dp)

    链接 这题第一想法是矩阵,不过范围太大了,然后就没有思路了.. 之后看到群里的解法,行和列可以分着走,两者是互不影响的,这样就把二维转换成了一维,直接dp求出就可以了. 然后再组合相乘一下. #inc ...

  9. P1816 忠诚 倍增

    链接:https://www.luogu.org/problem/show?pid=1816 题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k ...

  10. 09通过winfrom实现简单的播放音、视频

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...