カオスとグレムリン：Web UIテスト

ウェブ開発の世界には未定のルールがあります。ユーザーの行動を予測することはほとんど不可能です。 これは、誰かが新しいWebサイトまたはWebアプリケーションで作業を開始するのを見た人なら誰でも確認できます。 たとえば、そのようなものを見た回数さえ覚えていません。 たとえば、人々は単に携帯電話でブラウザを使用する方法を単に忘れていると考えられることがあります。 時々彼らの行動は非常に非論理的であるため、実際のウェブサイトで働いている実在の人物ではないように見えますが、不条理な演劇のジャンルでの演劇です。 。







ここでのポイントは、開発者がプロ​​グラムで作業しているときに、ユーザーの行動をいつでも正確に予測できないことです。 人が何かに非常に興奮しているとしましょう。その結果、彼は何かをあまりにも早くしようとします。 彼がフィールドにデータを入力し、ボタンをクリックする方法は、冷静で集中的な行動とはまったく異なります。 残念ながら、ソフトウェア製品を設計および開発する場合、そのような「完璧なオプション」によって正確に導かれることが多く、「理想」から遠く離れた他のケースで何が起こるかについて考えていません。



開発者は、ユーザーが内部ロジックを理解することを期待して、ソフトウェアシステムの作成に努めています。 彼らは、ユーザーを合理的であると見なします。たとえば、電話画面上のすべてにランダムに触れると、非常に予測不可能な何かにつながる可能性があることを知っています。 ちなみに、奇妙なことは、完全に普通の人が偶然に、おそらくコンピューターの画面や電話を見なくても、何かをクリックしたり、何かに触れたりしても可能です。 たとえば、外出中に電話で話している間、ツイートやメールに同時に答えようとしたことを自分で何回行ったか思い出せますか？



予測不可能なイベントに対するコンピューターシステムの反応を調査できるツールは昨日登場しませんでしたが、歴史を深く掘り下げることはしません。 2012年にNetflixが内部サービスChaos Monkeyのコードを開いたときのWeb開発者に近い例を考えてみましょう。 このシステムは、「実稼働環境内で実行される仮想マシンとコンテナーをシャットダウンします。」 通常の言語では、Chaos Monkeyはサーバーをランダムに切断して、そのような場合のシステムの動作を調べ、複数のマシンの障害の結果としてサービス全体がクラッシュしないようにします。



アプリケーションを設計するとき、「理想的なオプション」のためにそれらを準備するだけに制限すべきではないことは誰もが知っています。 しかし、この問題をWebインターフェースの開発面に変換すると、かなり合理的な疑問が生じます。「プログラムの仮想ユーザーの予測不可能な弱点と破壊的な一連の行動を見つける方法は？ サーバーで同様のことが行われた場合、インターフェイスで同じことを行うことは可能ですか？」



この質問に答える前に、無限の猿に関する定理を思い出します。「タイプライターのキーを絶対にランダムに押すことにより、仮想の猿は遅かれ早かれシェークスピアの劇のいずれかを印刷します。」 もしそうなら、それが何であれ、たった1匹の猿がウェブインターフェースでバグや問題を見つけることができます。

スタジオのサル！

「モンキーテスト」（サルテスト）、または「カオステスト」とも呼ばれる、システムを使用するための実際のシナリオとはまったく関係のないランダムなユーザーアクションのシミュレーションに基づいてソフトウェア製品をテストする方法論です。



ウェブサイトのモバイルバージョンのテストについて話す場合、フィールドへのボタンのランダムタッチ、タッチスクリーン上のさまざまなジェスチャーがあります。 このようなテストの目的は、アプリケーションの問題を見つけるか、パフォーマンスを完全に破壊することです。 これは、特定のシーケンスで特定の条件下で発生する一連のアクションを含むテストスクリプトを記述する通常の単体テストや受け入れテストとはまったく異なります。 その結果、たとえばインターフェースの領域でのこのようなテストは、開発者が正しい操作をどのように見ているかに強く依存します。



プログラマーは、モンキーテストの実行方法をあまり制御できません。また、モンキーテストを実行するたびにアプリケーションが新しいランダムなテストセットに公開されるため、テストは1つのシナリオに限定されず、ユーザーとプログラムの相互作用の予測不可能なシナリオの無限のセットを表します。



このタイプのテストは、さまざまなアプリケーションを実行するほとんどのプラットフォームで利用できますが、猿のテストがWeb環境で広まったとは言えません。 たとえば、Android SDKには組み込みのUI Exerciser Monkeyツールがあり、ほとんどのインターフェイスイベントとシステムイベントを使用してアプリケーションをテストできます。 Androidを見ると、このような標準機能を、たとえば人気のあるブラウザーの「開発者ツール」セクションで見つけたいと思うのは当然ですが、まだ「猿」はありません。 この状況はMarmelabチームによって修正され、WebインターフェイスGremlins.jsのランダムテスト用のJavaScriptライブラリが作成されました。

グレムリンが来ます！

すべては、 Gremlins.jsを開発するときに、ライブラリの作成者が2つのコメディホラー映画 Joe Danteに触発されたことを示しています。 ライブラリ内の「グレムリン」は、設計が不十分なページで地獄の混乱を引き起こす可能性がある関数です。 図書館の「墓」は平和的な存在であり、その主な仕事は、何が起こっているのかを観察し、見たものを報告し、試験プロセスを支援することです。 ギズモもあります。 ライブラリでは、テストセッションを停止するメカニズムの役割を果たします。



標準のランダムテスト手順を実行してライブラリを使用するには、数行のコードまたはマウスを数回クリックするだけで十分です。 同時に、必要に応じて、テストを非常に細かく調整できます。 開始するには、次の3つの方法のいずれかを選択できます。Gremlins.jsをスタンドアロンライブラリとしてページに接続する、Require.jsモジュールとして接続する、ブックマークレットから開始する。 これらの方法を検討してください。

▍自律ライブラリ

テスト環境を作成する最も簡単な方法は、体験したいWebページにライブラリを直接含めることです。 このアプローチのおかげで、 gremlins



はグローバル名前空間にgremlins



れ、ライブラリはどこからでも呼び出すことができます。 次のようになります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

▍モジュールRequire.js

プロジェクトでRequire.jsを使用している場合、Gremlins.jsをグローバルな名前空間に影響を与えることなく適切な場所にインポートできます。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

bookmarkブックマークレットの使用

ライブラリをプロジェクトに統合したくない場合は、ときどきテストのパスを選択します。ブックマークレットを使用すると、ブラウザーで開いているページを体験できます。 公式ドキュメントからのリンクは、ブックマークレットをブックマークバーに追加できる場所です。

実験

ライブラリを使用するオプションを選択した場合は、ページに含めるか、Require.jsを使用してインポートすることができます。コードでグレムリンの実験を開始できます。 この例では、gremlins.createHorde（）。Unleash（）の呼び出しを示しています。 何が起こるかを考えてみましょう。

 gremlins                 // , ! .createHorde()   //      .unleash();          //     .
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Gremlins.jsは、「gremlins」の5つの「品種」（ライブラリー用語の種）-ユーザーがページと対話するためのさまざまなオプションを実装する関数を提供します。 デフォルト設定の標準「群れ」（大群）には、5種類すべてが含まれます。 つまり、これらは次のとおりです。

•  formFillerGremlin
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  -入力フィールドにデータを入力し、フラグとラジオボタンをクリックして、他の標準フォーム要素とやり取りします。
  
  
  
  

•  clickerGremlin
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  -ドキュメントの表示領域のどこでもマウスクリックを模倣します。
  
  
  
  

•  toucherGremlin
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  -タッチスクリーンのタッチをシミュレートします。
  
  
  
  

•  scrollerGremlin
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  -ドキュメントをスクロールします。
  
  
  
  

•  typerGremlin
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  -仮想キーボードからランダムにデータを入力します。

ページ上でさまざまなアクションを実行するグ​​レムリンと呼ばれ、画面上に目に見える痕跡を残します。 さらに、それらのアクションは、特定の種類のグレムリンに関連する追加データとともに、ブラウザーのJavaScriptコンソールに記録されます。 これらのエントリは次のようになります。

 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
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デフォルトでは、グレムリンは10ミリ秒の間隔で1000回ランダムに呼び出されます。



既に述べたように、Gremlins.jsにはグレムリンだけでなく、グレムリンがあります。グレムリンは、不良ページを細かく引き裂くことができます。 平和な墓もあります。

•  alertMogwai
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  -alert（）呼び出しによるテストのブロックを防ぎます。
  
  
  
  

•  fpsMogwai
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  -ブラウザが発行する1秒あたりのフレーム数を報告します。
  
  
  
  

•  gizmoMogwai
        
        
  
          
          
          
        
  
      
          
          
          
        
        
  
          
          
          
        
  
      
       

  
  
  -テストを停止します。

たとえば、FPSが10を下回ると、フレームレートを監視しているモーファがエラーを報告する場合があります。次のようになります。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

何が起こっているかを記録し、グレムリンを視覚化することにより、テスト結果を分析し、必要に応じてエラーを修正するための対策を講じることができます。



実際、設定がなくても、Gremlins.jsは非常にまともな一連のテストを実装しています。

高度な実験

標準構成でテストを使用した後、目的を達成できなかった場合、テストを構成するのに十分な数の方法があります。 たとえば、おそらく、各テストセッションで、ページ全体を常にテストするのではなく、ページの特定のコンポーネントのみに努力を集中させたいと思うでしょう。



すべてのタイプのグレムリンをカスタマイズすることはできませんが、 toucherGremlin



、 clickerGremlin



およびformFillerGremlin



ページの特定の領域のみに制限できます。 特に、設定時に、ターゲットにする要素の親を見るためのグレムリンを提供します。 この要素が関心のあるオブジェクトのリストに含まれている場合、グレムリンはビジネスを開始します。 そうでなければ、彼は相互作用する要素を見つけようとします。 maxXbTries



パラメーターを設定することにより、適切な要素を見つけるための最大試行回数を設定することもできます。

 gremlins.species.clicker().canClick(function(element) {   return $(element).parents('.my-component').length;   /**   ,        ,    ?   –  true     .   –     ,  false.   **/ }).maxNbTries(5); //    5     //     toucherGremlin  formFillerGremlin gremlins.species.formFiller.canFillElement(/**   **/); gremlins.species.toucher.canTouch(/**   **/);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グレムリンの選択

ライブラリの標準機能が不足している場合、特に既存のグレムリンに満足できない場合、これは簡単に修正できます。 独自のグレムリンを持ち出し、プロジェクトのユーザーに期待するすべてを実行するように教えることができます。



たとえば、誰かがその要素を操作しているときに、いつでもランダムにフォームを送信しようとするとどうなるかを確認する必要があります。 いつかclickerGremlin



が送信ボタンをクリックすることを期待できますが、最良の方法は、フォームの送信専用のグレムリンを作成することです。 これにより、この操作を実行する可能性が高まり、実行方法を制御できます。



新しい種類のグレムリンを開発するには、JavaScriptでDOMイベントを作成および構成する方法を少し理解する必要があります。 それでは、フォームを送信するグレムリンを作成するプロセスを見てみましょう。

 gremlins.createHorde() //    .allGremlins()      //    .gremlin(function() {   //    ,       var targetElement, availableForms;   availableForms = document.querySelectorAll('form'); //         targetElement = availableForms[Math.floor(Math.random()*availableForms.length)]; //           //        var evt = document.createEvent('HTMLEvents');  //      evt.initEvent('submit');  //        targetElement.dispatchEvent(evt);  //         //  ,     ,          console.log('gremlin submit ', targetElement); }) .unleash();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

カスタムイベントの作成の詳細については、Mozillaのドキュメントをご覧ください。 さらに、ライブラリ内でイベントがどのように作成されるかを理解するには、ライブラリのソースコードを調べる価値があります。 たとえば、 clickerGremlinで開始できます。



実際、このライブラリは、新しいタイプのグレムリンを作成するよりも多くのカスタマイズおよび拡張方法をサポートしています。 たとえば、新しい墓の追加、テストスクリプトの選択、テストの前後のコードの実行などです。 最後に、さらに必要に応じて、Gremlins.jsに基づいて独自のプロジェクトを作成できます。これは、インターフェイスをテストするためのJSライブラリを表示する方法とまったく同じです。

非ランダムテストケースの選択

ランダムに選択されたテストスクリプト、各テストの実行後に表示される新しいグレムリンの群れ、およびページをランダムにテストすることは、バグを見つけるのに最適な方法です。 ただし、エラーが見つかり、それを解決するために作業した場合、どうすればそれが本当に修正されたことを確認できますか？ このような状況では、それを引き起こしたテストを繰り返し、システムの新しい反応を見つける方法があると便利です。 そのような場合のために、同じテストシナリオを数回繰り返す必要がある場合、乱数ジェネレーターの初期化のバリエーションがあり、それに基づいてパックの動作がモデル化されます。 これは、 seed()



関数を使用して行われます。

 var horde = gremlins.createHorde(); horde.seed(1234); horde.unleash();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、Gremlins.jsを使用して実装されたモンキーテストの主な価値は、その予測不能性であることに注意したいと思います。 したがって、同じシナリオを繰り返すことは有用ですが、そのようなテストのみを使用すると、混chaとしたテストの意味が疑問視されます。

結論

ユーザーについての仮定を立てることは、Webプロジェクトの設計と開発に基づいて、信じられないほどの数の特別なケースを考慮することを拒否することを意味します。 ユーザーは、最新のデバイスではなく、低速の通信チャネルを持つことができますが、特定の人が何であり、どのようになり得るかは決してわかりません。 好奇心five盛な5歳くらいの子供が親の携帯電話に届かず、タッチスクリーン上のすべてを熱心に突っついたりしないことを保証することは不可能です。 これがもたらすことは大きな疑問です。 マーケティング部門の誰かが新しいサイトを最初に見たときにあまり喜んでいないことを事前に知ることはできません。 順序も速度も再現性も予測できません。 開発者として、ユーザーが正しい動作の厳密に定義されたモデルを期待しているという理由だけで、理由もなくサービスがクラッシュしないように、ユーザーがそれを可能にする義務があります。



クライアント側のモンキーテストツールは小さいですが、Gremlins.js開発者はその要点を把握することができました。 そして、私たち一人一人がこのライブラリの改善に貢献できます。 Gremlins.jsの作成者のチームは、どんな助けも喜んでします。 グレムリンとモーワが他に何ができるかについて何か考えがあれば教えてください。