Test de dessin sur toile avec rapporteur (2)

L'article précédent parlait de l'appel asynchrone du code js dans l'environnement du navigateur via webdriver.

Passons aux choses sérieuses aujourd’hui.

En fait, avecexecuteAsyncScript, tout est prêt à fonctionner.

Entrez directement le code :

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

Passez ensuite le code de resamble et les chaînes base64 des deux images à comparer en paramètres . Entrez

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

et affirmez simplement la différence de taille et d'image. J'ai utilisé 0, ce qui signifie que l'image est tout à fait cohérente.
Bien que ce ne soit probablement pas nécessaire, laissez-moi vous dire comment verser le code similarjs ?

Lisez-le simplement avec fs

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

La question suivante est : où puis-je obtenir les deux chaînes base64 à des fins de comparaison ?

Parlons d'abord de la chaîne à tester. C'est également très simple. Utilisez le code pour l'intercepter dans le navigateur. Puisque nous testons uniquement le canevas, nous pouvons simplement utiliser toDataUrl.

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

Cette fois, j'utiliseexecuteScript pour l'ajuster, qui est synchrone, donc retournez

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

puis attendez l'image Ensuite, utilisez fs pour lire

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

Eh bien, en combinant tout ce qui précède, c'est notre cas

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

});});

Ce qui précède est le contenu de l'utilisation du rapporteur pour tester le dessin sur toile (2). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn). )!