本次分享一個提供設計稿與前端頁面進行像素對比的node服務,旨在爲測試或者前端人員本身完成一個輔助性測試。相信我,在像素級別的對比下,網頁對設計稿的還原程度一會兒就會凸顯出來。
歡迎關注個人博客,不按期更新中——javascript
本次用到了如下兩個庫做爲輔助工具:css
因此整個服務咱們應該已經有了大題的思路即經過casperjs來進入某個網站截取某個頁面,再將其與設計圖進行比對得出結果。html
經過上圖咱們應該能整理出一個大概的流程:前端
這其中有一個問題可能會有人注意到就是:爲何在casperjs中對目標網站截圖了不能直接把信息傳回服務器中,而是選擇了再去打開一個表單頁面經過表單的形式來提交信息?java
答:首先我對casperjs和node瞭解都不那麼深刻,我理解的是首先casperjs不是一個node模塊,它是跑在操做系統中的,我尚且沒有發現怎麼在casperjs中創建與node服務的通訊,若是有方法必定要告訴我,由於我真的不太瞭解casper!其次因爲沒法創建通訊,我只能退而求其次,經過casper快速打開一個我寫好的表單頁面而且填寫好圖片信息傳回服務器,這麼作是能夠完成最初的訴求。因此就有了上面from.html那段的操做。node
由於涉及到index.html與form.html頁面的返回,故須要實現一個超級簡易的靜態服務器。代碼以下:git
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){ //根據路徑打開文件 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) } }) } }) }
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)) ... } })
經過建立可讀流讀出文件內容,再經過pipe寫入到制定路徑下便可保存上傳來的圖片。github
const { spawn } = require('child_process') spawn('casperjs', ['casper.js', filename, captureUrl, selector, id]) casperjs.stdout.on('data', (data) => { ... })
經過spawn能夠建立子進程來啓動casperjs,一樣也可使用exec等。macos
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('正在截圖請稍後') 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()
代碼仍是比較簡單的,主要過程就是打開一個頁面,而後在then中傳入你的操做,最後執行run。在這個過程裏我不太知道如何與node服務通訊,故選擇了再開一個頁面。。想深刻研究的能夠去看casperjs的官網很是詳盡!npm
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返回給頁面數據 resEnd.writeHead(200, {'Content-type':'application/json'}) resEnd.end(JSON.stringify(imgObj)) } let result = resemble(diff).compareTo(point).ignoreColors().onComplete(complete)
這其中涉及到了一個點,即我如今所獲得的結果要返回給最初的請求裏,而從一開始的請求到如今我已經中轉了屢次,致使我如今找不到我最初的返回體res了。想了好久只能暫時採用了設定全局對象,在接收最初的請求後將請求者的ip和時間戳設定爲惟一id存爲該對象的key,value爲當前的res。同時整個中轉流程中時刻傳遞id,最後經過調用resObj[id]來獲得一開始的返回體,返回數據。這個方法我不認爲是最優解,可是鑑於我如今想不出來好方法爲了跑通整個服務不得已。。若是有新的思路請務必告知!!
官網下載: phantomjs-2.1.1-macosx.zip 解壓路徑:/User/xxx/phantomjs-2.1.1-macosx 添加環境變量:~/.bash_profile 文件中添加 export PATH="$PATH:/Users/xxx/phantomjs-2.1.1-macosx/bin" terminal輸入:phantomjs --version 能看到版本號即安裝成功
brew update && brew install casperjs
cnpm i resemblejs //已寫進packjson可不用安裝 brew install pkg-config cairo libpng jpeg giflib cnpm i canvas //node內運行canvas
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
慣例po做者的博客,不定時更新中——有問題歡迎在issues下交流。