각도기로 캔버스 그리기 테스트 (2)

이전 글에서는 webdriver를 통해 브라우저 환경에서 js 코드를 비동기적으로 호출하는 방법에 대해 작성했습니다.

오늘은 본론으로 들어가겠습니다.

실제로 ExecutionAsyncScript를 사용하면 모든 것이 준비되었습니다.

코드 직접 추가:

var compareImage=function(){
    return function(){
        eval(arguments[0]);
        var canvasBase64=arguments[1];
        var expectBase64str=arguments[2];
        var callback=arguments[ arguments.length - 1 ];

        this.resemble(canvasBase64)
            .compareTo(expectBase64str)
            .onComplete(function (data) {
                callback(data);
            });
    };
}

그런 다음 리앰블 코드와 비교할 두 이미지의 base64 문자열을 매개변수로 순차적으로 전달합니다.

browser.executeAsyncScript(compareImage(),resemblejs,canvasBase64,expectBase64str)
    .then(function(data){
        console.log(data);
        expect(data.isSameDimensions).toBe(true);//比较大小
        expect(data. misMatchPercentage).toBe(0);//断言图像差异
    });

크기와 이미지의 차이만 주장합니다. 0을 사용했는데, 이는 이미지가 완전히 일치한다는 의미입니다.
아마도 꼭 필요한 것은 아니지만,likejs 코드를 어떻게 부어넣는지 알려드릴까요?

fs를 사용하여 읽으세요

var fs=require("fs");
var resemblejs=fs.readFileSync("jstest/e2e/00Common/resemble.js","utf-8");

다음 질문은 비교를 위해 두 개의 base64 문자열을 어디서 얻을 수 있느냐는 것입니다.

먼저 테스트할 문자열에 대해 이야기해 보겠습니다. 코드를 사용하여 브라우저에서 가로채기만 하면 됩니다. toDataUrl을 사용하면 됩니다.

var getCanvasBase64 = function(){
    return function(){
        var canvasElement=document.getElementById('我叫canvas');
        var str = canvasElement.toDataURL();
        return str;
    };
};

이번에는executeScript를 사용하여 조정하는데 동기식이므로

browser.executeScript(getCanvasBase64()).then(function(canvasBase64){
    console.log(canvasBase64)    
})

를 반환하고 계획을 기대하세요. fs Read를 계속 사용하려면

var base64Encode = function(file,type) {
    var fs = require('fs');
    var bitmap = fs.readFileSync(file); 
    var str=new Buffer(bitmap).toString('base64');
    if(type!==undefined){
        str="data:"+type+";base64,"+str;
    }
    else{
        str="data:image/png;base64,"+str;
    }
    return str
};

위의 내용을 모두 결합하면 이것이 우리의 경우입니다

h

it('测一下图像一不一样', function(){
    var expectBase64str = <span style="font-family: Arial, Helvetica, sans-serif;">getBase64</span>(&#39;期望图路径.png&#39;,"image/png");
    browser.executeScript(getCanvasBase64()).then(function(canvasBase64){
        return browser.executeAsyncScript(compareImage(),reseblejs,canvasBase64,expectBase64str);
    }).then(function(data){
        console.log(data);
        <span style="font-family: Arial, Helvetica, sans-serif;">expect(data.isSameDimensions).toBe(true);//比较大小</span><pre name="code" class="html">        expect(data. misMatchPercentage).toBe(0);//断言图像差异

});}); 🎜>

위 내용은 각도기를 사용하여 캔버스 그리기를 테스트하는 내용입니다(2). 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!