国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【page-monitor 前端自動化 上篇】初步調研

light / 3027人閱讀

摘要:前端自動化測試主要在于變化快,不穩定,兼容性復雜故而,想通過較低的成本維護較為通用的自動化比較困難。本文旨在通過獲取和分析結構,調研能否通過監控和分析核心,來進行前端自動化測試。相關文章前端自動化中篇源碼分析前端自動化下篇實踐應用

前端自動化測試主要在于:變化快,不穩定,兼容性復雜;故而,想通過較低的成本維護較為通用的自動化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 前端自動化 中篇】 源碼分析
【page-monitor 前端自動化 下篇】 實踐應用

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80032.html

相關文章

  • page-monitor 前端動化 下篇】 實踐應用

    摘要:貼一個細節圖其他分析小拽通過上面的舉例,旨在拋磚引玉,希望或者結構在前端的自動化測試有一定應用,提升產品質量。最終再上一張流程圖,便于分析相關文章前端自動化上篇初步調研前端自動化中篇源碼分析 通過page-diff的初步調研和源碼分析,確定page-diff在前端自動化測試和監控方面做一些事情。本篇主要介紹下,page-diff在具體的實踐中的一些應用 核心dom校驗 前端的快速發展,...

    PAMPANG 評論0 收藏0
  • page-monitor 前端動化 中篇】 源碼分析

    摘要:上篇中初探了的一些功能和在前端自動化測試方面的可行性,本篇主要分析下的實現方式和源碼。文件分析完整文件目錄運行生成目錄分析出了及其組件代碼,可用和值的分析的文件和下面的五個文件。相關文章前端自動化上篇初步調研前端自動化下篇實踐應用 上篇中初探了page-monitor的一些功能和在前端自動化測試方面的可行性,本篇主要分析下page-monitor的實現方式和源碼。 mode-modul...

    Object 評論0 收藏0

發表評論

0條評論

light

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<