scarecrow

網頁像素級監控 實現方案.

方案簡述:

本項目是基于 .net(4.0+) 開發的. 結合webDriver 使用網頁截圖然后分析截圖后圖像與模板進行比對.

從而可以檢測出一般性的樣式bug.

使用方法

1.首先所有配置 和控制面板都在 這個頁面上.

部署后頁面是介個樣子的.

點擊右上方 彈出 增加檢測任務的面板

我們 以 baidu的 頁面為例. 點擊獲取預覽圖

因為我們選擇的是 webkit內核. 所以你會看到后臺啟動了一個 Phantomjs 的 無頭 driver

我們在得到這張圖后 需要使用ps 切割掉所有的運營區塊.所謂運營區塊,就是經常會變化的區域,這些區域不納入像素比對范疇.

挖掉后變成這樣..

點擊上傳模板

將制作好的 模板圖上傳到服務器上.

就可以看到剛才新添加進去的任務.

項目地址： https://github.com/wshxbqq/scarecrow