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

[アーティクル]
06/08/2015

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

必須コンポーネント

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

Visual Studio Ultimate または Visual Studio Premium。

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

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

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

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

コードエディターに MainWindow.xmal.cs が表示され、新しい button1_Click メソッドにカーソルが置かれます。

MainWindow クラスの先頭にデリゲートを追加します。このデリゲートはプログレスバーに使用されます。デリゲートを追加するには、次のコードを追加します。

public partial class MainWindow : Window
{
        private delegate void ProgressBarDelegate(System.Windows.DependencyProperty dp, Object value);        

    public MainWindow()
    {

        InitializeComponent();
    }

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

private void button1_Click(object sender, RoutedEventArgs e)
{
    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 テストの作成と実行

前に作成した SimpleWPFApp アプリケーションを見つけます。既定では、アプリケーションは C:\Users\<username>\Documents\Visual Studio 2013\Projects\SimpleWPFApp\SimpleWPFApp\bin\Debug\SimpleWPFApp.exe にあります。

SimpleWPFApp アプリケーションのデスクトップショートカットを作成します。SimpleWPFApp.exe を右クリックし、[コピー] をクリックします。デスクトップで右クリックし、[ショートカットの貼り付け] をクリックします。

ヒント
アプリケーションのショートカットを使用するとアプリケーションをすばやく起動できるため、アプリケーションのコード化された UI テストを追加または変更しやすくなります。

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

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

ソリューションエクスプローラーで、CodedUITestProject1 という名前の新しいコード化された UI テストプロジェクトがソリューションに追加されます。

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

[UIMap - コード化された UI テストビルダー] が表示され、Visual Studio ウィンドウは最小化されます。

ダイアログボックスのオプションの詳細については、「コード化された UI テストを作成する」を参照してください。

[UIMap – コード化された UI テストビルダー] で [記録の開始] を選択します。

記録の開始

受信メールを処理する場合など、必要に応じて記録を一時停止できます。

レコーディングの一時停止

注意
デスクトップ上で実行されるすべてのアクションが記録されます。機密データが記録される可能性のあるアクションを実行する場合には、記録を一時停止します。

デスクトップショートカットを使用して、SimpleWPFApp を起動します。

前と同じく、チェックボックスコントロールが無効にされることに注意してください。
SimpleWPFApp で [Start] を選択します。

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

コードエディターに CodedUITest1.cs ファイルが表示されます。
プロジェクトを保存します。

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

[テスト] メニューの [ウィンドウ] を選択し、[テストエクスプローラー] を選択します。
[ビルド] メニューの [ソリューションのビルド] をクリックします。
CodedUITest1.cs ファイルで、CodedUITestMethod メソッドを見つけて右クリックし、[テストの実行] をクリックします。または、テストエクスプローラーでテストを実行します。

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

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

テストエクスプローラーウィンドウで、失敗したテストを選択し、[スタックトレース] セクションで [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 ファイルの元のメソッドへの参照を削除し、変更したメソッド名に置き換える必要があります。

UIMap.Designer.cs ファイルは変更しないでください。UIMapDesigner.cs ファイルでコードを変更しても、[UIMap - コード化された UI テストビルダー] を使用してコードを生成するたびに変更が上書きされます。記録されたメソッドを変更する必要がある場合は、メソッドを UIMap.cs ファイルにコピーし、メソッド名を変更する必要があります。UIMap.cs ファイルを使用すると、UIMapDesigner.cs ファイルのメソッドやプロパティをオーバーライドできます。Coded UITest.cs ファイルの元のメソッドへの参照を削除し、変更したメソッド名に置き換える必要があります。

ソリューションエクスプローラーで、コード化された UI テストプロジェクトの UIMap.uitest を探します。
UIMap.uitest のショートカットメニューを開き、[開く] を選択します。

コード化された UI テストエディターに、コード化された UI テストが表示されます。これで、コード化された UI テストを表示および編集できます。
[UI Action] (UI 操作) ペインで、UIMap.cs または UIMap.vb ファイルに移動するテストメソッド (SimpleAppTest) を選択します。移動すると、カスタムコード機能は容易になり、テストコードが再コンパイルされてもコードは上書きされません。
コード化された UI テストエディターのツールバーにある [Move Code] (コードの移動) をクリックします。
Microsoft Visual Studio のダイアログボックスが表示されます。警告で、メソッドが UIMap.uitest ファイルから UIMap.cs ファイルへ移動すること、およびコード化された UI テストエディターを使用してメソッドを編集できなくなることが表示されます。[はい] をクリックします。

テストメソッドが UIMap.uitest ファイルから削除され、[UI Actions] (UI 操作) ペインに表示されなくなります。移動したテストファイルを編集するには、ソリューションエクスプローラーから UIMap.cs ファイルを開きます。

Visual Studio ツールバーの [保存] を選択します。

テストメソッドの更新内容が UIMap.Designer ファイルに保存されます。

注意
メソッドを移動すると、コード化された UI テストエディターを使用してそのメソッドを編集できなくなります。カスタムコードを追加し、コードエディターを使って管理する必要があります。

メソッド名を 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 ファイルで、デザイナーのボタンコントロールを選択します。
[プロパティ] ウィンドウの上部にある [名前] プロパティの値を button1 から buttonA に変更します。
[ビルド] メニューの [ソリューションのビルド] をクリックします。
テストエクスプローラーで、[CodedUITestMethod1] を実行します。

テストは失敗します。コード化された UI テストでは、UIMap で元は button1 としてマップされていたボタンコントロールを見つけることができないためです。このように、リファクタリングがコード化された UI テストに影響を及ぼす場合があります。
テストエクスプローラーウィンドウの [スタックトレース] セクションで、[UIMpa.ModifiedSimpleAppTest()] の横にある最初のリンクを選択します。

UIMap.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 ファイルで、UIStartButton1 プロパティを見つけます。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 テストでテストのすべてのステップが正常に完了します。[テスト結果] ウィンドウに、[成功] というステータスが表示されます。