以下の演習では、SOAtest を使って Web インターフェイスに対して機能テストを実行する方法について説明します。以下の演習を行います。

概要

Web インターフェイスのテストは、自動化が難しいテストです。偽陽性が多過ぎたり、テストスイートの管理に労力を取られ過ぎたりするために、自動テストをあきらめて手動テストを採用するケースは多々あります。

SOAtest は、信頼性の高い自動テストスイートの作成を容易にします。SOAtest では Web インターフェイスの特定の要素だけをテストできるため、ノイズが排除された正確な結果を得ることができます。

SOAtest は、スクリプトを使う必要なく、複数のブラウザーにわたって個々のアプリケーションコンポーネントを分離してテストし、その機能の正しさをテストすることができます。動的データをスタブ化して定数データを使用することで、テストケースのノイズを削減できます。検証は、ページオブジェクトレベルだけでなく、 HTTP メッセージレベルでも実行できます。また、非同期メッセージのスタブ化によって、想定される状況と想定外の状況の両方について、クライアントサイド JavaScript エンジンを検証することもできます。

クロスブラウザーテストと検証：概要ビデオ

ブラウザーでの記録

以下の演習を実行する前に、(「ParaBank のセットアップ」で説明しているように) ParaBank Server をすでに開始していること、およびデフォルトアドレス (localhost:8080/parabank) に正常にアクセスできることを確認してください。確認できたら、ブラウザーウィンドウを閉じてください。

ブラウザーで記録するには、以下の操作を行います。

前の演習で作成したプロジェクトを右クリックし、ショートカットメニューから [新規追加] > [テスト (.tst) ファイル] を選択します。
ファイル名を入力し、[次へ] をクリックします。
[Web] > [Web シナリオの記録] を選択し、[次へ] をクリックします。
ウィザードの最初のページで、[Web シナリオの記録] が選択されていることを確認し、[次へ] をクリックします。
次のページで以下のように設定します。
1. [テストスイート名] フィールドに Web Functional Testing と入力します。
2. [次から記録を開始] フィールドに localhost:8080/parabank と入力します。
3. 以下の 2 つのチェックボックスがオンであることを確認します (他のチェックボックスはオフにします)。
  - 機能テストの生成
  - 非同期リクエストテストの生成
4. [終了] ボタンをクリックします。テストが開始し、ブラウザーが開きます。
表示されたブラウザーウィンドウで、以下の操作を実行します。
1. [Username] フィールドに john と入力します。
2. [Password] フィールドに demo と入力します。
3. [Log In] をクリックします。
4. [Accounts Overview] ページで、先頭のアカウント番号 (12345) をクリックします。
5. [Log Out] をクリックします。
6. ブラウザーを閉じて記録を終了します。テストケースエクスプローラーを開くと、新しい .tst ファイルと、今記録したシナリオを含むテストスイートが作成されたことが分かります。
テストケースエクスプローラーで、この新しいテストスイートノードを展開して、記録したアクションごとにテストが作成されたことを確認します。

データソースの追加

データソースを追加するには、以下の操作を行います。

シナリオ: Web Functional Testing ノードを右クリックし、[新規追加] > [データソース] を選択します。
[新規プロジェクトデータソース] ウィザードで、[テーブル] を選択して [終了] をクリックします。

新しいデータソースノードがシナリオ: Web Functional Testing ブランチに追加されます。
GUI 右側に表示された新規データソーステーブルの設定パネルで、[1 行目は列名を表す] チェックボックスをオンにします。
列 A の一番上のセルに Account Number と入力します。同じ列の行 1 に 12345、行 2 に 13344 と入力します。
[保存] をクリックして変更を保存します。

フォーム入力のパラメータライズ

アクションをパラメータライズするには、以下の操作を行います。

シナリオ: Web Functional Testing ブランチを展開し、アカウント番号のクリックに関連する、記録されたアクションを参照します。
テスト 3: Click “12345" ノードをダブルクリックし、テストの設定パネルを開きます。
[アクション前のブラウザーコンテンツ] タブに、テストアクション ( 12345 のクリック) が実行される前のページの様子が表示されます。青い枠で、このテストのユーザーアクションが強調されています。
テストの設定パネルで、[ユーザーアクション] タブを開きます。
[要素の指定] セクションで、[属性値] を [固定] から [パラメータライズ] に変更します。
[属性値] のドロップダウンメニューから Account Number を選択します。
[保存] をクリックして変更を保存します。
テストを実行します。今回は、データソースで入力したアカウント番号を使ってパラメータライズした <a> 要素がクリックされます。

ページ要素の検証の設定

ページ要素の検証を設定するには、以下の操作を行います。

シナリオ: Web Functional Testing ブランチをすべて展開します。
シナリオ: Form login> Test 3: Click ‘Log In’ の下のブラウザーコンテンツビューアーノードをダブルクリックします。
ブラウザーコンテンツビューアーの設定パネルで、アカウント 12345 の隣の残高 (-$2300.00) を右クリックし、ショートカットメニューから [<TD> 要素から値を抽出] を選択します。
表示されたダイアログで、[プロパティ名] に text プロパティが選択されていることを確認し、[次へ] をクリックします。
以下の設定を行います。
1. [テキストの切れ目を使い、値を部分的に分離] チェックボックスをオンにします。
2. [左辺テキスト] フィールドに -$ を入力します。[検証する値、またはデータソースに送る値のプレビュー] に残高だけが表示されるようになります。[左辺テキスト] フィールドにドル記号を入力したので、検証からドル記号が排除され、実際の残高の検証に集中することができます。
3. [次へ] をクリックします。
[値の検証] を選択していて、変更されたページに期待されるテキストが表示されていることを確認します。
[終了] をクリックします。このテストに Browser Validation Tool が追加されます。赤い枠が示すように、このツールは、「今後アプリケーションが更新されていく中で、選択した要素が同じままである」ことをチェックするようにセットアップされています。

ブラウザースタブの設定

スタブは、SOAtest が Web シナリオを記録するときに保存する静的データです。スタブは、実際のサーバーレスポンスの代わりに、変化しないデータをクライアントに渡すことで、クライアントサイドコードに対する変更が最終的な HTML ページに影響しないことを検証するのに役立ちます。

ブラウザースタブを設定するには、以下の操作を行います。

シナリオ: Web Functional Testing ブランチを展開します。
シナリオ: Form login > テスト 3: Click ‘Log In’ を右クリックし、ショートカットメニューから [出力の追加] をクリックします。
表示された [出力の追加] ウィザードで、[HTTP トラフィック] を選択して [次へ] をクリックします。
http://localhost:8080/parabank/overview.htm を選択し、[次へ] をクリックします。
左側で、両方 > スタブリクエスト/レスポンス を選択します。
右側で、Browser Stub を選択します。
[終了] をクリックします。
GUI 右側に表示される、ブラウザースタブの設定パネルの [レスポンスボディ] セクションで、残高の値を -$2300 から $1000.00 に変更します。
- 最も簡単な方法は、メモ帳などのテキストエディターを使用する方法です。[レスポンスボディ] のすべてのテキストをテキストエディターにコピーし、検索機能を使って -$2300 を探し、値を変更します。そして、エディターのすべてのテキストをコピーして、[レスポンスボディ] の現在の内容と差し替えます。
- このレスポンスボディは、記録されたシナリオを後でこの演習で実行するときに、実際のサーバーレスポンスの代わりに提供されます。
[保存] をクリックして変更を保存します。