【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過程。