How to achieve pixel contrast using casperjs and resemble.js (detailed tutorial)

This article mainly introduces you to the relevant information about implementing a pixel comparison service based on casperjs and resemble.js. The article introduces it in detail through the example code. It has certain reference learning value for everyone's study or work. It needs Friends, let’s study together.

Preface

This time I share a node service that provides pixel comparison between the design draft and the front-end page, aiming to provide testing or front-end personnel themselves Complete an ancillary test. Believe me, under the comparison at the pixel level, the degree of restoration of the design draft on the web page will immediately become apparent. Not much to say below, let’s take a look at the detailed introduction.

Effect preview

##Pre-knowledge

The following two libraries are used as auxiliary tools this time:

• casperjs: written based on PhantomJS. It provides an interfaceless browser internally. Simply put, you can use it to complete the operation of simulating a human to operate the browser in the form of code, which involves various mouse events and many other functions. This time it is mainly used. It comes with a screenshot function.

• resemble.js: Image pixel comparison tool. The simple understanding of the calling method is that two images are passed in and a composite image is returned with comparison parameters such as difference and so on. The basic implementation idea can be understood as converting the image to canvas, obtaining its image pixels, and then comparing each pixel.

So we should already have a big idea for the entire service, which is to use casperjs to enter a website to intercept a page, and then compare it with the design drawing to get the result.

the whole idea

From the picture above, we should be able to sort out a rough process:

• Receive the design draft image and the website address and node information that need to be intercepted from the front-end page

• Save the design draft to the images folder

• Open the sub-process, start casperjs, and complete the interception of the target website

• After intercepting, request form.html to fill in the image address information and re-transmit it back to the server

• The server obtains the image information and compares the intercepted image with the design draft through resemblejs

• The results are sent back to the front-end page

There is a problem that some people may notice: why can’t the information be directly copied to the screenshot of the target website in casperjs? Pass it back to the server, but choose to open a form page to submit information through the form?

Answer: First of all, I don’t know much about casperjs and node. What I understand is that first of all, casperjs is not a node module. It runs in the operating system. I have not yet found out how to create a link with casperjs in casperjs. If there is a way to communicate with the node service, please tell me, because I really don’t know much about casper! Secondly, since communication cannot be established, I can only resort to the next best thing, quickly open a form page I wrote through casper and fill in the image information and send it back to the server. This can complete the initial request. So there is the above operation from.html.

Implementation details

Implementing a simple static server

Because it involves the return of index.html and form.html pages , so we need to implement a super simple static server. The code is as follows:

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)
    }
   })
  }
 })
}

Parse the form and store the image in the images folder

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))
   ...
  } 
 })

Read out the file content by creating a readable stream, and then write it to the specified path through pipe to save and upload it. Pictures to come.

Run casperjs

const { spawn } = require('child_process')
spawn('casperjs', ['casper.js', filename, captureUrl, selector, id])
casperjs.stdout.on('data', (data) => {
 ...
})

You can create a child process to start casperjs through spawn, and you can also use exec, etc.

Screenshot and submit the data to 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('正在截图请稍后')
  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()

The code is relatively simple. The main process is to open a page and then pass in your operation in then. Finally execute run. During this process, I didn't quite know how to communicate with the node service, so I chose to open another page. . If you want to study in depth, you can check out the official website of casperjs which is very detailed!

Perform pixel comparison and return data through resemble.js

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（osx）

官网下载： 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

能看到版本号即安装成功

安装casperjs

brew update && brew install casperjs

安装resemble.js

cnpm i resemblejs //已写进packjson可不用安装
brew install pkg-config cairo libpng jpeg giflib
cnpm i canvas //node内运行canvas

node服务

git clone https://github.com/Aaaaaaaty/gui-auto-test.git
cd gui-auto-test
cnpm i
cd pxdiff
nodemon server.js

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

如何使用vue-cli编写vue插件

在vue-cli下使用vuex（详细教程）

Bootstrap4中定制自己的颜色和风格如何解决？

The above is the detailed content of How to achieve pixel contrast using casperjs and resemble.js (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!