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

2016-08-07 23:08:00

前端自动化测试主要在于：变化快，不稳定，兼容性复杂；故而，想通过较低的成本维护较为通用的自动化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 依赖于 phantomjsnpm install phantomjsnpm install page-monitor

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

# 调整phantom为1.98 版本MacBook-Pro:~ cuixiaohuan$ brew link phantomjs198Linking /usr/local/Cellar/phantomjs198/1.9.8... 2 symlinks createdMacBook-Pro:~ cuixiaohuan$ phantomjs -v1.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]