テストの実行

2016-12-19

jQuery による Web アプリケーション UI のテスト

James McCaffrey

James McCaffrey jQuery ライブラリは、オープンソースの JavaScript 関数を集めたものです。jQuery は Web 開発を念頭に作成されましたが、Web アプリケーション UI の簡易自動テストに適した特徴もいくつか備えています。今月は、この方法について紹介します。

何をしようとしているかは、図 1 のスクリーンショットをご覧ください。このスクリーンショットは、jQuery による UI の自動テストが実行されているようすを示しています。テストハーネスは Internet Explorer でホストされ、UITestHarness.html という HTML ページで構成されます。

ハーネスページは、2 つの HTML frame 要素を配置するコンテナーにすぎません。右側のフレームには、テスト対象の Web アプリケーションを表示します。この場合は、MiniCalc という名前のシンプルかつ典型的な ASP.NET の電卓アプリケーションです。左側のフレームには、TestScenario001.html という HTML ページを表示します。このページは、テストの進行状況メッセージを表示する textarea 要素、自動テストを手動で開始するボタン要素、および jQuery ベースの JavaScript 関数から構成されています。JavaScript 関数は、テスト対象の Web アプリケーションを操作し、アプリケーションの結果状態をチェックして合否を判断します。

image: UI Test Automation with jQuery

図 1 jQuery による UI の自動テスト

jQuery ライブラリは、HTTP 要求と応答のテストにも適しています。実際、2010 年 1 月号の「テストの実行」コラム (msdn.microsoft.com/magazine/ee335793) では、jQuery による要求と応答のテストを取り上げました。

今月のコラムは、ASP.NET テクノロジの基礎知識と、中級レベルの JavaScript プログラミングスキルが前提ですが、jQuery ライブラリに関する経験は必要としません。ただし、ASP.NET と自動テスト全般についての基礎知識がなくても、それほど苦労することなく理解していただけると思います。

ここからは、テスト対象のアプリケーションの実装と UI の自動テストの関係がはっきりわかるように、まず MiniCalc アプリケーションについて説明します。その後、図 1 に示した jQuery ベースの UI の簡易自動テストを作成する方法について説明します。最後にまとめとして、ここで紹介した手法をニーズに合わせて拡張する方法を紹介し、jQuery による UI の自動テストの長所と短所を他の手法と比較して解説します。ここで紹介する手法に興味を引かれ、テスト、開発、管理のスキル向上に役立ていただければ、さいわいです。

テスト対象のアプリケーション

jQuery ベースの UI 自動テストの対象となる MiniCalc ASP.NET Web アプリケーションのコードを見てみましょう。

MiniCalc アプリケーションは、Visual Studio 2008 を使用して作成しました。Visual Studio を起動したら、[ファイル] メニューの [新規作成] をポイントして [Web サイト] をクリックします。ASP.NET 分離コードメカニズムは利用せず、Web アプリケーションのすべてのコードを 1つのファイルに含めるため、[空の Web サイト] を選択します。次に、[場所] ボックスのドロップダウンリストで (ファイルモードではなく) HTTP モードのオプションをクリックし、テキストボックスに次の場所を指定します。

http://localhost/TestWithJQuery/MiniCalc

ここでは MiniCalc アプリケーションのロジックに C# を使用することにしました。このコラムで紹介する自動テスト手法は、C# や Visual Basic で作成された ASP.NET Web アプリケーションだけでなく、従来の ASP、CGI、PHP、JSP、Ruby などのテクノロジを使用して作成された Web アプリケーションでも機能します。

[新しい Web サイト] ダイアログボックスで [OK] をクリックすると、IIS が構成され、Web アプリケーションの構造が生成されます。次に、ソリューションエクスプローラーで、MiniCalc プロジェクト名を右クリックして、コンテキストメニューから [新しい項目の追加] を選択します。インストール済みのテンプレート一覧から [Web フォーム] を選択して、ファイル名 Default.aspx をそのまま使用します。[別のファイルにコードを書き込む] チェックボックスをオフにして、[追加] をクリックします。

次に、ソリューションエクスプローラーで Default.aspx ファイルをダブルクリックして、テンプレートによって生成されたコードをテキストエディターに読み込みます。テンプレートコードをすべて削除して、図 2 に示すコードに置き換えます。

図 2 テスト対象の MiniCalc Web アプリケーションのソース

<%@ Page Language="C#" %>
<script runat="server">
  static Random rand = null;

  private void Page_Load(object sender, EventArgs e)
  {
    if (!IsPostBack) 
      rand = new Random(0);
  }

  private void Button1_Click(object sender, System.EventArgs e)
  {
    int randDelay = rand.Next(1, 6); // [1-5]
    System.Threading.Thread.Sleep(randDelay * 1000);
    int x = int.Parse(TextBox1.Text);
    int y = int.Parse(TextBox2.Text);
    if (RadioButton1.Checked)
      TextBox3.Text = (x + y).ToString("F4");
    else if (RadioButton2.Checked)
      TextBox3.Text = (x * y).ToString("F4");
  }
</script>
<html>
  (client-side JavaScript and UI elements here)
</html>

ソースコードのサイズを抑え、コードがわかりやすくなるように、通常のエラーチェックは省略しました。MiniCalc アプリケーションとテストハーネスの完全なソースコードは、code.msdn.microsoft.com/mag201012TestRun (英語) から入手できます。

Web アプリケーションの自動テストを作成するには、さまざまなユーザーコントロールの ID を把握する必要があります。図 2 に示すように、このアプリケーションでは、TextBox1 と TextBox2 を使用してユーザーが入力した 2 つの整数値を保持し、RadioButton1 と RadioButton2 を使用して加算または乗算を選択し、TextBox3 を使用して計算結果を保持します。

ユーザーが Button1 コントロールをクリックすると、MiniCalc アプリケーションではランダムに 1 ～ 5 秒間の遅延を発生させてちょっとしたサーバー側の処理のシミュレーションを行ってから、ユーザーが入力した 2 つの値の和または積を求めて表示します。

続いて、AJAX テクノロジを使用して MiniCalc アプリケーションを非同期アプリケーションにすることにしました。非同期アプリケーションにするにはアプリケーションの web.config ファイルが必要なので、手作業で最初から web.config ファイルを作成するのではなく、F5 キーを押し、デバッガーでアプリケーションをビルドして実行するよう Visual Studio に指示します。web.config ファイルの追加を問い合わせるメッセージが表示されたら、[OK] をクリックします。続いて、MiniCalc に次のようなサーバー側コントロールの ScriptManager を追加して、AJAX を有効にします。

<asp:ScriptManager ID="sm1" runat="server" EnablePartialRendering="true" />

Button1 のクリックイベントと組み合わせて TextBox3 の結果の要素を非同期に更新するために必要な、次のタグを追加します。

<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<p><asp:TextBox id="TextBox3" width="120"  runat="server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

図 1 を見ると、MiniCalc が AJAX アプリケーションであることを強調するために、UI にクライアント側ページの有効期間カウンターを配置しているのがわかります。MiniCalc への非同期要求が返されたら、TextBox3 だけを更新し、ページの有効期間カウンターはリセットしません。pageLife テキストボックスは次のように定義します。

<input type="text" id="pageLife" size="1"/>

関連付けているクライアント側の JavaScript は次のとおりです。

<script language="javascript">
  var count = 0;
  function updatePageLife() {
    ++count;
    var tb = document.getElementById("pageLife");
    tb.value = parseInt(count);
    window.setTimeout(updatePageLife, 1000);
  }
</script>

次のように、アプリケーションの onload イベントでカウンターを開始します。

<body bgColor="#ccffff" onload="updatePageLife();">

jQuery による Web アプリケーション UI のテスト

以上でテスト対象の Web アプリケーションを確認したので、今度は UI の自動テストのコードについて説明します。メインのテストハーネスは、次のように 2 つの frame 要素を配置した通常の HTML にすぎません。

<html>
<!-- UITestHarness.html -->
<head>
  <title>Test Harness for MiniCalc AJAX Web App</title>
</head>
  <frameset cols="45%,*" onload="leftFrame.appLoaded=true">
    <frame src="http://localhost/TestWithJQuery/TestScenario001.html"
       name="leftFrame" >
    <frame src="http://localhost/TestWithJQuery/MiniCalc/Default.aspx"
       name="rightFrame">
  </frameset>
</html>

rightFrame という名前のフレームでは、テスト対象の Web アプリケーションを、変更やテストのインストルメンテーションを行わずにそのままホストします。leftFrame という名前のフレームでは、TestScenario001.html という HTML ページをホストします。このページには、jQuery の自動テストコードをすべて含めます。frameset 要素の onload イベントが発生すると、leftFrame でホストしているページの appLoaded 変数が true に設定されます。この変数は、テスト対象の Web アプリケーションがテストハーネスに完全に読み込まれるまで自動テストが開始されないようにするために使用します。テストシナリオのコードの構造を図 3 に示します。

図 3 UI 自動テストのページの構造

<html>
<!-- TestScenario001.html -->
<head>
  <script src='http://localhost/TestWithJQuery/jquery-1.3.2.js'></script>
  <script type="text/javascript">
    $(document).ready(function() {
      logRemark("jQuery Library found and harness DOM is ready\n");
    } );
  
    var testScenarioID = "Test Scenario 001";
    var maxTries = 20;
    var numTries;
    var polling = 500; // milliseconds
    var appLoaded = false;
    var started = false;
    
    function launch() {
      if (!started)
        runTest();
    }
    
    function waitUntilAppLoaded() {
      // Code
    }
    
    function runTest() {
      // Start automation
    }
    
    function step1() {
      // Manipulate state
    }

    function clickCalculate() {
      // Click the Calculate button
    }
    function checkControl(controlID, controlVal) {
      // Determine if control has specified value
    }
    
    function step2() {
      // Manipulate state
    }
    
    function callAndWait(action, checkControlFunc, controlID, controlVal,
      callbackFunc, pollTime) {
      // The heart of the automation
    }

    function doWait(checkControlFunc, controlID, controlVal, 
      callbackFunc, pollTime) {
      // Wait until Web app responds
    }
    
    function finish() {
      // Determine pass/fail result
    }
       
    function logRemark(comment) {
      // Utility logging function
    }
  </script>

</head>
<body bgcolor="#F5DEB3">
  <h3>This is the UI test scenario with jQuery script page</h3>
  <p>Actions:</p><p><textarea id="comments" rows="22" cols="34">
  </textarea></p>
  <input type="button" value="Run Test" onclick="runTest();" /> 
</body>
</html>

テストスクリプトでは、まず jQuery ライブラリを参照します。

<script src='http://localhost/TestWithJQuery/jquery-1.3.2.js'>

ここでは、jQuery プロジェクトの Web サイト (jquery.com、英語) からダウンロードして MiniCalc アプリケーションのルートディレクトリにコピーした jQuery ライブラリを参照しています。今回は jQuery 1.3.2 を使用しました。ライブラリは絶えず開発中なので、コラムの公開時には新しいバージョンを入手できるようになっている可能性が高いでしょう。コードで jQuery ライブラリを参照する方法については、「jQuery ライブラリを入手する」を参照してください。

jQuery ライブラリを入手する

アプリケーションで使用する jQuery ライブラリの配置場所は、いくつかある中から選択できます。既に説明したように、jquery.com (英語) から最新バージョンをダウンロードして、ローカルファイルシステムで使用します。jQuery のサイトでは、開発 (圧縮されていない) バージョンと運用環境 (サイズを小さくするために圧縮された、つまり空白文字が削除された) バージョンをダウンロードできます。希望するパッケージを選択して、.js ファイルをプロジェクトディレクトリに保存します。

アプリケーションホストのインターネット接続がアクティブ状態であれば、さらに簡単に、オンラインのコンテンツ配信ネットワーク (CDN) から最新バージョンの jQuery を参照することもできます。使用できる参照先 (独自のホストされた CDN など) は多数ありますが、可用性の高い CDN を 2 つ挙げるとすれば、Microsoft AJAX Content Delivery Network (asp.net/ajaxlibrary/cdn.ashx、英語) と Google Libraries API (code.google.com/apis/libraries、英語) です。

たとえば、次の script タグを使用すると、Microsoft Ajax CDN から圧縮バージョンの jQuery を使用できます。

<script 
  src="https://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" 
  type="text/javascript">
</script>

Scott Guthrie は、jQuery と ASP.NET AJAX の両方を対象に Microsoft Ajax CDN を使用する方法について、役立つブログ記事 (tinyurl.com/q7rf4w、英語) を執筆しています。

一般に、自動テストに jQuery を使用する場合、テストハーネスではローカルに展開したライブラリを使用する方が、リモートのライブラリや圧縮ライブラリを使用するよりも信頼性が高くなります。ただし、運用アプリケーションでは、ホストされた信頼性の高いライブラリを使用することをお勧めします。

次に、jQuery の標準イディオムを使用して、自動テストで jQuery ライブラリにアクセスできるかどうか確認します。

$(document).ready(function() {
  logRemark("jQuery Library found and harness DOM is ready\n");
} );

コンテナーのドキュメント DOM がテストホストのメモリに完全に読み込まれ、すべての DOM 要素を使用できるようになったら、jQuery の ready 関数を呼び出します。jQuery ライブラリにアクセスできない場合 (通常は指定したライブラリのパスが正しくないと発生する状況)、オブジェクトが必要なことを示すエラーがスローされます。

ready 関数では、唯一のパラメーターとして無名関数を受け取ります。jQuery と JavaScript の両方の自動テストでは、無名関数がよく使用されます。無名関数は、function キーワードを使用して実行中に定義される関数と考えることができます。

次に logRemark という関数の例を示します。

function logRemark(comment) {
  var currComment = $("#comments").val();
  var newComment = currComment + "\n" + comment;
  $("#comments").val(newComment);
}

この例では、プログラム定義の logRemark というログ関数を呼び出して、jQuery を使用できることを示すメッセージをテストハーネスに表示します。ここでは、alert という JavaScript の組み込み関数を使用することもできます。

logRemark 関数では、まず jQuery のセレクターおよびチェーン機能の構文を使用して、comments という ID の textarea 要素に現在表示されているテキストを取得します。$ 表記は、jQuery メタクラスのショートカットエイリアスです。# 構文は HTML 要素を ID で選択するために使用し、val 関数は値の setter と getter (オブジェクト指向プログラミング用語におけるプロパティ) の両方として機能します。既存のコメントテキストの末尾に comment パラメーターと改行文字を追加し、jQuery 構文を使用して textarea 要素を更新します。

続いて、次のように自動テストのグローバル変数をいくつか設定します。

var testScenarioID = "Test Scenario 001";
var maxTries = 20;
var numTries;
var polling = 500;
var appLoaded = false;
var started = false;

この自動テストでは非同期アプリケーションを処理するため、不定期の遅延を使用しません。代わりに、(polling 変数で期間を定義した) 一連の短い遅延を使用し、(maxTries 変数で指定した) 最大試行回数に達するまで、特定の HTML 要素の値がブール条件を満たすかどうか繰り返し確認します (numTries 変数で回数を追跡します)。このテストシナリオでは、最大 20 回試行し、1 回の試行で 500 ミリ秒遅延するため、合計 10 秒遅延します。appLoaded 変数は、テスト対象の Web アプリケーションがテストハーネスに完全に読み込まれるタイミングを特定するために使用します。started 変数は、テストハーネスの実行を調整するために使用します。

自動テストを手動で開始するには、以下の [Run Test] ボタンをクリックします。

<input type="button" value="Run Test" onclick="runTest();" />

図 3 の launch 関数は、後で説明する完全な自動テストに使用します。runTest 関数は、自動テストのメイン調整用関数として機能します。

function runTest() {
  waitUntilAppLoaded();
  started = true;
  try {
    logRemark(testScenarioID);
    logRemark("Testing 3 + 5 = 8.0000\n");
    step1();
  }
  catch(ex) {
    logRemark("Fatal error: " + ex);
  }
}

runTest 関数では、まず waitUntilAppLoaded 関数を呼び出します。この関数の定義は次のとおりです。

function waitUntilAppLoaded() {
  if (appLoaded == true) return true;
  else window.setTimeout(waitUntilAppLoaded, 100);
}

テストシナリオで appLoaded 変数を false に初期化し、ハーネスに配置した frameset 要素の onload イベントで appLoaded 変数を true に設定したことを思い出してください。ここでは、組み込みの setTimeout 関数を使用して、appLoaded 変数の値が true になるまで 100 ミリ秒ずつ一時停止を繰り返します。この手法では永遠に遅延する可能性があることに注意してください。この可能性を回避するため、グローバルカウンターを追加して、遅延回数が任意の最大回数に達したら false を返すことをお勧めします。

グローバルの開始変数を設定したら、runTest 関数では、例外ハンドラーのラッパー内でコメントを表示して step1 関数を呼び出します。ここで紹介しているハーネスの構造は考えられる構造の 1 つにすぎないので、プログラミングスタイルやテスト環境に合わせて変更できます。この例の構造では、テストシナリオを一連の状態変化とみなしており、それぞれの状態変化を step<X> 関数 (X はステップの番号) で表しています。

step1 関数では、ユーザー入力のシミュレーションを行うことで、テスト対象の Web アプリケーションの状態を操作します (図 4 参照)。

図 4 step1 関数による入力のシミュレーション

function step1() {
  logRemark(
    "Entering 3 and 5 and selecting Addition");
  var tb1 = 
    $(parent.rightFrame.document).find('#TextBox1');
  tb1.val('3');

  var tb2 = 
    $(parent.rightFrame.document).find('#TextBox2');
  tb2.val('5');

  var rb1 = 
    $(parent.rightFrame.document).find('#RadioButton1');
  rb1.attr("checked", true);

  logRemark(
    "\nClicking Calculate, waiting for async response '8.0000'");
  callAndWait(clickCalculate, checkControl, "TextBox3", "8.0000", 
    step2, polling);
}

HTML 要素にアクセスして要素を操作する jQuery 構文は、一貫性があって洗練されており、ほとんどはブラウザーに依存しません。rightFrame 要素に読み込まれた Web アプリケーションに leftFrame 要素のコードからアクセスするには、parent キーワードを使用する必要があります。また、jQuery の find フィルターも使用しなければなりません。

TextBox1 要素と TextBox2 要素を操作する際は、テスト対象の Web アプリケーションが rightFrame 要素に完全に読み込まれているものと想定しています。この想定は、読み込み時間が長いアプリケーションでは適切ではありません。そのようなアプリケーションでは、jQuery のセレクターコードを window.setTimeout 遅延ループに配置し、組み込みの undefined 値と比較して対象のオブジェクトをテストします。

テスト対象の MiniCalc アプリケーションは AJAX アプリケーションなので、ハーネスで単純に [Calculate] ボタンのクリックイベントを呼び出すわけにはいきません。これは、テストハーネスのコードがアプリケーションの非同期応答を待機せずに実行を続けているためです。このような理由から、次のプログラム定義の callAndWait 関数を使用します。

function callAndWait(action, checkControlFunc, controlID,
  controlVal, callbackFunc, pollTime) {
    numTries = 0;
    action();
    window.setTimeout(function(){doWait(
      checkControlFunc, controlID, controlVal, 
      callbackFunc, pollTime);}, pollTime);
}

callAndWait 関数では、関数を呼び出し (action パラメーター)、遅延ループに入って短時間一時停止し (pollTime 変数)、controlID パラメーターと controlVal パラメーターを引数とする checkControlFunc パラメーター関数を呼び出して、アプリケーションの状態が true かどうかチェックします。checkControlFunc パラメーター関数が true を返す場合、または最大回数遅延した場合は、callbackFunc パラメーター関数に制御を移します。

callAndWait 関数は、次のプログラム定義の doWait 関数と連携して機能します。

function doWait(checkControlFunc, controlID, 
  controlVal, callbackFunc, pollTime) {
  ++numTries;

  if (numTries > maxTries) finish();
  else  if (checkControlFunc(controlID, controlVal)) 
    callbackFunc();
  else window.setTimeout(function(){
    doWait(checkControlFunc, controlID,
    controlVal, callbackFunc, pollTime);}, pollTime);
}

doWait 関数は再帰関数で、checkControlFunc パラメーター関数が true を返すか、ローカルカウンター変数 numTries の値が maxTries グローバル変数の値を超えると終了します。したがって、次に示す callAndWait 関数では、clickCalculate という関数を呼び出し、遅延ループに入ってポーリングを 500 ミリ秒停止してから、checkControl 関数が true を返すか遅延ループが (maxTries パラメーターで指定した) 20 回実行されるまで、TextBox3 と 8.0000 を引数に渡して checkControl 関数を呼び出します。

callAndWait(clickCalculate, checkControl, "TextBox3", 
  "8.0000", step2, polling);

checkControl 関数が true を返すと、step2 関数に制御を移します。clickCalculate 関数では、次のように jQuery の選択とチェーンを使用します。

function clickCalculate() {
  var btn1 = $(parent.rightFrame.document).find('#Button1');
  if (btn1 == null || btn1.val() == undefined) 
    throw "Did not find btn1";
  btn1.click();
}

このようなアクションラッパー関数を定義する主な理由は、callAndWait 関数に関数を名前で簡単に渡せるようにするためです。checkControl 関数は簡潔です。

function checkControl(controlID, controlVal) {
  var ctrl = $(parent.rightFrame.document).find('#' + controlID);
  if (ctrl == null || ctrl.val() == undefined || ctrl.val() == "")
    return false;
  else
    return (ctrl.val() == controlVal);
}

まず、jQuery 構文を使用して、controlID パラメーターで指定したコントロールへの参照を取得します。コントロールの値をまだ使用できない場合は、すぐに遅延ループに戻ります。コントロールの値を使用できるようになったら、この値が controlVal パラメーターで指定した想定値と等しいかどうか確認します。

step<X> 関数 (X は必要なステップ数に 1 加算した値) を呼び出したら、finish 関数に制御を移します。この関数では、まず、呼び出された経緯を次のようにして特定します。

if (numTries > maxTries) {
  logRemark("\nnumTries has exceeded maxTries");
  logRemark("\n*FAIL*");
}
else ....

numTries グローバル変数の値が maxTries 変数の値を超えている場合は、テスト対象の Web アプリケーションが許容時間内に応答しなかったことがわかります。ここでは恣意的に、時間内に応答しなかったことがなんらかの不明な結果ではなく、テストケースの不合格を意味することにしています。numTries 変数の値が maxTries 変数の値を超えていない場合は、次のようにテスト対象のアプリケーションの最終的な状態を確認します。

logRemark("\nChecking final state");
var tb1 = $(parent.rightFrame.document).find('#TextBox1');
var tb2 = $(parent.rightFrame.document).find('#TextBox2');
var tb3 = $(parent.rightFrame.document).find('#TextBox3');

ここでは、3 つのテキストボックスコントロールへの参照を取得します。テスト対象の Web アプリケーションで実際に確認する要素については、アプリケーションの詳細によって異なります。続いて、各テキストボックスコントロールの値を調べて、すべてのコントロールの値が想定どおりかどうか確認します。

var result = "pass";
if (tb1.val() != "3") result = "fail";
if (tb2.val() != "5") result = "fail";
if (tb3.val() != "8.0000") result = "fail";

このテストシナリオのスクリプトでは、テストケースの入力値と想定値をすべてハードコードしています。ここで紹介している自動テストは、ハードコードするテストデータが単純で効果的な場合の、軽量で簡単なテスト状況に適しています。

finish 関数では、テストの実行のまとめとして合否結果を表示します。

if (result == 'pass')
  logRemark("\n*Pass*");
else
  logRemark("\n*FAIL*");

テストケースの入力データと同様、この手法は軽量なので、テスト結果をテストホストや Web サーバー上の外部ファイルに書き込むか、テスト結果を SMTP 経由で任意の電子メールアドレスに送信することをお勧めします。

まとめ

今月説明したハーネスは、テストを開始するにはボタンコントロールをクリックする必要があるという意味では、全自動とは言えません。次のような開始ラッパー関数を追加すると、ハーネスを完全自動化できます。

function launch() {
  if (!started)
    runTest();
}

ハーネスページの frameset 要素に、onload="leftFrame.launch();" という属性を追加します。ハーネスから Web アプリケーションが読み込まれるたびに onload イベントが発生するため、グローバル開始変数を使用して、自動テストが再開されないようにします。興味深いことに、HTML の frame 要素では onload イベントがサポートされていませんが、実際にはハーネスの frame 要素に onload 属性を配置でき、親の frameset 要素にイベントがバブルアップします。

これで、次のようなコマンドを指定した .bat ファイルを作成できます。

iexplore http://localhost/TestWithJQuery/UITestHarness001.html
iexplore http://localhost/TestWithJQuery/UITestHarness002.html

.bat ファイルを (おそらく Windows タスクスケジューラで) 実行すると、ハーネスが読み込まれ、自動テストが自動的に開始されます。ここで紹介したテストシステムに使用できる別の拡張方法として、jQuery プラグインにプログラム定義の関数を配置する方法があります。

Web アプリケーション UI の簡易自動テストを作成する際は、今回紹介した jQuery ベースの手法以外にもさまざまな手法を使用できます。JavaScript だけを使用するのではなく jQuery ライブラリを使用する手法の主なメリットは、jQuery が Internet Explorer、Firefox、Safari など、複数のブラウザーで機能することです。もう 1 つは、jQuery を使用して自動テストを記述すると、Web 開発作業での jQuery の使用に関する知識を積極的に習得できる点です。これは大きなメリットです。

jQuery の使用には、他の手法と比べて短所もあります。jQuery を使用するとある程度外部依存関係が発生し、スクリプトベースの自動テストは、スクリプトを使用しない自動テストよりも管理が難しくなりがちです。Selenium や Watir などのテストフレームワークを使用する場合に比べて、jQuery ベースの自動テストを記述する場合は柔軟性が高まりますが、抽象化レベルが低いコードを記述する必要があります。

いつものように、すべての状況に最適な特定の 1 つの自動テスト手法というものは存在しないことを忘れないでください。ただし、jQuery ベースの Web アプリケーション UI の自動テストは、多くのソフトウェア開発シナリオで効率的かつ効果的な手法となる可能性があります。

Dr. James McCaffrey は Volt Information Sciences Inc. に勤務し、ワシントン州レドモンドにあるマイクロソフト本社で働くソフトウェアエンジニアの技術トレーニングを管理しています。これまでに、Internet Explorer、MSN サーチなどの複数のマイクロソフト製品にも携わってきました。また、『.NET Test Automation Recipes: A Problem-Solution Approach』(Apress、2006 年) の著者でもあります。連絡先は jammc@microsoft.com (英語のみ) です。

この記事のレビューに協力してくれた技術スタッフの Scott Hanselman と Matthew Osborn に心より感謝いたします。

次の方法で共有

テストの実行

jQuery による Web アプリケーション UI のテスト

James McCaffrey

テスト対象のアプリケーション

jQuery による Web アプリケーション UI のテスト

jQuery ライブラリを入手する

まとめ

その他のリソース