チュートリアル: コード化された UI テストの作成、編集、および保守

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

このチュートリアルでは、簡単な Windows Presentation Foundation (WPF) アプリケーションを作成して、コード化された UI テストの作成、編集、および保守を行う方法について説明します。また、さまざまなタイミングの問題やコントロールのリファクタリングによって機能が損なわれたテストを修正するための解決策を示します。

必須コンポーネント

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

Visual Studio 2010 Ultimate または Visual Studio 2010 Premium。

簡単な WPF アプリケーションの作成

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

[新しいプロジェクト] ダイアログボックスが表示されます。
[インストールされたテンプレート] ペインで、[Visual C#] を展開し、[Windows] を選択します。
中央のペインの上にあるターゲットフレームワークドロップダウンリストが [.NET Framework 4] に設定されていることを確認します。
中央のペインで、[WPF アプリケーション] テンプレートをクリックします。
[名前] ボックスに「SimpleWPFApp」と入力します。
プロジェクトの保存先のフォルダーを選択します。 [場所] ボックスにフォルダーの名前を入力します。
[OK] をクリックします。

Visual Studio の WPF デザイナーが開き、プロジェクトの MainWindow が表示されます。
ツールボックスが現在開いていない場合は開きます。 [表示] メニューをクリックし、[ツールボックス] をクリックします。
[すべての WPF コントロール] セクションの [Button]、[CheckBox]、[ProgressBar] の各コントロールをデザインサーフェイスの MainWindow にドラッグします。
Button コントロールを選択します。 [プロパティ] ウィンドウで、Content プロパティの値を Button から Start に変更します。
ProgressBar コントロールを選択します。 [プロパティ] ウィンドウで、Maximum プロパティの値を 100 から 1000 に変更します。
Checkbox コントロールを選択します。 [プロパティ] ウィンドウで、IsEnabled プロパティをクリアします。
ボタンコントロールをダブルクリックして Click イベントを追加します。

コードエディターに MainWindow.xmal.cs が表示され、新しい button1_Click イベントにカーソルが置かれます。
MainWindow クラスの先頭にデリゲートを追加します。このデリゲートはプログレスバーに使用されます。デリゲートを追加するには、次のコードを追加します。
```
        private delegate void ProgressBarDelegate(
        System.Windows.DependencyProperty dp, Object value);
```

button1_Click メソッドに次のコードを追加します。

            double progress = 0;

            ProgressBarDelegate updatePbDelegate =
        new ProgressBarDelegate(progressBar1.SetValue);

            do
            {
                progress ++;

                Dispatcher.Invoke(updatePbDelegate,
                    System.Windows.Threading.DispatcherPriority.Background,
                    new object[] { ProgressBar.ValueProperty, progress });
                progressBar1.Value = progress;
            }
            while (progressBar1.Value != progressBar1.Maximum);

            checkBox1.IsEnabled = true;

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

[デバッグ] メニューの [デバッグ開始] をクリックするか、F5 キーを押します。
[開始] をクリックします。

数秒でプログレスバーが 100% になります。これで、チェックボックスコントロールが有効になりました。
SimpleWPFApp を閉じます。

SimpleWPFApp のコード化された UI テストの作成と実行

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

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

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

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

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

このダイアログボックスのオプションの詳細については、「方法: コード化された UI テストを作成する」を参照してください。
前に作成した SimpleWPFApp アプリケーションを見つけて実行します。既定では、アプリケーションは C:\Users\<ユーザー名>\Documents\Visual Studio 2010\Projects\SimpleWPFApp\SimpleWPFApp\bin\Debug\SimpleWPFApp.exe にあります。
SimpleWPFApp アプリケーションのデスクトップショートカットを作成します。 SimpleWPFApp.exe を右クリックし、[コピー] をクリックします。デスクトップで右クリックし、[ショートカットの貼り付け] をクリックします。

ヒント

アプリケーションのショートカットを使用するとアプリケーションをすばやく起動できるため、アプリケーションのコード化された UI テストを追加または変更しやすくなります。アプリケーション自体に移動する必要はありません。このチュートリアルでは、アプリケーションを再度実行する必要があります。
[UIMap – コード化された UI テストビルダー] で [記録の開始] をクリックします。数秒でコード化された UI テストビルダーが準備されます。
デスクトップショートカットを使用して、SimpleWPFApp.exe を実行します。
SimpleWPFApp で [Start] をクリックします。

数秒でプログレスバーが 100 になります。これで、チェックボックスコントロールが有効になりました。
CheckBox コントロールのボックスをオンにします。
SimpleWPFApp アプリケーションを閉じます。
[UIMap – コード化された UI テストビルダー] で、[コードの生成] をクリックします。
[メソッド名] ボックスに「SimpleAppTest」と入力し、[追加と生成] をクリックします。数秒でコード化された UI テストが表示され、ソリューションに追加されます。
[UIMap – コード化された UI テストビルダー] を閉じます。

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

コード化された UI テストの実行

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

コード化された UI テストを実行すると、SimpleWPFApp が表示されます。前の手順で実行した各ステップが実行されます。ただし、テストで CheckBox コントロールのチェックボックスをオンにしようとすると、[テスト結果] ウィンドウにテストが失敗したことが示されます。 CheckBox コントロールはプログレスバーが 100% になるまで無効化されています。テストではこの点が認識されておらず、まだ有効になっていないチェックボックスをオンにしようとしたことが失敗の原因です。コード化された UI テストで使用できるさまざまな UITestControl.WaitForControlXXX() メソッドを使用することで、この問題や同様の問題を解決できます。次の手順では、WaitForControlEnabled() メソッドを使用して、このテストの失敗の原因となった問題を解決する方法を示します。詳細については、「再生中に特定のイベントを待機するようにコード化された UIT テストを設定」を参照してください。

コード化された UI テストの編集と再実行

[テスト結果] ウィンドウで、失敗したテストを右クリックし、[テスト結果の詳細の表示] をクリックします。

[CodedUITestMethod1[結果]] が表示されます。
[エラーのスタックトレース] セクションで、TestProject1.UIMap.SimpleAppTest() の横の最初のリンクをクリックします。

UIMap.Designer.cs ファイルが開き、コードのエラーポイントが強調表示されます。
```
// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;
```
この問題を解決するには、WaitForControlEnabled() メソッドを使用して、コード化された UI テストで CheckBox コントロールが有効になるのを待ってからこの行に進むようにします。

ヒント

UIMap.Designer.cs ファイルは変更しないでください。 UIMapDesigner.cs ファイルでコードを変更しても、[UIMap - コード化された UI テストビルダー] を使用してコードを生成するたびに変更が上書きされます。記録されたメソッドを変更する必要がある場合は、メソッドを UIMap.cs ファイルにコピーし、メソッド名を変更する必要があります。 UIMap.cs ファイルを使用すると、UIMapDesigner.cs ファイルのメソッドやプロパティをオーバーライドできます。 Coded UITest.cs ファイルの元のメソッドへの参照を削除し、変更したメソッド名に置き換える必要があります。
UIMapDesinger.cs ファイルで、SimpleAppTest メソッド全体のすべてのコードを選択し、コピーします。
ソリューションエクスプローラーで、UIMap.cs ファイルを開きます。
SimpleAppTest メソッドのコードを UIMap 部分クラスに貼り付けます。
メソッド名を SimpleAppTest() から ModifiedSimpleAppTest() に変更します。
次の using ステートメントをファイルに追加します。
```
using Microsoft.VisualStudio.TestTools.UITesting.WpfControls;
```

確認済みの問題のコード行の前に、次の WaitForControlEnabled() メソッドを追加します。

uICheckBoxCheckBox.WaitForControlEnabled();

// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;

CodedUITest1.cs ファイルで、CodedUITestMethod メソッドを見つけてコメントアウトするか、元の SimpleAppTest() メソッドへの参照の名前を変更し、新しい ModifiedSimpleAppTest() に置き換えます。

[TestMethod]
        public void CodedUITestMethod1()
        {
            // 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
            //this.UIMap.SimpleAppTest();
            this.UIMap.ModifiedSimpleAppTest();
        }

[ビルド] メニューの [ソリューションのビルド] をクリックします。
CodedUITestMethod メソッドを右クリックし、[テストの実行] をクリックします。
今回は、コード化された UI テストでテストのすべてのステップが正常に完了し、[テスト結果] ウィンドウに [成功] と表示されます。

SimpleWPFApp のコントロールのリファクタリング

MainWindow.xaml ファイルで、デザイナーのボタンコントロールを選択します。
[プロパティ] ウィンドウの上部で、Button の横の button1 という値を選択し、この値を buttonA に変更します。
[ビルド] メニューの [ソリューションのビルド] をクリックします。
[テスト] メニューの [ウィンドウ] をクリックし、[テストビュー] をクリックします。
テストビューで、[テスト名] 列の CodedUITestMethod1 を選択し、ツールバーの [選択範囲の実行] をクリックします。

テストは失敗します。コード化された UI テストでは、UIMap で元は button1 としてマップされていたボタンコントロールを見つけることができないためです。このように、リファクタリングがコード化された UI テストに影響を及ぼす場合があります。
[テスト結果] ウィンドウで、失敗したテストを右クリックし、[テスト結果の詳細の表示] をクリックします。

[CodedUITestMethod1[結果]] が表示されます。
[エラーのスタックトレース] セクションで、TestProject1.UIMap.SimpleAppTest() の横の最初のリンクをクリックします。

UIMap.Designer.cs ファイルが開きます。コードでエラーポイントが強調表示されます。
```
// Click 'Start' button
Mouse.Click(uIStartButton, new Point(27, 10));
```
この手順の前半のコード行では UiStartButton を使用していることに注意してください。これがリファクタリング前の UIMap 名です。

この問題を解決するには、コード化された UI テストビルダーを使用して、リファクタリングしたコントロールを UIMap に追加します。次の手順に示すように、このコードを使用するようテストのコードを更新できます。

リファクタリングしたコントロールのマッピングおよびコード化された UI テストの編集と再実行

CodedUITest1.cs ファイルで、CodedUITestMethod1() メソッドを右クリックし、[コード化された UI テストのコードの生成] をクリックして、[コード化された UI テストビルダーの使用] をクリックします。

[UIMap – コード化された UI テストビルダー] が表示されます。
前半で作成したデスクトップショートカットを使用して、作成済みの SimpleWPFApp アプリケーションを実行します。
[UIMap – コード化された UI テストビルダー] で、十字ツールを SimpleWPFApp の [Start] ボタンまでドラッグします。

[Start] ボタンが青いボックスで囲まれます。コード化された UI テストビルダーによって、選択したコントロールのデータが数秒で処理され、コントロールのプロパティが表示されます。 AutomationUId の名前が "buttonA" になっていることに注意してください。
コントロールのプロパティで、左上隅の矢印をクリックして UI コントロールマップを展開します。 UIStartButton1 が選択されていることを確認します。
ツールバーの [コントロールの UI コントロールマップへの追加] をクリックします。

ウィンドウの下部のステータスに、[選択されたコントロールが UI コントロールマップに追加されました] と表示され、操作が確認されます。
[UIMap – コード化された UI テストビルダー] で、[コードの生成] をクリックします。

[コード化された UI テストビルダー - コードの生成] が表示され、新しいメソッドは不要であり、UI コントロールマップの変更のみを目的としてコードが生成されることが通知されます。
[生成] をクリックします。
SimpleWPFApp.exe を閉じます。
[UIMap – コード化された UI テストビルダー] を閉じます。

[UIMap – コード化された UI テストビルダー] によって、数秒で UI コントロールマップの変更が処理されます。
ソリューションエクスプローラーで、UIMap.Designer.cs ファイルを開きます。
UIMap.Designer.cs ファイルで、生成された UIMainWindow コードクラスのコンストラクターの下にある Properties 領域を展開します。 public WpfButton UIStartButton1 プロパティが追加されていることを確認します。

UIStartButton1 プロパティの Search Criteria 領域を展開します。 SearchProperties が "buttonA" に設定されていることを確認します。

public WpfButton UIStartButton1
        {
            get
            {
                if ((this.mUIStartButton1 == null))
                {
                    this.mUIStartButton1 = new WpfButton(this);
                    #region Search Criteria
                    this.mUIStartButton1.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
                    this.mUIStartButton1.WindowTitles.Add("MainWindow");
                    #endregion
                }
                return this.mUIStartButton1;
            }
        }

これで、コード化された UI テストを変更して、新しくマップされたコントロールを使用できます。前の手順で説明したように、コード化された UI テストのメソッドまたはプロパティをオーバーライドする場合は、UIMap.cs ファイルで実行する必要があります。

UIMap.cs ファイルで、コンストラクターを追加し、値として "buttonA": を指定した AutomationID プロパティを使用するように、UIStartButton プロパティの SearchProperties プロパティを指定します。
```
public UIMap()
        {
            this.UIMainWindowWindow.UIStartButton.SearchProperties[WpfButton.PropertyNames.AutomationId] = "buttonA";
        }
```
[ビルド] メニューの [ソリューションのビルド] をクリックします。
テストビューで、[テスト名] 列の CodedUITestMethod1 を選択し、ツールバーの [選択範囲の実行] をクリックします。

今回は、コード化された UI テストでテストのすべてのステップが正常に完了します。 [テスト結果] ウィンドウに、[成功] というステータスが表示されます。

参照

次の方法で共有