ホームページ > 記事 > ウェブフロントエンド > 分度器を使用してキャンバスの描画をテストする (2)
前回の記事は、Webdriverを介してブラウザ環境でjsコードを非同期呼び出しする方法について書きました。
今日は仕事に取り掛かりましょう。
実際、executeAsyncScript を使用すると、すべての準備が整います。
コードに直接移動します:
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); }); }; }
次に、リサンブルコードと比較される2つの画像のbase64文字列をパラメータとして順番に渡します
browser.executeAsyncScript(compareImage(),resemblejs,canvasBase64,expectBase64str) .then(function(data){ console.log(data); expect(data.isSameDimensions).toBe(true);//比较大小 expect(data. misMatchPercentage).toBe(0);//断言图像差异 });
サイズと画像の違いを主張するだけです。 I これは 0 を使用します。これは、画像が完全に一致していることを意味します。
おそらく必要ではありませんが、likejs コードを注ぐ方法を説明しましょう。
fs を使用して読み込むだけです
var fs=require("fs"); var resemblejs=fs.readFileSync("jstest/e2e/00Common/resemble.js","utf-8");
次の質問は、比較する 2 つの Base64 文字列をどこで入手すればよいでしょうか?
まず、テストする文字列について説明します。これも非常に簡単です。キャンバスのみをテストするので、toDataUrl を使用します。
var getCanvasBase64 = function(){ return function(){ var canvasElement=document.getElementById('我叫canvas'); var str = canvasElement.toDataURL(); return str; }; };
今回はexecuteScriptを使用して調整します。同期なので、戻る必要があります
browser.executeScript(getCanvasBase64()).then(function(canvasBase64){ console.log(canvasBase64) })
その後、プランが引き続きfsで読み取られることを願っています
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 };
OK、すべてを結合します上記は、私たちのケースです
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);//断言图像差异
});});
上記は、分度器を使用してキャンバス描画をテストする内容です (2) 関連する内容については、PHP 中国語に注意してください。ウェブサイト (www.php.cn)!