最新のWebアプリケーションの機能テスト

最近のWebアプリケーションには、多くの可動部分とサードパーティの依存関係が含まれていることがよくあります。 そのようなアプリケーションの機能をリファクタリングおよび追加/変更する過程で、既存のユースケーススクリプトの内訳や特定のブラウザーでの不安定な動作が発生する場合があります。

このような状況をタイムリーに検出し、継続的な統合を実装するには、Webアプリケーションの機能テストが必要です。 この記事では、2つの無料のオープンソースソリューションについて説明します。

• https://devexpress.github.io/testcafe/
• http://nightwatchjs.org/
  
  

検討されたソリューションは、一見したところ同様の多くの可能性を提供します。

• テストの順次および並列実行とそれらのグループ化、GulpおよびMochaとの統合による自動機能テスト。
• ほとんどのデスクトップおよびモバイルブラウザーのサポート。 実際のDOM APIとの対話（Webアプリケーションは、通常のタブの開いているブラウザーウィンドウで開きます-テストは可能な限り実際に近いものです）。
• ページ要素セレクターの広範なサポート：document.querySelector、CSSセレクター、さらにはXPath。 これらのオプションを組み合わせることにより、マークアップを変更するときに機能テストの機能を維持できます。
• ブラウザのDOMモデルの準備が整うのを自動的に待機し、視覚的な対話コマンドを同期的に発行します（ボタンをクリックして、テキストフィールドを入力します）。 クライアントJSコードおよびネットワークAJAXアクティビティを待機するための便利なツール。
• iframeのサポート-DOMWindowの現在のコンテキストを選択することにより-テスト用のウィンドウと、その中のコマンドを実行し、いつでも切り替えることができます。
• 拡張の機会-どちらのソリューションも、カスタムブラウザーのサポートを追加し、新しいコマンドの追加など、独自の機能を拡張する機会を提供します。

機能テストの例

テストの例としては、node.jsにサーバーがあり、React + ReduxにクライアントSPAページがあるTodoMVC形式のWebアプリケーションがあります。 テスト条件を実際の条件に近づけるために、ランダムな遅延がすべてのreduxアクションに追加され、バックエンドとのネットワーク相互作用をエミュレートします（ これは基礎として採用されます）。

将来、テストWebアプリケーションはhttp：// localhost：4000 /で実行されると想定されます 。 機能テストは簡単で、todo要素の追加、その内容の編集、完了/失敗したタスクとしてのマーク付け、および削除が含まれます。

両方のフレームワークでテストを記述する言語はJS（TestCafeとNightwatchの場合はそれぞれES2016とES5）ですが、これはあらゆる言語で書かれたWebアプリケーションに最適です。 JSで長い間開発していない場合は、最新のエディションが古いES3から大きく離れていることを考慮する必要があり、コード、オブジェクト指向および関数型プログラミングなどを書くための便利な手段が含まれています。

TestCafeは、1つのnpm install -g testcafe



されます。 必要な依存関係をダウンロードしてインストールした後、対応するディレクトリのコマンドtestcafe <browser-name> <tests-directory>/



によってテストが実行されます。

上記のユースケーススクリプトをチェックする機能テストのソースコードは次のとおりです。

 import { expect } from 'chai'; import { Selector } from 'testcafe'; const MAX_TIME_AJAX_WAIT = 2500; // 2.5 seconds by default const querySelector = Selector((val) => document.querySelector(val), { timeout: MAX_TIME_AJAX_WAIT }); const querySelectorCondition = Selector((val, checkFunc) => { const foundElems = document.querySelectorAll(val); if(!foundElems) return null; for(let i=0; i < foundElems.length; i++) { if(checkFunc(foundElems[i])) return foundElems[i]; } return null; }, { timeout: MAX_TIME_AJAX_WAIT }); fixture `Example page` .page `http://localhost:4000/`; test('Emulate user actions and perform a verification', async t => { await t.setNativeDialogHandler(() => true); const inputNewTodo = await querySelector('header.header input.new-todo'); await t.typeText(inputNewTodo, 'New TODO element\r\n'); const addedTodoElement = await querySelectorCondition( 'section.main label', (elm) => (elm.innerText === 'New TODO element') ); await t.doubleClick(addedTodoElement); const addedTodoEditInput = await querySelectorCondition( 'section.main input[type=text]', (elm) => (elm.value === 'New TODO element') ); await t.typeText(addedTodoEditInput, ' changed\r\n'); const addedTodoCheckboxAC = await querySelectorCondition( 'section.main input[type=checkbox]:not([checked])', (elm) => (elm.nextSibling.innerText === 'New TODO element changed') ); await t.click(addedTodoCheckboxAC); const addedTodoCheckboxBC = await querySelectorCondition( 'section.main input[type=checkbox]', (elm) => (elm.nextSibling.innerText === 'New TODO element changed') ); await t.click(addedTodoCheckboxBC); const addedTodoDelBtn = await querySelectorCondition( 'button.destroy', (elm) => (elm.previousSibling.innerText === 'New TODO element changed') ); await t.click(addedTodoDelBtn); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テストされたWebページのアドレスはフィクスチャ部分で決定され、その後に機能テストが続きます。各テストの終了時に、Webページは元の状態に自動的に復元されます。 ページ上のDOM要素を検索するには、testcafe固有のセレクターが使用されます。これは、おそらく引数を使用して、DOMモデルを照会する関数のラッパーとして使用されます。

この例では、最初のセレクターはdocument.querySelectorのラッパーを表し、2番目のセレクターはリストから目的のアイテムを選択するのに役立つコールバック関数を持つdocument.querySelectorAllのラッパーを表します。 Selectorラッパーはオプションを受け入れます。特に、指定された特性を持つ要素がDOMモデルに表示されるまでtestcafeが待機する最大時間を設定します。

機能テスト自体は、セレクターへの非同期呼び出しのセットであり、テストコントローラー間でインスタンス化された変数tを使用してアクションが実行されます。 ほとんどのメソッドの目的は名前（クリック、typeTextなど）から明らかであり、 t.setNativeDialogHandler



使用して、テストを「ハングアップ」する可能性があるアラートのようなウィンドウの生成を防ぎます。これは非常に便利です。

Nightwatchのインストールは、シンプルなコマンドnpm install -g nightwatch



でも開始されますが、機能テストを実行するには、Selenuimサーバー（ ここからダウンロードできます。JavaSEランタイムをコンピューターにインストールする必要があります）および実行する各ブラウザーのWebドライバーが必要ですテスト。

テストを実行するには、最初にテストの場所、selenium-serverおよびwebdriverのパスと設定を記述するnightwatch.json構成ファイルを作成し、次に現在のディレクトリで単純なnightwatch



コマンドを使用する必要があります。

Microsoft Web Driver（Edge）を使用している場合、nightwatch.jsonは次のようになります。

 { "src_folders" : ["nightwatch-tests"], "output_folder" : "reports", "custom_commands_path" : "", "custom_assertions_path" : "", "page_objects_path" : "", "globals_path" : "", "selenium" : { "start_process" : true, "server_path" : "nightwatch-bin/selenium-server-standalone-3.0.1.jar", "log_path" : "", "port" : 4444, "cli_args" : { "webdriver.edge.driver" : "nightwatch-bin/MicrosoftWebDriver.exe" } }, "test_settings" : { "default" : { "selenium_port" : 4444, "selenium_host" : "localhost", "desiredCapabilities": { "browserName": "MicrosoftEdge", "acceptSslCerts": true } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

上記で説明した同様のユースケーススクリプトをチェックする機能テストのソースコードは、次のようになります。

 module.exports = { 'Demo test' : function (client) { client.url('http://localhost:4000/') .waitForElementVisible('body', 1000) // May use CSS selectors for element search .waitForElementVisible('header.header input.new-todo', 1000) .setValue('header.header input.new-todo', ['New TODO element', client.Keys.ENTER]) // Or use Xpath - it's more powerful tool .useXpath() .waitForElementVisible('//section[@class=\'main\']//label[text()=\'New TODO element\']', 2000) .execute(function() { // For dispatch double click - Nightwatch doesn't support it by default var evt = new MouseEvent('dblclick', {'view': window, 'bubbles': true,'cancelable': true}); var foundElems = document.querySelectorAll('section.main label'); if(!foundElems) return; var elm = null; for(var i=0; i < foundElems.length; i++) { if(foundElems[i].innerText === 'New TODO element') { elm = foundElems[i]; break; } } elm.dispatchEvent(evt); }) .waitForElementVisible('//section[@class=\'main\']//input[@type=\'text\']', 2000) .clearValue('//section[@class=\'main\']//input[@type=\'text\']') .setValue('//section[@class=\'main\']//input[@type=\'text\']', ['New TODO element changed', client.Keys.ENTER] ) .waitForElementVisible( '//section[@class=\'main\']//label[text()=\'New TODO element changed\']' + '/preceding-sibling::input[@type=\'checkbox\' and not(@checked)]', 2000 ) .click( '//section[@class=\'main\']//label[text()=\'New TODO element changed\']' + '/preceding-sibling::input[@type=\'checkbox\' and not(@checked)]' ) .waitForElementVisible( '//section[@class=\'main\']//label[text()=\'New TODO element changed\']' + '/preceding-sibling::input[@type=\'checkbox\']', 2000 ) .click( '//section[@class=\'main\']//label[text()=\'New TODO element changed\']' + '/preceding-sibling::input[@type=\'checkbox\']' ) .waitForElementVisible( '//section[@class=\'main\']//label[text()=\'New TODO element changed\']' + '/following-sibling::button[@class=\'destroy\']', 2000 ) .click( '//section[@class=\'main\']//label[text()=\'New TODO element changed\']' + '/following-sibling::button[@class=\'destroy\']' ) .waitForElementNotPresent( '//section[@class=\'main\']//label[text()=\'New TODO element changed\']', 2000 ) .pause(2000) .end(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コードの機能の中でも、ナイトウォッチは要素のダブルクリックエミュレーションをサポートしていないことに気付くのは簡単です-代わりに、ターゲットコントロールでdispatchEventを実行するクライアントで注入関数を使用して回避策を実装する必要があります。

Nightwatchの便利な機能は、XPathのサポートです。これは、CSSセレクターと比較してDOMモデルの要素を選択するための非常に広い可能性を提供します。

TestCafeとNightwatch機能の比較

インストール ：

[T] estCafe ： npm install -g testcafe



1回npm install -g testcafe



で、Webプロジェクトの現在のディレクトリでテストの作成と実行をすぐに開始できます

[N] ightwatch ：npmモジュールのインストールは簡単ですがnpm install -g nightwatch



、selenium-standalone-serverの手動ダウンロード、関心のあるすべてのブラウザー用のWebドライバー、構成ファイルの手動作成（またはJavaをダウンロードしない場合もあります）インストール済み）

DOM要素の選択 ：

T ：セレクターのメカニズムが使用されます-1つまたは複数のDOMノードを選択するクライアントJS関数のラッパー。 これにより、 document.querySelector



またはdocument.getElementById



単純なラッパーから、DOM要素を通過するための任意のロジックで終わるまで、ほぼ無制限の選択が可能になります。 同時に、TestCafeは、指定された時間内に指定されたセレクターに従って、要素の有無を個別に検証します。

N ：CSSセレクターまたはXPathの選択肢が提供されます-原則として、ページ上の要素を選択するほとんどのタスクを解決するには2番目のオプションで十分ですが、これは複雑な任意の検索ロジックを設定する機能とは比較できません。

テストライティング言語 ：

T ：ES2016で、すぐにテストを直接記述できます。これにより、Webアプリケーション自体と同じ言語でシンプルで読みやすいテストコードを記述できます。また、テストプロジェクトから特定のモジュールをインポートする必要がある場合にも便利です。

N ：機能テストのソースコードで廃止されたES5構文とexports-constructions（ES6を固定する機会はまだありますが、松葉杖で）

非同期操作のサポート ：

T ：すべてのAPI関数はPromiseに基づいています。これにより、テストの任意の非同期ロジックを記述し、同時にnode.jsから独自の関数を統合できます。 ES2016のサポートにより、このコードは一貫したスタイルで非同期および待機構造を使用して記述できます。

N ：テストでは、Webページのコンテンツを分析および管理するための一連のコマンドを実装できますが、それらはイベントの内部キューに追加され、独自の非同期機能をそれらに統合するのは問題です。

その場でクライアントコードを挿入します 。

T ：適切なAPIを使用して実装するのは簡単で、クライアント関数の作成と後続の実行、挿入されたコードの1回の実行、元のWebページの既存の関数の置換、およびテストに関するnode.js関数のコールバックでのクライアント関数の実行をサポートしますコントローラーに。

N ：クライアント側でJSコードを実行する機能、またはスクリプトブロック全体を挿入する機能もありますが、テストコントローラーとの統合ツールは提供されていません。 単純な同期可能なJSコードに適していますが、より一般的な場合、統合には問題があります。

ステートメントと期待の説明 ：

T ：デフォルトは通常のchai / expectステートメント言語であり、他の互換性のあるステートメントライブラリを使用できます。

N ：拡張されたassert



およびexpect



言語。ページの状態を記述するためのツールを含みます。これには、要素の存在とそのフォーカス、CSSクラスに属するなどが含まれます。 便利そうに見えますが、主にテストでの非同期操作の完全なサポートが不足しているため、必要に応じてステートメントと期待値が存在します。

テスト済みのWebページの管理 ：

T ：戻り値を指定する機能によりconfirm



alert



、 confirm



などのブロックスクリプトのモックの可能性を想定しています。 DOMモデルを使用した複雑な操作、コントロールとのユーザーインタラクションのエミュレーション、およびクライアントJS関数のラッピングによるJSスクリプトの一時停止の可能性もサポートされています

N ：表示されたブラウザウィンドウと基盤となるDOMモデルを直接制御するコマンドがサポートされていますが、クライアントJSスクリプトとの統合は困難です

マウスカーソルの操作 ：

T ：ページのターゲット視覚要素に対してホバー、クリック、およびドラッグイベントが実行される仮想カーソルが提供されます。 テスト中、カーソルの動きと実行されたアクションを観察できます。

N ：通常、カーソルを操作するためのツールがあります-これらはwebdriver apiの機能ですが、左クリック1回よりも複雑なアクションを操作することは非常に問題が多いため、少なくともダブルクリックしてください。

TestCafeおよびNightWatchでのブラウザーインタラクションの実装

NightWatchフレームワークは、よく知られた、ある程度は従来のSelenium Webdriverライブラリに基づいており、その利点には、確立されたAPI、高度なドキュメント、インターネット上の広範なQ＆A、およびブラウザへの普遍的でかなり低レベルのアクセスが含まれます...ブラウザごとに1つ。

主な欠点は、すべてのブラウザーにWebドライバーが存在せず、ブラウザー自体のバージョンを変更するときに個別の更新が必要であり、機能するためにはJavaへの外部依存が必要なことです。 Webdriverテクノロジーの詳細については、 http：//www.w3.org/TR/webdriver/をご覧ください。

TestCafeフレームワークは、ブラウザーアプリケーションとの相互作用を最小限に抑えるアプローチに基づいています-ウィンドウ/タブを開く、ウィンドウのサイズを変更する、URLなどに移動する機能のみが使用されます。

Webページとの対話は、testcafe-hammerhead Webプロキシサーバーを介して実行され、DOMモデルと統合し、視覚要素を検索および管理し、実行することにより、機能テストステップを実行するようにリモートWebページをロードし、ソースJSコードを変更します任意のJSコードなど。 （ https://github.com/DevExpress/testcafe-hammerhead/ ）

TestCafeメソッドは、HTML5およびES 5+をサポートする任意のブラウザーで機能する可能性があるため、より普遍的ですが、NightWatchには適切なWebドライバーが必要です。 さらに、ローカルブラウザーだけでなく、携帯電話を含むネットワーク上の任意のブラウザーでテストを実行できます。電話にソフトウェアをインストールする必要はありません。

Androidブラウザーで上記のWebアプリケーションをテストする例を、次のビデオに示します。https ： //youtu.be/2na5jkqvUx0

ただし、testcafe-hammerheadには潜在的な欠点もあります：Testcafe JSカーネルコードによって生成されるテストページのソースJSコードの分析と変更のオーバーヘッド、およびソースコードがプロキシされた場合のテストされたWebページまたはテスト統合の理論的に不正な操作間違っています。 （たとえば、この例のhttp://pastebin.com/p6gLWA75を使用すると、testcafeのアラートウィンドウを置き換えることができますが、実行が失敗した場合、または具体的に実行を「中断」します）

結論

もちろん、NightwatchのベースとなっているセレンWebドライバーは、間違いなくその利点である標準APIを備えた人気のある有名なソリューションです。 さらに、特定のブラウザーでターゲットWebリソースを自動化するなど、タスクの関連領域では（実際、リモートWebサイトのボットを作成する）、selenium-webdriverの方が適しています。

ただし、開発またはサポートされているWebアプリケーションの機能テストについては、さまざまな理由からTestCafeが間違いなく先行しています。

1）携帯電話やタブレットを含む任意のブラウザーでテストを実行します。これは、関心のあるすべてのブラウザーに対してバッチ方式で実行でき、追加のソフトウェアをインストールする必要はありません。

2）ES2016のテストの記述の利便性。これには、コードの順次書き込み、プロジェクト自体からのプログラム要素のインポート、クライアントへの機能の転送、およびその逆など、クライアントWebアプリケーションを統合および管理するための十分な機会が含まれます。

3）視覚要素の広範なセレクターのサポート、DOMモデルとの簡単な相互作用、仮想マウスカーソル、ページとのさまざまな複雑なユーザー相互作用のエミュレーション。

したがって、Webアプリケーションの機能テスト用の既存のオープンソースソリューションの中で、TestCafeは、軽さと機能の組み合わせに加えて、非常に魅力的なオプションのように見えます。

» アプリケーションおよび機能テストのソースコード