💇🏼 ‼️ 🌈 Gremlins.js-Webアプリケーション用のモンキーテストライブラリ 🖐🏿 💑 🈁

これはgremlins.jsとgrunt-gremlinsを使用したテストに関する2つの記事の最初の記事です。 最初の記事は、公式のgremlins.jsドキュメントの翻訳です。 2つ目は、grunt-gremlinsを使用してgremlins.jsを実際のプロジェクトに実装した経験です。

Gremlins.jsは、Node.jsおよびブラウザ用のJavaScriptで記述された猿のテストライブラリです。その助けにより、グレムリンの群れの下でのWebアプリケーションの信頼性がチェックされます。

ケイト：彼らは何ですか、ビリー？

ビリー・ペルツァー：彼らはグレムリンです、ケイト、ミスターと同じようにファッターマンは言った。

目的

HTML5アプリケーションを開発するとき、すべての珍しいユーザーシナリオを予見しますか？メモリリークの可能性を検出して修正できますか？そうでない場合、アプリケーションは遅かれ早かれ失敗する可能性があります。ランダムなアクションでアプリケーションを実行できる場合は、ユーザーが自分で問題を発見できるようにするのではなく、テスト段階で問題について学習することをお勧めします。

Gremlins.jsは、ランダムなユーザーアクションをエミュレートします。グレムリンは、どこでも入手できる場所をクリックするか、フォームにランダムデータを入力するか、これを予期しない要素の上にマウスを移動します。彼らの目標は、JavaScriptエラーを引き起こすか、アプリケーションをクラッシュさせることです。彼らが成功しなかったなら、おめでとうございます！このアプリケーションは、実際のユーザーに見せるために十分な防弾機能を備えています。

この手法は、 MonkeyテストまたはFuzzテストとも呼ばれ、モバイル開発の世界で広く普及しています（ Android Monkeyプログラムをご覧ください）。今日、インターフェース（MV *、d3.js、Backbone.js、Angular.jsなど）およびバックエンド（Node.js）がすべてJavaScriptで開発されている場合、このテクノロジーはWebアプリケーションにも適用できます。

基本的な使用

グレムリンの大群は、アプリをシェイクする準備ができている専門のグレムリンの軍隊です。それらをunleash

て、ストレステストを開始します。

 var horde = gremlins.createHorde() horde.unleash(); //    ,    10ms, 100

Gremlins.jsは、さまざまな場所でクリックするもの、フォームにデータを入力するもの、ブラウザウィンドウをスクロールするものなど、いくつかのタイプのグレムリンを提供します。

ブラウザウィンドウでそれらの動作を観察する（背後にトレースを残す）か、コンソールでログを追跡できます。

 gremlin formFiller input 5 in <input type="number" name="age"> gremlin formFiller input pzdoyzshh0k9@o8cpskdb73nmi.r7r in <input type="email" name="email"> gremlin clicker click at 1219 301 gremlin scroller scroll to 100 25 ...

さらに、無害なモグワイがあります。 Moogaiはアプリケーションのアクティビティのみを監視し、メロンをログに書き込みます。たとえば、500msごとの「fps」Mohawkは、1秒あたりのフレーム数（FPS）を示します。

 mogwai fps 33.21 mogwai fps 59.45 mogwai fps 12.67 ...

Moogwivesは、グレムリンがアプリケーションに害を与えたと報告することがあります。たとえば、fpsが10を下回った場合、fps mohwaiはエラーをログに出力します。

 mogwai fps 12.67 mogwai fps 23.56 err > mogwai fps 7.54 < err mogwai fps 15.76 ...

10回のエラーの後、特別なGizmo

Mohvaiはリリースされたすべてのグレムリンのテストを停止します。最後に、最初の10個のエラーの後、アプリケーションをより堅牢にするために何をする必要があるかを既に知っています。

mohwasのようなグレムリンは、単純なJavaScript関数です。 gremlins.jsが必要なグレムリンを提供しない場合、ご自身で簡単に実装できます。

 //   ,    .blur()    horde.gremlin(function() { document.activeElement.blur(); });

gremlins.jsがどのように機能するかをよりよく理解するには、 examplesフォルダーをご覧ください。

gremlins.jsで任意のコンポーネントを構成できます。機能を拡張し、シナリオに適合させます。

設置

ブラウザでは、 gremlins.min.js

ファイルをサードパーティライブラリとして追加できます。その後、 gremlins

はグローバルネームスペースで使用可能になります。

 <script src="path/to/gremlins.min.js"></script> <script> gremlins.createHorde().unleash(); </script>

グローバル名前空間を詰まらせることなく、RequireJSモジュールとしてgremlins.min.jsを接続できます。

 require.config({ paths: { gremlins: 'path/to/gremlins.min' } }); require(['gremlins'], function(gremlins) { gremlins.createHorde().unleash(); });

高度な使用

テストで使用するグレムリンと墓を設定する

当初、すべてのグレムリンとモグウィはすでに連隊に追加されていました（ horde

）。

horde

オブジェクトのgremlin()

メソッドを使用して、必要なグレムリンのみを選択して追加することもできます。

 gremlins.createHorde() .gremlin(gremlins.species.formFiller()) .gremlin(gremlins.species.clicker().clickTypes(['click'])) .gremlin(gremlins.species.scroller()) .gremlin(function() { window.$ = function() {}; }) .unleash();

独自のグレムリンを標準のものに追加するには、 allGremlins()

メソッドを使用します。

 gremlins.createHorde() .allGremlins() .gremlin(function() { window.$ = function() {}; }) .unleash();

mogwaveを追加するには、 allMogwais()

およびallMogwais()

メソッドを同じ方法で使用します。

現時点では、 gremlins.js

はいくつかのグレムリンと墓を提供しています。

clickerGremlinは、ドキュメントのすべての表示領域をクリックします
formFillerGremlinは、入力にデータを入力し、セレクター、チェックボックスなどを選択することにより、フォームに入力します。
scrollerGremlinスクロールビューポート
typerGremlinはキーボードのキーを押します
alertMogwaiは、alert（）が呼び出されたときにテストのブロックを防ぎます
fpsMogwaiはブラウザで1秒あたりのフレーム数（FPS）を記録します
gizmoMogwaiは、荒れ狂うグレムリンを止めることができます

グレムリンの構成

gremlins.jsで提供されるすべてのグレムリンと墓はconfigurable functions

。つまり、メソッドのロジックを変更できます。

たとえば、クリッカーグレムリンは、直接呼び出すことができるオブジェクトを返す関数です。

 var clickerGremlin = gremlins.species.clicker(); clickerGremin(); //

Gremlin clicker

は、次のカスタマイズ方法があります。

 gremlins.species.clicker() .clickTypes(['click']) //       .canClick(function(element) { //      bar return $(element).parents('#bar').length; //  canClick  false,      //  ,  maxNbTries    }) .showAction(function(x, y) { //    clicker        //  showAction()       })

グレムリンまたはモワイにはそれぞれ独自のチューニング方法があります。それぞれのソースコードを調べることをお勧めします。

構成可能な機能の詳細については、サービスクロージャに関する記事を参照してください。

ランダムシードのサポート

攻撃を繰り返したい場合は、乱数ジェネレーターを初期化する必要があります。 Gremlins.jsはChance.jsを使用してランダムデータを生成するため、初期化できます。

 // seed the randomizer horde.seed(1234);

攻撃の前後のコード実行

テストする前に任意のコードを実行できます。通常便利です：

プロファイラーを実行する
より効果的なテストを行うには、機能をオフにします。
アプリケーションを初期化する

これを行うために、 horde

オブジェクトにはbefore()

メソッドがあり、コールバックを唯一の引数として使用します。

 horde.before(function startProfiler() { console.profile('gremlins'); });

テスト環境をクリアするために、 horde

オブジェクトにはafter()

メソッドも用意されています。

 horde.after(function stopProfiler() { console.profileEnd(); });

両方のメソッドは、非同期コールバック呼び出しをサポートします。

 horde.before(function waitFiveSeconds(done) { window.setTimeout(done, 5000); });

戦略

デフォルトでは、グレムリンは10ミリ秒のギャップで区切られたランダムな順序でアプリケーションを攻撃します。この攻撃戦略は配布と呼ばれます。 horde.strategy()

メソッドを使用して変更できます：

 horde.strategy(gremlins.strategies.distribution() .delay(50) //  50ms    .distribution([0.3, 0.3, 0.3, 0.1]) //           )

他の戦略を使用する可能性があります。ストラテジーは、3つのパラメーターを期待するコールバックです。グレムリンの配列、オブジェクト（ unleash()

結果として返される）、および最後のコールバックです。キットにはさらに2つの組み込み戦略（ allTogetherおよびbySpecies ）が含まれており、より具体的な攻撃シナリオに独自の戦略を実装することは非常に簡単です。

テストを停止

緊急の場合に攻撃を停止するには、 horde.stop()

メソッドを使用します。 Gizmo

はこのメソッドを使用して、10個のエラーが発生した後のアプリケーションへの後続の攻撃を防ぎます。攻撃を継続したくない場合にも、この方法を使用できます。

ログ変更

デフォルトでは、gremlins.jsはすべてのグレムリンと重大な観察結果をコンソールに表示します。別のログ方法を使用する場合（たとえば、gremlinsアクティビティをlocalStorageに保存し、AJAXを使用して10秒ごとに送信する）、4つのメソッド（log、info、warn、error）を持つlogger

オブジェクトをlogger()

メソッドに渡すだけです：

 var customLogger = { log: function(msg) { /* .. */ }, info: function(msg) { /* .. */ }, warn: function(msg) { /* .. */ }, error: function(msg) { /* .. */ } }; horde.logger(customLogger);

独自のロガーを作成する代わりに、 Minilogに注目してください

Gremlins.js-Webアプリケーション用のモンキーテストライブラリ

目的