チュートリアル: Firefox を使用してコード化された UI テストを再生する

[アーティクル]
08/09/2011

コード化された UI テストと呼ばれるユーザーインターフェイス (UI: User Interface) の自動テストを作成できます。これらのテストでは、UI の機能テストと、UI コントロールの検証が行われます。コード化された UI テストで、ユーザーインターフェイスの機能をテストできます。Microsoft Visual Studio 2010 Feature Pack 2 を使用すると、Web サイトまたは Web ベースのアプリケーションで UI 操作を記録したり、コード化された UI テストを作成できます。 Windows Internet Explorer を使用して操作を記録し、Mozilla Firefox ブラウザーを使用してそのテストを再生できます。

コード化された UI テスト詳細情報:、「自動 UI テストを使用したユーザーインターフェイスのテスト」を参照してください。

ヒント

Microsoft Visual Studio 2010 Feature Pack 2 のインストールが完了した後に、Mozilla Firefox のテストパッケージを使用する場合は、Mozilla Firefox 用のテストヘルパー拡張機能をインストールおよび構成する必要があります。詳細については方法: Mozilla Firefox 用のテストヘルパー拡張機能をインストールする.

ヒント

コード化された UI テストを再生する場合にのみ Firefox ブラウザーを使用できます。 Firefox ブラウザーを使用して Web サイトや Web アプリケーションでのコード化された UI テストを記録することはできません。

必須コンポーネント

このチュートリアルに必要な条件は次のとおりです。

Visual Studio 2010 Ultimate、Visual Studio 2010 Premium または Test Professional 2010。
Mozilla Firefox Web ブラウザーバージョン 3.5 または 3.6。
Microsoft Visual Studio 2010 Feature Pack 2 および Mozilla Firefox 用のテストヘルパー拡張機能がインストール済みであるか確認します。インストールに関する情報は、概要で説明しています。

Web アプリケーションの作成

Web アプリケーションを作成するには

Visual Studio 2010 の [ファイル] メニューの [新規作成] をクリックし、[プロジェクト] をクリックします。

[新しいプロジェクト] ダイアログボックスが表示されます。
[インストールされたテンプレート] の下の、使用するプログラミング言語を展開して、[Web] をクリックします。
Web プロジェクトの種類の一覧の [ASP.NET 空の Web アプリケーション] をクリックします。

注意

このチュートリアルでは、最小限のコードを作成します。
[名前] ボックスに「ColorWebApp」と入力します。
[場所] ボックスで、Web アプリケーションを作成するフォルダーを指定します。
[ソリューションのディレクトリを作成] チェックボックスをオンにします。
[OK] をクリックします。
ソリューションエクスプローラーで、新しい ColorWebApp プロジェクトが選択されていることを確認します。
[プロジェクト] メニューの [新しい項目の追加] をクリックします。

[新しい項目の追加] ダイアログボックスが表示されます。
項目の一覧で、[Web フォーム] をクリックします。
[名前] ボックスに「Default.aspx」と入力し、[追加] をクリックします。

Web アプリケーションへのコントロールの追加

Web アプリケーションにコントロールを追加するには

ソリューションエクスプローラーで、Default.aspx を右クリックし、[ビューデザイナー] をクリックします。

空のページが表示されます。
ツールボックスが表示されていない場合は、[表示] をクリックし、[ツールボックス] をクリックします。
[標準] グループから、RadioButtonList をページにドラッグします。

RadioButtonList コントロールがデザインサーフェイスに追加されます。
[RadioButtonList タスク] アクションタグペインで、[EditItems] リンクをクリックします。

ListItem コレクションエディターが表示されます。

注意

ListItem コレクションエディターは、[プロパティ] ウィンドウで項目コレクションを編集することでも表示できます。
[追加] をクリックし、新しい項目を追加します。
[ListItem プロパティ] で、次の操作を行います。
1. Text プロパティを「Red」に変更します。
2. Selected プロパティを True に設定します。
[追加] をクリックして、もう 1 つの項目を追加します。
[ListItem プロパティ] の Text プロパティを「Blue」に変更します。
[OK] をクリックして項目コレクションエディターを閉じます。
Button をページにドラッグします。 [プロパティ] ウィンドウで、Text プロパティを「Submit」に変更します。
[ファイル] メニューの [すべてを保存] をクリックします。

Web アプリケーションへのページの追加

Web アプリケーションにページを追加するには

[プロジェクト] メニューの [新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログボックスで、テンプレートの一覧の [Web フォーム] を選択します。 [名前] ボックスに、「Red.aspx」と入力し、[追加] をクリックします。
ドキュメントウィンドウの下部にある [デザイン] タブをクリックして、デザインビューに切り替えます。
Label をページにドラッグします。 [プロパティ] ウィンドウで、Text プロパティを「Red」に設定します。 ForeColor プロパティを Red に設定します。
[プロジェクト] メニューの [新しい項目の追加] をクリックします。
[新しい項目の追加] ダイアログボックスで、[Web フォーム] テンプレートをクリックし、「Blue.aspx」という名前を付けます。 [追加] をクリックします。
ドキュメントウィンドウの下部にある [デザイン] タブをクリックして、デザインビューに切り替えます。
Label をページにドラッグします。 [プロパティ] ウィンドウで、Text プロパティを「Blue」に設定します。 ForeColor プロパティを Blue に設定します。
[ファイル] メニューの [すべてを保存] をクリックします。

Web アプリケーションへの機能の追加

Web アプリケーションに機能を追加するには

ソリューションエクスプローラーで、Default.aspx を右クリックし、[ビューデザイナー] をクリックします。
送信 Button をダブルクリックします。 Visual Studio はページコードに切り替わり、Button コントロールの Click イベントのスケルトンイベントハンドラーが作成されます。

イベントハンドラーに次のコードを追加します。

if (this.RadioButtonList1.SelectedValue == "Blue")
{
    Response.Redirect("Blue.aspx");
}
else
{
    Response.Redirect("Red.aspx");
}

If RadioButtonList1.SelectedValue = "Blue" Then
    Response.Redirect("Blue.aspx")
Else
    Response.Redirect("Red.aspx")
End If

[ファイル] メニューの [すべてを保存] をクリックします。

Web アプリケーションの動作の確認

ヒント

この手順は、Microsoft Internet Explorer が既定の Web ブラウザーとして設定されていることを前提にしています。

Web アプリケーションを実行するには

ソリューションエクスプローラーで、Default.aspx を右クリックし、[スタートページに設定] をクリックします。
Ctrl キーを押しながら F5 キーを押して、ブラウザーで Web アプリケーションを実行します。最初のページが表示されます。
[Red] をクリックし、[Submit] をクリックします。アプリケーションが正常に動作していれば、"Red" という Label のあるページに移動します。
最初のページに戻ります。
[Blue] をクリックし、[Submit] をクリックします。アプリケーションが正常に動作していれば、"Blue" という Label のあるページに移動します。
Web アプリケーションのアドレスをクリップボードかメモ帳ファイルにコピーします。アドレスの例: https://localhost:<ポート番号>/Default.aspx
ブラウザーを閉じます。

Web アプリケーションのコード化された UI テストの作成と実行

コード化された UI テストを作成および実行するには

ソリューションエクスプローラーで、ソリューションを右クリックし、[追加] をクリックして、[新しいプロジェクト] を選択します。

[新しいプロジェクトの追加] ダイアログボックスが表示されます。
[インストールされたテンプレート] ペインで、[Visual C#] または [Visual Basic] を展開し、[テスト] を選択します。
中央のペインで、[テストプロジェクト] テンプレートを選択します。
[OK] をクリックします。

ソリューションエクスプローラーで、TestProject1 という新しいテストプロジェクトがソリューションに追加され、コードエディターに UnitTest1.cs または UnitTest1.vb ファイルが表示されます。このチュートリアルでは UnitTest1 ファイルは使用しないため、ファイルを閉じてかまいません。
ソリューションエクスプローラーで、TestProject1 を右クリックし、[追加] をクリックして、[コード化された UI テスト] を選択します。

[コード化された UI テストのコードの生成] ダイアログボックスが表示されます。
[操作の記録、UI マップの編集、またはアサーションの追加] オプションを選択し、[OK] をクリックします。

[UIMap – コード化された UI テストビルダー] が表示されます。

このダイアログボックスのオプションの詳細については、「方法: コード化された UI テストを作成する」を参照してください。
[UIMap – コード化された UI テストビルダー] で [記録の開始] をクリックします。数秒でコード化された UI テストビルダーが準備されます。
Internet Explorer を起動します。
Internet Explorer のアドレスバーに、前の手順でコピーした Web アプリケーションアドレスを入力します。この例を次に示します。

https://localhost:<ポート番号>/ Default.aspx

(省略可能) [Red]、[Blue] およびブラウザーの [戻る] ボタンをクリックして Web アプリケーション内を移動します。
Internet Explorer を終了します。
[UIMap – コード化された UI テストビルダー] で、[コードの生成] をクリックします。
[メソッド名] ボックスに「SimpleWebAppTest」と入力し、[追加と生成] をクリックします。数秒でコード化された UI テストが表示され、ソリューションに追加されます。
[UIMap – コード化された UI テストビルダー] を閉じます。

コードエディターに CodedUITest1.cs ファイルが表示されます。

コード化された UI テストが Internet Explorer で正しく再生されるかどうかの確認

CodedUITest1.cs ファイルで、CodedUITestMethod1 メソッドを見つけて右クリックし、[テストの実行] をクリックします。

コード化された UI テストを実行すると、ColorWebApp が表示されます。前の手順で実行した各ステップが実行されます。

Firefox 再生を指定し、コード化された UI テストを再実行するのためのプロパティの追加

CodedUITest1.cs ファイルで、TestInitializeAttribute を使用する MyTestInitialize() メソッドを見つけ、コードをコメントから外し、次のコードに示すように "FireFox" の値が割り当てられた CurrentBrowser プロパティを追加します。

ヒント

オプションで、ブラウザーウィンドウプロパティを追加する代わりに、"Firefox" の値を持つ CodedUITestCurrentBrowser という名前の環境変数を作成してから、Visual Studio を再起動できます。

////Use TestInitialize to run code before running each test 
        [TestInitialize()]
        public void MyTestInitialize()
        {        
        //    // To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
        //    // For more information on generated code, see https://go.microsoft.com/fwlink/?LinkId=179463
            BrowserWindow.CurrentBrowser = "Firefox";
        }

' Use TestInitialize to run code before running each test
    <TestInitialize()> Public Sub MyTestInitialize()
        '
        ' To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
        ' For more information on generated code, see https://go.microsoft.com/fwlink/?LinkId=179463
        '
        BrowserWindow.CurrentBrowser = "Firefox"


    End Sub

TestInitialze() 属性の使用詳細情報:「方法: テスト中のアプリケーションの記録によるコード化された UI テストの生成」を参照してください。

[テスト] メニューの [ウィンドウ] をクリックし、[テストビュー] をクリックします。テストビューで、[テスト名] 列の CodedUITestMethod1 を選択し、ツールバーの [選択範囲の実行] をクリックします。

コード化された UI テストは Mozilla Firefox を使用して実行する必要があります。

参照

概念

自動 UI テストを使用したユーザーインターフェイスのテスト

その他の技術情報

Windows Internet Explorer を使用したテストの記録および Firefox を使用した再生

チュートリアル: Firefox を使用して手動テストを再生する

方法: Firefox を使用して Web ベースのコード化された UI テストを再生する

次の方法で共有