Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-02-25 13:12:05
Original
1325 Leute haben es durchsucht

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);
            });
    };
}
Nach dem Login kopieren



Ü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);//断言图像差异
    });
Nach dem Login kopieren



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");
Nach dem Login kopieren

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;
    };
};
Nach dem Login kopieren

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

browser.executeScript(getCanvasBase64()).then(function(canvasBase64){
    console.log(canvasBase64)    
})
Nach dem Login kopieren


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
};
Nach dem Login kopieren

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

});});

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


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage