當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2025/3/15 HTML 27 豆豆

生活随笔收集整理的這篇文章主要介紹了【page-monitor 前端自动化上篇】初步调研小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

轉(zhuǎn)載文章：來源（靠譜崔小拽）

前端自動(dòng)化測(cè)試主要在于：變化快，不穩(wěn)定，兼容性復(fù)雜；故而，想通過較低的成本維護(hù)較為通用的自動(dòng)化case比較困難。本文旨在通過page-monitor獲取和分析dom結(jié)構(gòu)，調(diào)研能否通過監(jiān)控和分析核心dom，來進(jìn)行前端自動(dòng)化測(cè)試。

一：page-monitor 介紹

page-monitor：通過xpath獲取dom節(jié)點(diǎn)結(jié)構(gòu)，之后可視化的渲染出頁(yè)面的差異。
github地址：https://github.com/fouber/pag...
基本原理：利用xpath獲取頁(yè)面的dom結(jié)構(gòu)，存儲(chǔ)為結(jié)構(gòu)化的json，對(duì)比兩次的json之間的差異，利用phantom渲染頁(yè)面和差異頁(yè)面。

先上個(gè)初次試用的圖

二：初次試用

2.1 安裝

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

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

# 調(diào)整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 初次運(yùn)行：寫一個(gè)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 + ']'); });

運(yùn)行效果

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 生成對(duì)比頁(yè)面

test.js code

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

運(yùn)行

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 對(duì)比頁(yè)面效果如下圖

2.4 目錄初步分析

通過目錄和運(yùn)行結(jié)果
1：每個(gè)時(shí)間利用phantom生成一張截圖【保存現(xiàn)場(chǎng)】和一個(gè)dome的tree.json【對(duì)比dom】【生成過程看下源碼】
2：diff 調(diào)用tree.json 比較區(qū)中的區(qū)別【位置，內(nèi)容生成和對(duì)比過程之后看下源碼？】
3：利用當(dāng)時(shí)保存的截圖渲染生成的結(jié)果

三：dom diff工具page monitor 調(diào)研初步結(jié)論：

1：dom的diff 是可行的。
2：page monitor 現(xiàn)有主要功能：抽取不同時(shí)間段的頁(yè)面做頁(yè)面domdiff使用過程中缺陷：

1：依賴太多，依賴node，依賴phantom，2：接口太少，現(xiàn)在直接提供的就兩個(gè)一個(gè)保存現(xiàn)場(chǎng)，一個(gè)diff。不方便dom定制和閾值定制。

四：應(yīng)用價(jià)值思考和下一步

如果能對(duì)dom樹的處理更完善一些，應(yīng)用價(jià)值還是挺高的，例如核心dom的diff，局部dom的diff，時(shí)效性dom(例如：時(shí)間tag必須變化，不變化則為bug)的變更檢驗(yàn)，兼容性dom的check等等

下一步調(diào)研：看下源碼中，分析dom生成tree過程，對(duì)比tree過程，展現(xiàn)tree過程。

轉(zhuǎn)載于:https://www.cnblogs.com/xiaoyaowuming/p/6667859.html

總結(jié)

以上是生活随笔為你收集整理的【page-monitor 前端自动化上篇】初步调研的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。