casperjs 및 like.js를 사용하여 픽셀 대비를 달성하는 방법(자세한 튜토리얼)

이 글에서는 주로 casperjs와like.js를 기반으로 한 픽셀 비교 서비스 구현에 대한 관련 정보를 샘플 코드를 통해 자세히 소개합니다. 이는 공부나 업무에 필요한 모든 사람에게 확실한 참고 학습 가치를 제공합니다. 같이 공부하자.

머리말

이번에는 테스트 담당자나 프런트엔드 직원이 직접 보조 테스트를 완료하는 것을 목표로 디자인 초안과 프런트엔드 페이지 간의 픽셀 비교를 제공하는 노드 서비스를 공유합니다. 저를 믿으십시오. 픽셀 수준의 비교를 통해 웹 페이지의 디자인 초안이 복원된 정도는 즉시 명백해집니다. 아래에서는 할 말이 많지 않으니, 자세한 소개를 살펴보겠습니다.

효과 미리보기

Pre-knowledge

이번에는 보조 도구로 다음 두 라이브러리를 사용합니다.

• casperjs: PhantomJS를 기반으로 작성되었습니다. 내부적으로는 인터페이스가 없는 브라우저를 제공하는데, 간단히 말해서 다양한 마우스 이벤트와 기타 여러 기능이 포함된 브라우저를 코드 형태로 시뮬레이션하는 작업을 완료하는 데 사용할 수 있습니다. 스크린샷 기능이 제공됩니다.

• resemble.js: 이미지 픽셀 비교 도구. 호출 방법을 간단히 이해하면 두 개의 이미지가 전달되고 차이 등의 비교 매개변수와 함께 합성 이미지가 반환된다는 것입니다. 기본 구현 아이디어는 이미지를 캔버스로 변환하고 이미지 픽셀을 얻은 다음 각 픽셀을 비교하는 것으로 이해될 수 있습니다.

그래서 우리는 이미 전체 서비스에 대한 큰 아이디어를 가지고 있어야 합니다. 즉, casperjs를 사용하여 웹 사이트에 들어가 특정 페이지를 가로채고 이를 디자인 도면과 비교하여 결과를 얻는 것입니다.

전체 아이디어

위 사진을 통해 대략적인 과정을 정리할 수 있을 것 같습니다.

• 디자인 도안 사진과 필요한 홈페이지 주소를 받아보세요 노드 정보

• 디자인 초안을 이미지 폴더에 저장

• 하위 프로세스를 열고 casperjs를 시작한 후 대상 웹 사이트 차단을 완료합니다

• 차단 후 , form.html에 이미지 주소 정보를 입력하고 재전송하도록 요청합니다. 서버로 돌아갑니다

• 서버는 사진 정보를 얻은 후 Likejs를 통해 스크린샷과 디자인 초안을 비교합니다

• 결과가 다시 전송됩니다. to to the front-end page

일부 사람들이 알아차릴 수 있는 문제가 있습니다: 왜 casperjs에서는 대상 웹사이트의 스크린샷을 찍은 후 정보를 서버로 직접 전송할 수 없는지 대신에 양식 페이지를 통해 정보를 제출하려면 어떻게 해야 합니까?

A: 우선 저는 casperjs와 node에 대해 잘 모릅니다. 우선 casperjs는 운영 체제에서 실행되는 노드 모듈이 아니라는 점입니다. casperjs에서 노드 서비스와 통신을 설정합니다. 방법이 있으면 알려주시기 바랍니다. 왜냐하면 저는 캐스퍼에 대해 잘 모르기 때문입니다! 둘째, 통신이 이루어지지 않기 때문에 차선책으로 캐스퍼를 통해 작성한 양식 페이지를 빠르게 열고 이미지 정보를 입력한 후 서버로 다시 전송하면 초기 요청이 완료됩니다. 따라서 .html에서 위의 작업이 있습니다.

구현 내용

간단한 정적 서버 구현

index.html 및 form.html 페이지를 반환해야 하기 때문에 초간단 정적 서버 구현이 필요합니다. 코드는 다음과 같습니다.

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

읽을 수 있는 스트림을 생성하여 파일 내용을 읽은 다음 파이프를 통해 지정된 경로에 작성하여 업로드된 이미지를 저장합니다.

Run casperjs

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

spawn을 통해 casperjs를 시작하는 하위 프로세스를 만들 수 있고 exec 등을 사용할 수도 있습니다.

스크린샷을 찍어 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()

코드는 비교적 간단합니다. 주요 프로세스는 페이지를 연 다음 작업을 전달하고 마지막으로 실행을 실행하는 것입니다. 이 과정에서 노드 서비스와 통신하는 방법을 잘 몰라서 다른 페이지를 열기로 했습니다. . 더 깊이 있게 공부하고 싶다면 casperjs 공식 웹사이트를 방문해보세요. 매우 자세하게 설명되어 있습니다!

like.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中定制自己的颜色和风格如何解决？

위 내용은 casperjs 및 like.js를 사용하여 픽셀 대비를 달성하는 방법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!