Maison > interface Web > Tutoriel H5 > Test de dessin sur toile avec rapporteur (2)

Test de dessin sur toile avec rapporteur (2)

黄舟
Libérer: 2017-02-25 13:12:05
original
1390 Les gens l'ont consulté

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);
            });
    };
}
Copier après la connexion



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);//断言图像差异
    });
Copier après la connexion



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");
Copier après la connexion

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;
    };
};
Copier après la connexion

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

browser.executeScript(getCanvasBase64()).then(function(canvasBase64){
    console.log(canvasBase64)    
})
Copier après la connexion


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
};
Copier après la connexion

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);//断言图像差异
Copier après la connexion

});});

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


Étiquettes associées:
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal