Testen Sie das Zeichnen auf Leinwand mit einem Winkelmesser (2)

Im vorherigen Artikel wurde über den asynchronen Aufruf von JS-Code in der Browserumgebung über Webdriver geschrieben.

Kommen wir heute zur Sache.

Tatsächlich ist mitexecuteAsyncScript alles einsatzbereit.

Geben Sie den Code direkt ein:

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

Übergeben Sie dann den Resamble-Code und die Base64-Strings der beiden zu vergleichenden Bilder als Parameter in der Reihenfolge Kommen Sie herein

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

und behaupten Sie einfach, dass der Unterschied in Größe und Bild 0 ist, was bedeutet, dass das Bild vollständig konsistent ist.
Obwohl es wahrscheinlich nicht notwendig ist, möchte ich Ihnen sagen, wie Sie den Likejs-Code eingeben.

Einfach mit fs einlesen

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

Die nächste Frage ist, woher bekomme ich die beiden Base64-Strings zum Vergleich?

Lassen Sie uns zunächst über die zu testende Zeichenfolge sprechen. Es ist auch sehr einfach, den Code zu verwenden, um ihn im Browser abzufangen.

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

Dieses Mal verwende ichexecuteScript, um es anzupassen, was synchron ist, also zurück

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

und dann Erwarten Sie das Bild. Verwenden Sie dann fs, um

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

zu lesen. Wenn wir alle oben genannten Punkte kombinieren, ist dies unser Fall

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);//断言图像差异

});});

Das Obige ist der Inhalt der Verwendung des Winkelmessers zum Testen des Leinwandzeichnens (2). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn). )!