【page-monitor 前端自动化 上篇】初步调研
转载文章:来源(靠谱崔小拽)
前端自动化测试主要在于:
变化快,不稳定,兼容性复杂
;故而,想通过较低的成本维护较为通用的自动化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过程。
转载于:https://www.cnblogs.com/xiaoyaowuming/p/6667859.html
【page-monitor 前端自动化 上篇】初步调研相关推荐
- Gulp构建前端自动化工作流
## Gulp构建前端自动化工作流 ### Gulp构建前端自动化工作流之:常用插件介绍及使用 在对Gulp有了一个初步的了解之后,我们开始构建一个较为完整的Gulp开发环境. 本文主要分为6个段落: ...
- 浅谈前端自动化构建 -- Grunt、Gulp、FIS
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:内容较多,建议通过左侧导航栏进行阅读 前端自动化构建 基本介绍 一切重复工作本应自动化.将开发中的源代码,自动化的转换成生产环境中可以运行的程序, ...
- (转)Bootstrap 之 Metronic 模板的学习之路 - (7)GULP 前端自动化工具
https://segmentfault.com/a/1190000006738327 初步了解 Metronic 的结构和应用后,我们就可以在项目中应用起来了.考虑到实际项目应用时,会有很多文件需要 ...
- 前端自动化打包工具--webpack
前端自动化打包工具–webpack 背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的 ...
- 前端自动化 Jenkins/TravisCI/CiecleCi
前端自动化 介绍 git push origin master -f 强制覆盖先前提交 CI/CD工具介绍 Jenkins搭建 搭建要点 dockerhub https://hub.docker.co ...
- neo4j 图数据库初步调研 图数据库与关系型数据库差异-f
相关文章 neo4j 图数据库初步调研 三元组.属性图.图模型.超图.RDF demo项目(python+vue) 本文目录 相关文章 一.技术关键字 二.前言 三.图数据库与传统数据库 1.反规范化 ...
- 利用Node-js搭建前端自动化平台
我们在前面< Node.js的本质 >一文中初步了解Node.js后,发现它功能很多呀,这么牛逼的东西赶紧学习.然而我一直翻看网上各种的教程,文档,都是什么学习node内核呀,API呀,n ...
- thinkphp整合系列之gulp实现前端自动化
这又是一个一次整合终身受益:不止是终身:换个项目同样可以很方便复用:不信你看另一个项目: thinkphp整合系列之gulp实现前端自动化 虽然我等叫php程序猿:但是不可避免的是要跟html打交道的 ...
- 前端自动化工具 grunt 插件 uglify 的简单使用(一)
Grunt 的简介: Grunt 是一套前端自动化工具,是一个基于 node.js 的命令行工具,它一般用于: 1.压缩文件: 2.合并文件: 3.简单的语法检测: 4.监听文件变动: 5.less ...
最新文章
- windows优化大师8周年纪念版_《数码宝贝》20周年纪念:当年的八神太一与亚古兽你还记得吗?...
- android 线程信号量,iOS开发 多线程的高级应用-信号量semaphore
- Spring aop 实现异常拦截
- python【蓝桥杯vip练习题库】ADV-288成绩排名
- NetBeans 7 Python 又回来了
- iptables tcp wrappers
- Linux编程练习 --多线程1--线程创建
- Java项目转变为Java Web项目
- 递增的整数序列链表的插入
- nodejs+mongodb+vue前后台配置ueditor
- 分享我是如何找房东直租省中介费 租房 找房 直租 经验
- spriteKit 笔记三 —— Drog 精灵
- 输入起止坐标,返回途径网格。
- 识别 Cisco交换机型号
- 谷歌浏览器(Chrome)输入框总是有历史输入记录,解决办法
- php elasticsearch更新文档
- 田园综合体PPP项目规划方案(ppt)
- docker 学习记录1
- 2020数学建模医疗和养老保障问题解决办法
- 【计算机组成与设计:软件、硬件接口(1)】计算机概要与技术
热门文章
- Java对象容器——顺序容器及常用方法
- jquerymobile从index.html跳转到另外一个xxxx.html文件,js不执行的解决
- 操作系统(十五)调度算法的评价指标
- STM32开发 -- 4G模块开发详解(3)
- Android Framework------之Keyguard 简单分析
- Linux下简单线程池的实现
- APK加壳【1】初步方案实现详解
- 【问链财经-区块链基础知识系列】 第三十九课 EOS与ETH体系结构比较全解析
- TextSwitcher实现文本自动垂直滚动
- python接口测试类型_python 接口测试字符类型转换