アプリケーションの複雑さとサイズが増加する場合、信頼性、バグキャプチャ、および新機能の回帰テストの手動テストに依存することは非現実的です。
この問題を解決するために、ユーザー操作を模倣し、Angularアプリケーションの堅牢性を確認するために、Angularシナリオランナーを確立しました。
1。概要
JavaScriptでシナリオテストを作成して、アプリケーションの動作を説明し、特定の状態と対話することができます。シナリオは、1つ以上の「IT」ブロック（これらをアプリケーションの要件として扱うことができます）で構成されており、コマンドと期待を順番に構成しています。コマンドは、ランナーにアプリケーションで何かをするように指示します（ページに移動したりボタンをクリックするなど）。期待が失敗した場合、ランナーはこれを「false」としてタグ付けし、次の「it」で続行します。シナリオには、それが通過するかどうかに関係なく、それぞれの「それ」の前または後に実行される「beforeeach」および「aftereach」ブロックを持つこともできます。
上記の要素に加えて、シナリオにはヘルパー関数を含めるには、「IT」ブロックの重複コードを避けることもできます。
これが簡単なシナリオの例です。
（ 'buzz client'、function（）{it（ 'filter sults'、function（）{input（ 'user'）。（ 'jacksparrow'）; enter（ 'jacksparrow'）; ement（ '：button'）。 li '）。count（））。このシナリオでは、ネットワーククライアントの要件を説明しており、明示的に、ユーザーをフィルタリングする機能を備えている必要があります。 「ユーザー」入力ボックスに値を入力し、ページ上の唯一のボタンをクリックしてから、10個のアイテムのリストがあることを確認することから始めます。次に、「FilterText」の入力ボックスに「ミツバチ」を入力し、リストが1つのアイテムのみに削減されることを確認します。
次のAPI章には、ランナーで利用可能なコマンドと期待がリストされています。
2。API
ソースコード：https：//github.com/angular/angular.js/blob/master/src/ngscenario/dsl.js
一時停止（）
コンソールでresume（）を呼び出すまでテストの実行を一時停止します（ランナーインターフェイスのresumeリンクをクリックすることもできます）
睡眠（秒）
n秒のテスト実行を一時停止します。
browser（）。navigateto（url）
指定されたURLをセットフレームにロードします。
browser（）。navigateto（url、fn）
テストフレームにFNによって返されたURLをロードします。ここのURLパラメーターは、テスト出力として使用されます。このAPIは、宛先URLが動的である場合に使用できます（テストを書くときはアドレスがまだ不明です）。
browser（）。reload（）
現在ロードされているページをテストフレームに更新します。
browser（）。window（）。href（）
テストフレームの現在のページのwindow.location.hrefに戻ります。
browser（）。window（）。path（）
Window.location.pathnameを返します。テストフレームの現在のページのPathname。
browser（）。window（）。search（）
window.location.searchに戻り、テストフレームの現在のページの検索。
browser（）。window（）。hash（）
テストフレームの現在のページのwindow.location.hash（＃を含めない）を返します。
browser（）。location（）。url（）
現在のページの$ location.url（）の結果を返します（http://docs.angularjs.org/api/ng.$location）
browser（）。location（）。path（）
現在のページの$ location.path（）の結果を返します（http://docs.angularjs.org/api/ng.$location）
browser（）。location（）。search（）
現在のページの$の場所の結果を返します。 search（）（http://docs.angularjs.org/api/ng.$location）
browser（）。location（）。hash（）
$の場所の結果を返します。現在のページのhash（）（http://docs.angularjs.org/api/ng.$location）
期待する（将来）。{matcher}
指定された将来の値がマッチャーを満たすかどうかを判断します。すべてのAPI宣言は、実行された後に取得された指定された値で将来のオブジェクトを返します。マッチャーはAngular.scenario.Matcherを使用して定義され、予想を実行するために先物の価値を使用します。例えば：
想像（browser（）.location（）.href（））.toequal（ 'http://www.google.com'）;
期待（future）.not（）。{matcher}
特定の将来の価値が、指定されたマッチャーの予想される期待の反対であるかどうかを決定します。
使用（セレクター、ラベル）
次のDSL要素の選択をスコープします。 （おそらくセレクターの範囲を制限し、ラベルの推定値は出力のテストに使用されます）
例：
（ '＃foo'、 "'foo'テキストフィールド"）を使用する（ 'bar'）
バインディング（名前）
指定された名前に一致する最初のバインディング（おそらくNGバインドに関連する）を返します。
input（name）.enter（value）
指定された形式の名前のフィールドに指定された値を入力します。
input（name）.check（）
指定された名前のチェックボックスを選択またはオフにします。
input（name）.select（value）
指定された名前のラジオの中央値で入力[type =” Radio”]を選択します。
input（name）.val（）
指定された名前の入力の現在の値を返します。
リピーター（セレクター、ラベル）.count（）
指定されたセレクター（jQueryセレクター）に一致するリピーターの行数を返します。ラベルは、テスト出力としてのみ使用されます。
リピーター（ '＃製品テーブル'、 '製品リスト'）。count（）//行数
リピーター（セレクター、ラベル）.row（index）
アレイを返し、指定されたインデックスと一致するリピーターで指定された行をバインドします。ラベルは、出力のテストにのみ使用されます。
リピーター（ '＃製品テーブル'、「製品リスト」）。row（1）//配列としてのすべてのバインディング
リピーター（セレクター、ラベル）.Column（バインディング）
指定されたセレクター（jQueryセレクター）に一致する指定されたバインディングと一致するリピーター内の列の値を持つ配列を返します。ラベルは、出力のテストにのみ使用されます。
リピーター（ '＃製品テーブル'、 'product list'）。列（ 'product.name'）//配列内のすべての行のすべての値
select（name）.option（value）
指定された名前の選択で値を指定するオプションを選択します。
select（name）.option（value1、value2）
指定された名前の選択で指定された値のオプション（複数選択）を選択します。
要素（selector、label）.count（）
指定されたセレクターに一致する要素の数を返します。ラベルは、テスト出力としてのみ使用されます。
要素（selector、label）.click（）
指定されたセレクターに一致する要素をクリックします。ラベルは、テスト出力としてのみ使用されます。
要素（セレクター、ラベル）.Query（FN）
指定されたFN（SelectedElements、done）を実行し、選択したセレクターに一致する要素のセットです。および完了は、FNが実行された後に実行される関数です。ラベルは、テスト出力としてのみ使用されます。
要素（selector、label）。{method}（）
指定されたセレクターと一致する要素上のメソッドを実行する返信値を返します。この方法は、次のjQueryメソッドです。VAL、テキスト、HTML、高さ、内側の高さ、外側、幅、内幅、外側幅、位置、スクロールレルフ、スクロールトップ、オフセット。ラベルは、テスト出力としてのみ使用されます。
要素（selector、label）。{method}（value）
指定されたセレクターに一致する要素で指定されたメソッドを実行し、キーと値をパラメーターとして使用します。この方法は、次のjQueryメソッドです。VAL、テキスト、HTML、高さ、内側の高さ、外側、幅、内幅、外側幅、位置、スクロールレルフ、スクロールトップ、オフセット。ラベルは、テスト出力としてのみ使用されます。
要素（selector、label）。{method}（key）
指定されたセレクターに一致する要素上で指定されたメソッドを実行した結果を返します。これらの方法は、次のjQueryメソッドです。ATTR、PROP、CSS。ラベルは、テスト出力としてのみ使用されます。
要素（selector、label）。{method}（key、value）
指定されたセレクターを一致させる要素でメソッドを実行し、キーと値をパラメーターとして使用します。これらの方法は、次のjQueryメソッドです。ATTR、PROP、CSS。ラベルは、テスト出力としてのみ使用されます。
JavaScriptは、強力な表現をもたらす動的にタイプされた言語ですが、コンパイラからの助けもほとんど与えません。したがって、JavaScriptに記載されているコードには、多くの包括的なテストが必要であると強く感じています。 Angularには、アプリケーションをテストしやすくする多くの機能があります。したがって、テストを書かないという言い訳はありません。 （-_- !!）
上記は、AngularJS E2Eテストに関する情報のコレクションです。今後も関連情報を追加し続けます。このサイトへのご支援ありがとうございます！