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

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

通过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结构在前端的自动化测试有一定应用，提升产品质量。

最终再上一张流程图，便于分析

 

时间： 2024-10-27 13:45:09

【page-monitor 前端自动化 下篇】 实践应用的相关文章

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

转载文章:来源(靠谱崔小拽) 前端自动化测试主要在于:变化快,不稳定,兼容性复杂:故而,想通过较低的成本维护较为通用的自动化case比较困难.本文旨在通过page-monitor获取和分析dom结构,调研能否通过监控和分析核心dom,来进行前端自动化测试. 一:page-monitor 介绍 page-monitor:通过xpath获取dom节点结构,之后可视化的渲染出页面的差异.github地址:https://github.com/fouber/pag...基本原理:利用xpath获取页面的

前端自动化构建——需求和工具选择

今天突然心血来潮,想把前端的一些人工工作流程自动化,其实之前已经在用grunt进行自动化构建,但总是觉得还是有些事情未做好.首先说说,前端平时需要做那些自动化吧: 1. 先讲HTML,每个项目每个页面都需要统一的头部,其他标题,关键字,作者等meta自行修改,body部分每个页面各自填充,但使用的框架统一. 2. CSS,我使用的是less来编写,所以需要编译成css,另外,编译过程,一些css属性需要自动添加浏览器前缀,例如border-radius,属性最好自动按照类型排序,一些css的编写

前端自动化开发之grunt

上篇文章介绍了前端模块化开发工具seaJs,利用seaJs我们可以轻松实现前端的模块化编程,参见http://www.cnblogs.com/luozhihao/p/4818782.html 那么今天我继续介绍前端开发的另一工具——grunt.关于介绍grunt文章网上已经存在很多,而本文主要结合自己的亲身实践来讲解利用grunt实现前端开发中代码的压缩及合并. 一.准备工作 再使用grunt之前,我们先要安装node.js,利用node的包管理工具npm来安装grunt node.js下载地址

「移动开发」iuap mobile玩转前端自动化构建

提起iuapmobile studio,相信大家已经不再陌生了,是进行移动应用开发的强大集成工具与必备神器.借助强大的iuap mobile studio,可以实现对开发.测试.调试.打包.发布全程管理.同时iuap mobile studio又是一个极具开放性的平台工具,可以与绝大多数优秀的前端框架.技术很好地集成.今天我们就来看看在iuap mobile上如何玩转这些如火如荼的前端自动化构建技术.说起目前主流前端自动化构建技术,少不了npm.grunt.gulp.browserify.web

浅谈前端自动化构建

前言 现在的前端开发已经不再仅仅只是静态网页的开发了,日新月异的前端技术已经让前端代码的逻辑和交互效果越来越复杂,更加的不易于管理,模块化开发和预处理框架把项目分成若干个小模块,增加了最后发布的困难,没有一个统一的标准,让前端的项目结构千奇百怪.前端自动化构建在整个项目开发中越来越重要. 我们首先来回想一下之前我们是如何来开始做一个项目的. ① 首先要确定这个项目要使用什么样的技术来实现,然后开始规划我们的项目目录,接着就要往项目增加第三方库依赖,比如: 拷贝 CSS库(Yui Reset |

web 环境搭建00前端自动化构建工具(gulp)

web 环境搭建----前端自动化构建工具(gulp): 1----先下载安装node.js 2----然后在node.js命令行安装:npm install gulp -g (全局下载安装gulp插件) 3----然后进入到项目文件夹(命令cd 文件夹名),在项目文件夹中安装依赖文件:npm install gulp --save-dev (根据依赖文件下载gulp插件) 4----在项目文件夹目录下初始化:npm init (初始化文件) {初始化文件后项目中会出现packgae.json文

node前端自动化

一.前端自动化-项目构建 我们平时写代码,喜欢建一个project,然后里面是css.js.images文件,以及index.html,而node可以自动化构建好项目,如下: /** * Created by 毅 on 2015/9/20. */ var projectData = { 'name' : 'project', 'fileData' : [ { 'name' : 'css', 'type' : 'dir' }, { 'name' : 'js', 'type' : 'dir' },

前端自动化之神器 — Gulp

Nodejs不仅把Javascript带到了服务端,也在前端掀起了自动化的浪潮,推动了前端工作的历史性巨变,今天和大家一起学习前端自动化的神器---Gulp; 说起自动化,自然少不了Grunt,这位前辈目前社区完善,拥有几千个现成插件,install下来参考文档即可配置使用(参见:前端自动化之利剑——Grunt):而Gulp的出现,希望取其精华并取代Grunt,成为最流行的Javascript构建工具,Gulp采用代码优于配置的策略,让简单的事继续简单,让复杂的事变得可管理: 与Grunt的不同

前端自动化工具 -- gulp 使用简介

gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是前一个函数(工厂)制造出结果,提供后者使用. 同样的,也是包括基本用法和各插件的使用. 一.环境配置 gulp是基于nodejs的,所以没有 nodejs 环境的要先去安装好 然后给系统配上gulp环境 npm install -g gulp 再到某一工程目录下 跟grunt一般,也是需要package.json包依赖文件和一个入口文件 g