Maison > Article > interface Web > 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>('期望图路径.png',"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). )!