寫在最前
本次分享一個(gè)提供設(shè)計(jì)稿與前端頁面進(jìn)行像素對(duì)比的node服務(wù)躬拢，旨在為測(cè)試或者前端人員自己完成一個(gè)輔助性測(cè)試躲履。相信我，在像素級(jí)別的對(duì)比下聊闯，網(wǎng)頁對(duì)設(shè)計(jì)稿的還原程度一下子就會(huì)凸顯出來工猜。。如果哪位童鞋用這個(gè)功能測(cè)了某位前端小哥哥的頁面發(fā)現(xiàn)了問題菱蔬，請(qǐng)不要說是我提供的這個(gè)工具=域慷。=
效果預(yù)覽
前置知識(shí)
本次用到了以下兩個(gè)庫作為輔助工具：
- casperjs：基于PhantomJS的編寫。其內(nèi)部提供了一個(gè)無界面瀏覽器，簡(jiǎn)單來說用它你可以以代碼的形式來完成模擬人來操作瀏覽器的操作犹褒，其中涉及鼠標(biāo)各種事件抵窒，等等非常多的功能，本次主要使用其附帶的截圖功能叠骑。
- resemble.js:圖片像素對(duì)比工具李皇。調(diào)用方法簡(jiǎn)單理解為，傳入兩張圖宙枷，返回一張合成圖并附帶對(duì)比參數(shù)如差別度等等掉房。基本實(shí)現(xiàn)思路可以理解為通過將圖片轉(zhuǎn)為canvas后慰丛，獲取其圖像像素點(diǎn)卓囚，之后對(duì)每個(gè)像素點(diǎn)進(jìn)行一次比對(duì)。
所以整個(gè)服務(wù)我們應(yīng)該已經(jīng)有了大題的思路即通過casperjs來進(jìn)入某個(gè)網(wǎng)站截取某個(gè)頁面诅病，再將其與設(shè)計(jì)圖進(jìn)行比對(duì)得出結(jié)果哪亿。
整體思路
通過上圖我們應(yīng)該能整理出一個(gè)大概的流程：
- 從前端頁面接收設(shè)計(jì)稿圖片及需要截取的網(wǎng)站地址與節(jié)點(diǎn)信息
- 將設(shè)計(jì)稿保存到images文件夾
- 開啟子進(jìn)程，啟動(dòng)casperjs贤笆，完成對(duì)目標(biāo)網(wǎng)站的截取
- 截取后請(qǐng)求form.html將圖片地址信息填入并重新傳回服務(wù)器
- 服務(wù)端獲取圖片信息通過resemblejs將截取圖與設(shè)計(jì)稿進(jìn)行比對(duì)
- 結(jié)果傳回前端頁面
這其中有一個(gè)問題可能會(huì)有人注意到就是：為什么在casperjs中對(duì)目標(biāo)網(wǎng)站截圖了不能直接把信息傳回服務(wù)器中蝇棉，而是選擇了再去打開一個(gè)表單頁面通過表單的形式來提交信息？
答：首先我對(duì)casperjs和node了解都不那么深入芥永，我理解的是首先casperjs不是一個(gè)node模塊篡殷，它是跑在操作系統(tǒng)中的，我尚且沒有發(fā)現(xiàn)怎么在casperjs中建立與node服務(wù)的通信埋涧，如果有方法一定要告訴我板辽，因?yàn)槲艺娴牟惶私鈉asper！其次由于無法建立通信棘催，我只能退而求其次劲弦，通過casper快速打開一個(gè)我寫好的表單頁面并且填寫好圖片信息傳回服務(wù)器，這么做是可以完成最初的訴求巧鸭。所以就有了上面from.html那段的操作瓶您。
實(shí)現(xiàn)細(xì)節(jié)
實(shí)現(xiàn)一個(gè)簡(jiǎn)易靜態(tài)服務(wù)器
因?yàn)樯婕暗絠ndex.html與form.html頁面的返回麻捻，故需要實(shí)現(xiàn)一個(gè)超級(jí)簡(jiǎn)易的靜態(tài)服務(wù)器纲仍。代碼如下：
const MIME_TYPE = {
"css": "text/css",
"gif": "image/gif",
"html": "text/html",
"ico": "image/x-icon",
"jpeg": "image/jpeg",
"jpg": "image/jpg",
"js": "text/javascript",
"json": "application/json",
"pdf": "application/pdf",
"png": "image/png",
"svg": "image/svg+xml",
"swf": "application/x-shockwave-flash",
"tiff": "image/tiff",
"txt": "text/plain",
"wav": "audio/x-wav",
"wma": "audio/x-ms-wma",
"wmv": "video/x-ms-wmv",
"xml": "text/xml"
}
function sendFile(filePath, res) {
fs.open(filePath, 'r+', function(err){ //根據(jù)路徑打開文件
if(err){
send404(res)
}else{
let ext = path.extname(filePath)
ext = ext ? ext.slice(1) : 'unknown'
let contentType = MIME_TYPE[ext] || "text/plain" //匹配文件類型
fs.readFile(filePath,function(err,data){
if(err){
send500(res)
}else{
res.writeHead(200,{'content-type':contentType})
res.end(data)
}
})
}
})
}
解析表單并將圖片存儲(chǔ)到images文件夾
const multiparty = require('multiparty') //解析表單
let form = new multiparty.Form()
form.parse(req, function (err, fields, files) {
let filename = files['file'][0].originalFilename,
targetPath = __dirname + '/images/' + filename,
if(filename){
fs.createReadStream(files['file'][0].path).pipe(fs.createWriteStream(targetPath))
...
}
})
通過創(chuàng)建可讀流讀出文件內(nèi)容，再通過pipe寫入到制定路徑下即可保存上傳來的圖片贸毕。
運(yùn)行casperjs
const { spawn } = require('child_process')
spawn('casperjs', ['casper.js', filename, captureUrl, selector, id])
casperjs.stdout.on('data', (data) => {
...
})
通過spawn可以創(chuàng)建子進(jìn)程來啟動(dòng)casperjs郑叠，同樣也可以使用exec等。
截圖并提交數(shù)據(jù)到form.html
const system = require('system')
const host = 'http://10.2.45.110:3033'
const casper = require('casper').create({
// 瀏覽器窗口大小
viewportSize: {
width: 1920,
height: 4080
}
})
const fileName = decodeURIComponent(system.args[4])
const url = decodeURIComponent(system.args[5])
const selector = decodeURIComponent(system.args[6])
const id = decodeURIComponent(system.args[7])
const time = new Date().getTime()
casper.start(url)
casper.then(function() {
console.log('正在截圖請(qǐng)稍后')
this.captureSelector('./images/casper'+ id + time +'.png', selector)
})
casper.then(function() {
casper.start(host + '/form.html', function() {
this.fill('form#contact-form', {
'diff': './images/casper'+ id + time +'.png',
'point': './images/' + fileName,
'id': id
}, true)
})
})
casper.run()
代碼還是比較簡(jiǎn)單的明棍，主要過程就是打開一個(gè)頁面乡革，然后在then中傳入你的操作，最后執(zhí)行run。在這個(gè)過程里我不太知道如何與node服務(wù)通信沸版，故選擇了再開一個(gè)頁面嘁傀。。想深入研究的可以去看casperjs的官網(wǎng)非常詳盡视粮！
通過resemble.js進(jìn)行像素比對(duì)并返回?cái)?shù)據(jù)
function complete(data) {
let imgName = 'diff'+ new Date().getTime() +'.png',
imgUrl,
analysisTime = data.analysisTime,
misMatchPercentage = data.misMatchPercentage,
resultUrl = './images/' + imgName
fs.writeFileSync(resultUrl, data.getBuffer())
imgObj = {
...
}
let resEnd = resObj[id] // 找回最開始的res返回給頁面數(shù)據(jù)
resEnd.writeHead(200, {'Content-type':'application/json'})
resEnd.end(JSON.stringify(imgObj))
}
let result = resemble(diff).compareTo(point).ignoreColors().onComplete(complete)
這其中涉及到了一個(gè)點(diǎn)细办，即我現(xiàn)在所得到的結(jié)果要返回給最初的請(qǐng)求里，而從一開始的請(qǐng)求到現(xiàn)在我已經(jīng)中轉(zhuǎn)了多次蕾殴，導(dǎo)致我現(xiàn)在找不到我最初的返回體res了笑撞。想了很久只能暫時(shí)采用了設(shè)定全局對(duì)象，在接收最初的請(qǐng)求后將請(qǐng)求者的ip和時(shí)間戳設(shè)定為唯一id存為該對(duì)象的key钓觉，value為當(dāng)前的res茴肥。同時(shí)整個(gè)中轉(zhuǎn)流程中時(shí)刻傳遞id，最后通過調(diào)用resObj[id]來得到一開始的返回體荡灾，返回?cái)?shù)據(jù)瓤狐。這個(gè)方法我不認(rèn)為是最優(yōu)解，但是鑒于我現(xiàn)在想不出來好方法為了跑通整個(gè)服務(wù)不得已卧晓。芬首。如果有新的思路請(qǐng)務(wù)必告知！逼裆！
部署
安裝PhantomJS（osx）
官網(wǎng)下載： phantomjs-2.1.1-macosx.zip
解壓路徑：/User/xxx/phantomjs-2.1.1-macosx
添加環(huán)境變量：~/.bash_profile 文件中添加
export PATH="$PATH:/Users/xxx/phantomjs-2.1.1-macosx/bin"
terminal輸入：phantomjs --version
能看到版本號(hào)即安裝成功
安裝casperjs
brew update && brew install casperjs
安裝resemble.js
cnpm i resemblejs //已寫進(jìn)packjson可不用安裝
brew install pkg-config cairo libpng jpeg giflib
cnpm i canvas //node內(nèi)運(yùn)行canvas
node服務(wù)
git clone https://github.com/Aaaaaaaty/gui-auto-test.git
cd gui-auto-test
cnpm i
cd pxdiff
nodemon server.js
打開http://localhost:3033/index.html
參考文獻(xiàn)
最后
慣例po作者的博客郁稍，不定時(shí)更新中——
有問題歡迎在issues下交流。
