分度器を使用してキャンバスの描画をテストする (1)

Protractor は、Angular ギャングによって開発された e2e テスト フレームワークであり、基本的に Webdriver を使用します。

キャンバスのテストは主に画像の比較です。検索しても、以前使用していた類似の js ライブラリを見つけることができませんでした。

resemblejs は Image と Canvas を使用するため、nodejs で直接使用することはできません。

github 上の誰かがノードに似たものを作成しましたが、C で書かれたノードキャンバスを使用していました。これをコンパイルするには、Python と vc ランタイム ライブラリをインストールする必要がありますが、星が 2 つしかないのも不思議ではありません。

slike をブラウザ内で直接実行しても問題ないでしょうか?

これには、ブラウザーのexecuteAsyncScriptメソッドを使用する必要があります。

最初にexecuteAsyncScriptについて話しましょう

この方法はブラウザ環境で実行するjsコードを置く、つまりブラウザ環境で実行するものであり、Image、Canvasなどのすべてのdomのものは使用できません。次の言葉が含まれています。

そして、実際には、同様の使用法を持つ同期のexecuteScriptがあります。

API は投稿しませんが、使用方法についてのみ話します。

executeAsyncScript メソッドは可変パラメーター メソッドです

最初のパラメーターは、ブラウザーで実行されるコードであるメソッドである必要があります。

例:

function(){
    console.log("我是一个方法");
};

その後、後で任意の数のパラメータを記述することができ、最初のパラメータメソッドで引数配列を使用してこれらのパラメータを順番に取得できます

例:

function(){

console.log("我是一个方法，我有三个参数")
    var p1=arguments[0];
    var p2=arguments[1];
    var p3=arguments[2];
};

非同期なので実行結果はコールバック関数を使って返す必要があります。このコールバック関数はWebdriverが用意しており、引数の最後のパラメータとなります。

したがって、最初のパラメーターの完全な外観は次のようになります

function(){
    console.log("我是一个方法，我有三个参数")
    var p1=arguments[0];
    var p2=arguments[1];
    var p3=arguments[2];
    var callback=arguments[arguments.lenght-1];
    callback("返回");
};

executeAsyncScript メソッドの戻り値は Promise です

したがって、呼び出されたときの関数全体は次のようになります

browser.executeAsyncScript("function(){console.log("前面写过了我就不写了")}",p1,p2,p3)

.then(function(result){
        console.log("结果是"+result);
    });

コールバックの結果then メソッド内で。

分度器を使わずにウェブドライバーのみを使用する場合も同じはずです。

さて、長々と書いても本題に至らないので、とりあえずこれくらいにして、次の記事に書きます。

上記は、分度器を使用したキャンバス描画のテスト (1) の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。