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

前端自动化测试主要在于:变化快,不稳定,兼容性复杂;故而,想通过较低的成本维护较为通用的自动化case比较困难。本文旨在通过page-monitor获取和分析dom结构,调研能否通过监控和分析核心dom,来进行前端自动化测试

一:page-monitor 介绍

page-monitor:通过xpath获取dom节点结构,之后可视化的渲染出页面的差异。
github地址:https://github.com/fouber/pag...
基本原理:利用xpath获取页面的dom结构,存储为结构化的json,对比两次的json之间的差异,利用phantom渲染页面和差异页面

先上个初次试用的图

二:初次试用

2.1 安装

# page-monitor 依赖于 phantomjs
npm install phantomjs
npm install page-monitor

注意:phantomJs较大,如果比较慢 可以用brew安装,并且page-monitor最多兼容phantom1.98

# 调整phantom为1.98 版本
MacBook-Pro:~ cuixiaohuan$ brew link phantomjs198
Linking /usr/local/Cellar/phantomjs198/1.9.8... 2 symlinks created
MacBook-Pro:~ cuixiaohuan$ phantomjs -v
1.9.8

2.2 初次运行:写一个test.js 代码如下:

var Monitor = require('page-monitor');

var url = 'http://www.baidu.com';
var monitor = new Monitor(url);
monitor.capture(function(code){
console.log(monitor.log); // from phantom
console.log('done, exit [' + code + ']');
});

运行效果

MacBook-Pro:test cuixiaohuan$ node test.js
{ debug:
[ 'mode: 11',
'need diff',
'loading: http://www.baidu.com',
'page.viewportSize = {"width":320,"height":568}',
'page.settings.resourceTimeout = 20000',
'page.settings.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53"',
'loaded: http://www.baidu.com',
'delay before render: 0ms',
'walk tree',
'save capture [/Users/cuixiaohuan/Desktop/workspace/test/pagemonitor/test/www.baidu.com/Lw==/1461155680901]',
'screenshot [/Users/cuixiaohuan/Desktop/workspace/test/pagemonitor/test/www.baidu.com/Lw==/1461155680901/screenshot.jpg]',
'Unsafe JavaScript attempt to access frame with URL about:blank from frame with URL file:///Users/cuixiaohuan/Desktop/workspace/test/pagemonitor/test/node_modules/page-monitor/phantomjs/index.js. Domains, protocols and ports must match.' ],
warning: [],
info: [],
error: [],
notice: [] }
done, exit [0]

2.2 生成对比页面

test.js code

monitor.diff(1408947323420, 1408947556898, function(code){
console.log(monitor.log.info); // diff result
console.log('[DONE] exit [' + code + ']');
});

运行

MacBook-Pro:test cuixiaohuan$ node test.js
[ '{"diff":{"left":"1461155680901","right":"1461163758667","screenshot":"/Users/cuixiaohuan/Desktop/workspace/test/pagemonitor/test/www.baidu.com/Lw==/diff/1461155680901-1461163758667.jpg","count":{"add":2,"remove":2,"style":0,"text":9}}}' ]
[DONE] exit [0]

2.3 对比页面效果如下图

2.4 目录初步分析

通过目录和运行结果
1:每个时间利用phantom生成一张截图【保存现场】和一个dome的tree.json【对比dom】 【生成过程看下源码】
2:diff 调用tree.json 比较区中的区别【位置,内容生成和对比过程之后看下源码?】
3:利用当时保存的截图渲染生成的结果

三:dom diff工具page monitor 调研初步结论:

  • 1:dom的diff 是可行的。

  • 2:page monitor 现有主要功能:抽取不同时间段的页面做页面domdiff使用过程中缺陷:

1:依赖太多,依赖node,依赖phantom,2:接口太少,现在直接提供的就两个一个保存现场,一个diff。不方便dom定制和阈值定制。

四:应用价值思考和下一步

如果能对dom树的处理更完善一些,应用价值还是挺高的,例如核心dom的diff,局部dom的diff,时效性dom(例如:时间tag必须变化,不变化则为bug)的变更检验,兼容性dom的check等等

下一步调研:看下源码中,分析dom生成tree过程,对比tree过程,展现tree过程。

 

【page-monitor 前端自动化 上篇】初步调研的更多相关文章

  1. 前端自动化开发之grunt

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

  2. 前端自动化部署之gulp

    1.首先需要安装node+npm(这里不再叙述,网上教程一大堆) 2.gulp全局安装:npm install -g gulp 3.cd进入到你的项目目录,这里使用demo文件夹为我的示例项目 4.在 ...

  3. Gulp构建前端自动化工作流之:常用插件介绍及使用

    在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: 1. 构建项目目录结构(Directory Structure Build) 2. 插件介绍及 ...

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

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

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

    转载文章:来源(靠谱崔小拽) 通过page-diff的初步调研和源码分析,确定page-diff在前端自动化测试和监控方面做一些事情.本篇主要介绍下,page-diff在具体的实践中的一些应用 核心d ...

  6. (转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具

    https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...

  7. 前端自动化构建之gulp

    前言 之前学完html的基础后就去学js框架了,每次都是用脚手架搭好的文件,在无形中体验了一波前端自动化带来的方便.然后前一段时间才开始学习前端自动化. 基本介绍 gulp说得简单一点就是一个自动化把 ...

  8. 构建一个基本的前端自动化开发环境 —— 基于 Gulp 的前端集成解决方案(四)

    通过前面几节的准备工作,对于 npm / node / gulp 应该已经有了基本的认识,本节主要介绍如何构建一个基本的前端自动化开发环境. 下面将逐步构建一个可以自动编译 sass 文件.压缩 ja ...

  9. 前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...

随机推荐

  1. Linux which 查找命令

    在学习 兄弟连 linux教学视频 的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 权限管理命令: which 基础的命令 命令名称:which 命令的所在路径:/usr/bin ...

  2. Java的多线程创建方法

    1. 直接使用Thread来创建 package com.test.tt; public class ThreadEx extends Thread{ private int j; public vo ...

  3. 将字符串中的字符按Z字形排列,按行输出

    示例1: Input: s = "PAYPALISHIRING", numRows = 3 Output: "PAHNAPLSIIGYIR" 示例2: Pyth ...

  4. java保留小数位数

    System.out.println(String.format("%.5f",new Main().minRadius(n,m)));

  5. gSoap学习笔记

    http://www.cnblogs.com/xiangism/archive/2012/11/14/2770242.html http://www.cnblogs.com/lvkun/archive ...

  6. 3D max模型导入unity 3D中注意事项

    一.单位,比例统一   在建模型前先设置好单位,在同一场景中会用到的模型的单位设置必须一样,模型与模型之间的比例要正确,和程序的导入单位一致,即便到程序需要缩放也可以统一调整缩放比例.统一单位为米. ...

  7. OPENGL_变换与坐标系

    参考:http://blog.csdn.net/kandyer/article/details/12449973 坐标系 世界坐标系:绝对坐标 物体坐标系:以物体自身为原点的坐标系 摄像机坐标系:以摄 ...

  8. CentOS 6.5 升级gcc到4.8 以及libstdc++

    CentOS 6.5 自带gcc太旧不支持c11, 升级到4.8的步骤: 引用: http://cache.baiducontent.com/c?m=9d78d513d99216f31eb0d5690 ...

  9. cogs 610. 数对的个数

    610. 数对的个数 ★★   输入文件:dec.in   输出文件:dec.out   简单对比时间限制:1 s   内存限制:128 MB Description出题是一件痛苦的事情!题目看多了也 ...

  10. CentOS 利用 yum 安装卸载软件常用命令

    一.yum安装和卸载软件 有个前提是yum安装的软件包都是rpm格式的. 安装的命令是,yum install ~,yum会查询数据库,有无这一软件包,如果有,则检查其依赖冲突关系,如果没有依赖冲突, ...