チュートリアル: コード化された UI テストの作成、編集、および保守
このチュートリアルでは、簡単な Windows Presentation Foundation (WPF) アプリケーションを作成して、コード化された UI テストの作成、編集、および保守を行う方法について説明します。また、さまざまなタイミングの問題やコントロールのリファクタリングによって機能が損なわれたテストを修正するための解決策を示します。
必須コンポーネント
このチュートリアルに必要な条件は次のとおりです。
- Visual Studio の最終または Visual Studio Premium。
簡単な WPF アプリケーションの作成
[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。
[新しいプロジェクト] ダイアログ ボックスが表示されます。
[インストール済み] のペインで、[Visual C#] を展開し、[ウィンドウ] を選択します。
中央のペインの上にあるターゲット フレームワーク ドロップダウン リストが [.NET Framework 4.5] に設定されていることを確認します。
中央のペインで、[WPF アプリケーション] テンプレートをクリックします。
[名前] ボックスに「SimpleWPFApp」と入力します。
プロジェクトの保存先のフォルダーを選択します。[場所] ボックスにフォルダーの名前を入力します。
[OK] をクリックします。
Visual Studio の WPF デザイナーが開き、プロジェクトの MainWindow が表示されます。
ツールボックスが現在開いていない場合は開きます。[ビュー] メニューのを選択し、[ツールボックス] を選択します。
[すべての WPF コントロール] セクションの [Button]、[CheckBox]、[ProgressBar] の各コントロールをデザイン サーフェイスの MainWindow にドラッグします。
Button コントロールを選択します。[プロパティ] ウィンドウで、Content プロパティの値を Button から Start に変更します。
ProgressBar コントロールを選択します。[プロパティ] ウィンドウで、Maximum プロパティの値を 100 から 1000 に変更します。
Checkbox コントロールを選択します。[プロパティ] ウィンドウで、IsEnabled プロパティをクリアします。
.png "簡単な WPF アプリケーション")
選択イベントを追加するにはボタン コントロールをダブルクリックします。
MainWindow.xmal.cs が新しい button1_Choose イベントにカーソルを持つコード エディターに表示されます。
MainWindow クラスの先頭にデリゲートを追加します。このデリゲートはプログレス バーに使用されます。デリゲートを追加するには、次のコードを追加します。
private delegate void ProgressBarDelegate( System.Windows.DependencyProperty dp, Object value);button1_Choose のメソッドに次のコードを追加します:
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#] を展開し、[テスト] を選択します。
中央のペインで、[コード化された UI テスト プロジェクト] テンプレートを選択します。
[OK] をクリックします。
ソリューション エクスプローラーで、[CodedUITestProject1] という名前の新しいコード化された UI テスト プロジェクトがソリューションに追加されます。
[コード化された UI テストのコードの生成] ダイアログ ボックスが表示されます。
[操作の記録、UI マップの編集、またはアサーションの追加] オプションを選択し、[OK] を選択します。
UIMap –のコード化された UI テスト ビルダー が表示され、Visual Studio のウィンドウが最小化されています。
このダイアログ ボックスのオプションの詳細については、「コード化された UI テストの作成」を参照してください。
前に作成した SimpleWPFApp アプリケーションを見つけて実行します。既定では、アプリケーションは C:\Users\<ユーザー名>\Documents\Visual Studio 2012\Projects\SimpleWPFApp\SimpleWPFApp\bin\Debug\SimpleWPFApp.exe にあります。
SimpleWPFApp アプリケーションのデスクトップ ショートカットを作成します。SimpleWPFApp.exe を右クリックし、[コピー] をクリックします。デスクトップで右クリックし、[ショートカットの貼り付け] をクリックします。
.gif "ヒント")
ヒントアプリケーションのショートカットを使用するとアプリケーションをすばやく起動できるため、アプリケーションのコード化された UI テストを追加または変更しやすくなります。アプリケーション自体に移動する必要はありません。このチュートリアルでは、アプリケーションを再度実行する必要があります。
UIMap –のコード化された UI テスト ビルダーの [記録の開始] を選択します。数秒でコード化された UI テスト ビルダーが準備されます。
デスクトップ ショートカットを使用して、SimpleWPFApp.exe を実行します。
SimpleWPFApp で、[開始] を選択します。
数秒でプログレス バーが 100% になります。これで、チェック ボックス コントロールが有効になりました。
CheckBox コントロールのボックスをオンにします。
SimpleWPFApp アプリケーションを閉じます。
[UIMap -コード化された UI テスト ビルダーは、[コードの生成] を選択します。
メソッド名]ボックスに" SimpleAppTest "と入力し、[Add and Generate] を選択します。数秒でコード化された 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 コントロールが有効になるのを待ってからこの行に進むようにします。
.gif "Caution メモ")
注意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 ファイルに移動するテスト メソッドを選択します。移動すると、カスタム コード機能は容易になり、テスト コードが再コンパイルされてもコードは上書きされません。
コード化された UI テスト エディター ツール バーの [コードの移動] のボタンをクリックします。
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 ファイルで、デザイナーのボタン コントロールを選択します。
[プロパティ] ウィンドウの上部で、Button の横の button1 という値を選択し、この値を buttonA に変更します。
[ビルド] メニューの [ソリューションのビルド] をクリックします。
[テスト] のメニューで、を選択 [ウィンドウ] は、[テスト ビュー] を選択します。
で、[テスト名] の列の下のを選択します [CodedUITestMethod1] は、ツール バーの [選択範囲の実行] を選択します。
テストは失敗します。コード化された UI テストでは、UIMap で元は button1 としてマップされていたボタン コントロールを見つけることができないためです。このように、リファクタリングがコード化された UI テストに影響を及ぼす場合があります。
[テスト結果] ウィンドウで、失敗したテストを右クリックし、[テスト結果の詳細の表示] をクリックします。
[CodedUITestMethod1[結果]] が表示されます。
[エラーのスタック トレース] のセクションでは、[TestProject1.UIMpa.SimpleAppTest()] の横にある最初のリンクを選択します。
UIMap.Designer.cs ファイルが開きます。コードでエラー ポイントが強調表示されます。
// Choose '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 テストでテストのすべてのステップが正常に完了します。[テスト結果] ウィンドウに、[成功] というステータスが表示されます。
外部リソース
.gif "Ff977233.collapse_all(ja-jp,VS.110).gif")
ビデオ
.gif "ビデオへのリンク")
ラボの取得
MSDN の仮想ラボ: Visual Studio 2010 とともに、コード化された UI テストの作成の概要
FAQ
フォーラム
Studio の UI オートメーションのテスト (Visual CodedUI を含む)
参照
概念
コード化されたユーザー インターフェイス テストを使用したコードの検証
コード化された UI テストと操作の記録でサポートされている構成とプラットフォーム