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

通过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. C# 程序软件启动默认管理员权限。

    在vs的Properties目录中找到 app.manifest,将其中level="asInvoker" 改成 level="requireAdministrator& ...

  2. 翻转链表中相邻的k个节点

    示例: 输入:1->2->3->4->5 k=2 输出:2->1->4->3->5 k=3输出:3->2->1->4->5 Py ...

  3. Lightoj1014【基础题】

    题意: 有C个人,安排了P个吃的,每个人会吃Q个吃的,最后留下L个吃的:求所有可能的Q,从小到大输出,要保证Q>L; 思路: 其实就是求出P-L的所有数的约数,然后这个约数>L的话就满足: ...

  4. CodeForces 653A【水】

    sort一发,去重 #include<cstdio> #include<iostream> #include<queue> #include<string.h ...

  5. [HNOI2010] 物品调度 fsk

    标签:链表+数论知识. 题解: 对于这道题,其实就是两个问题的拼凑,我们分开来看. 首先要求xi与yi.这个可以发现,x每增加1,则pos增加d:y每增加1,则pos增加1.然后,我们把x与y分别写在 ...

  6. [Xcode 实际操作]一、博主领进门-(9)Xcode左侧的项目导航区界面介绍

    目录:[Swift]Xcode实际操作 本文将演示Xcode的左侧操作界面. 项目的目录结构: 应用代理文件[AppDelegate.swift] 应用代理文件时系统运行本应用的委托,里面定义了如程序 ...

  7. XHTML学习笔记 Part2：核心元素

    1. <html>元素 <html xmlns="http://www.w3.org/1999/xhtml"> 仅有两个元素是<html>的直接 ...

  8. 阿里mavne中央仓库

    https://www.cnblogs.com/ae6623/p/4416256.html 待整理

  9. eclipse中，添加JavaSE帮助文档和源码

  10. 彻底剖析RMI底层源码 、手写轻量级RMI框架

    https://blog.csdn.net/Z0157/article/details/82049975 User public class User { private int age; publi ...