コード化された UI テスト エディターを使用してコード化された UI テストを編集するEdit coded UI tests using the Coded UI Test Editor

コード化された UI テスト エディターを使用すると、コード化された UI テストを簡単に変更できます。The Coded UI Test Editor lets you easily modify your coded UI tests. コード化された UI テスト エディターを使用して、テスト メソッドや UI 操作のプロパティを検索、表示、および編集できます。Using the Coded UI Test Editor, you can locate, view, and edit the properties of your test methods and UI actions. また、対応するコントロールを表示および編集するための UI コントロール マップを使用できます。In addition, you can use the UI control map to view and edit their corresponding controls.

必要条件Requirements

  • Visual Studio EnterpriseVisual Studio Enterprise
  • コード化された UI テストのコンポーネントCoded UI test component

コード化された UI テスト エディターの機能Features of the Coded UI Test Editor

コード化された UI テスト エディターを使用することは、コード化された UI テスト メソッドのコードをコード エディターを使用して編集するよりも効率的です。Using the Coded UI Test Editor is quicker and more efficient than editing the code in your coded UI test methods using the Code Editor. コード化された UI テスト エディターでは、ツール バーとショートカット メニューを使用して、UI 操作とコントロールに関連付けられているプロパティ値をすばやく検出して修正することができます。With the Coded UI Test Editor, you can use the toolbar and shortcut menus to quickly locate and modify property values associated with UI actions and controls. たとえば、コード化された UI テスト エディターのツール バーを使用して、次のコマンドを実行できます。For example, you can use the Coded UI Test Editor's toolbar to perform the following commands:

UI テスト エディター

  1. 検索 : UI 操作とコントロールを見つけることができます。Find helps you locate UI actions and controls.

  2. 削除 : 不要な UI 操作を削除します。Delete removes unwanted UI actions.

  3. 名前の変更 : テスト メソッドとコントロールの名前を変更します。Rename changes the names for test methods and controls.

  4. プロパティ: 選択した項目の [プロパティ] ウィンドウが開きます。Properties opens the Properties window for the selected item.

  5. 新しいメソッドに分割 : UI 操作をモジュール化できます。Split into a new method lets you modularize the UI actions.

  6. コードの移動 : テスト メソッドにカスタム コードを追加します。Move Code adds custom code to your test methods.

  7. 前に遅延を挿入 : ミリ秒単位で指定された UI 操作の前に一時停止を追加します。Insert Delay Before adds a pause prior to a UI action, specified in milliseconds.

  8. UI コントロールの検索 : テスト対象のアプリケーションの UI におけるコントロールの位置を特定します。Locate the UI Control identifies the location of the control in the UI of application under test.

  9. すべてを検索: コントロール プロパティ、およびアプリケーションのコントロールに対すると重要な変更を検証します。Locate All helps you verify control property and significant changes to the application's controls.

コード化された UI テストの系列下にある UIMap.uitest ファイルを開くと、コード化された UI テスト エディターでコード化された UI テストが開きます。When you open the UIMap.uitest file affiliated with your coded UI test, the coded UI test opens in the Coded UI Test Editor. 次の手順では、エディターのツール バーとショートカット メニューを使用してテスト メソッド、UI 操作のプロパティ、コントロールを検索および編集する方法について説明します。The following procedures describe how you can then locate and edit your test methods, and properties for the UI actions, and controls using the editor's toolbar and shortcut menus.

コード化された UI テストを開くOpen a coded UI test

コード化された UI テスト エディターを使用して、Visual C# および Visual Basic ベースのコード化された UI テストを表示および編集できます。You can view and edit your Visual C# and Visual Basic-based coded UI test using the Coded UI Test Editor.

コード化された UI テスト ビルダーを使用したコンテキスト メニューの編集

ソリューション エクスプローラーで、UIMap.uitest のショートカット メニューを開き、[開く] をクリックします。In Solution Explorer, open the shortcut menu for UIMap.uitest and choose Open. コード化された UI テスト エディターに、コード化された UI テストが表示されます。The coded UI test is displayed in the Coded UI Test Editor. これで、コード化された UI テストの記録されたメソッド、操作、および対応するコントロールを表示および編集できるようになります。You can now view and edit the recorded methods, actions, and corresponding controls in the coded UI test.

ヒント

[UI 操作] ウィンドウでメソッド内にある UI 操作を選択すると、対応するコントロールが強調表示されます。When you select a UI action that is located in a method in the UI Actions pane, the corresponding control is highlighted. UI 操作またはコントロール プロパティも変更できます。You can also modify the UI action or the controls properties.

UI のアクションとコントロールのプロパティを変更するModify UI action and control properties

コード化された UI テスト エディターを使用すると、テスト メソッドですべての UI 操作をすばやく検索および表示できます。Using the Coded UI Test Editor, you can quickly locate and view all the UI actions in your test methods. エディターで UI 操作を選択すると、対応するコントロールが自動的に強調表示されます。When you select the UI action in the editor, the corresponding control is automatically highlighted. 同様に、コントロールを選択すると、関連付けられた UI 操作が強調表示されます。Likewise, if you select a control, the associated UI actions are highlighted. UI 操作またはコントロールを選択すると、[プロパティ] ウィンドウを使用して対応するプロパティを変更することが容易になります。When you select either a UI action or a control, it is then easy to use the Properties window to modify the properties that correspond with it.

UI アクションのプロパティ

UI 操作のプロパティを [UI 操作] ウィンドウで変更する場合は、プロパティを編集する対象の UI 操作を含むテスト メソッドを展開し、UI 操作を選択してから [プロパティ] ウィンドウを使用してプロパティを変更します。To modify the properties for a UI action, in the UI Action pane, expand the test method that contains a UI action that you want to edit the properties for, select the UI action, and then modify the properties using the Properties window.

たとえば、サーバーが使用できないときに "Web ページ 'http://Contoso1/default.aspx' に移動" というメッセージを表示する UI 操作が Web ブラウザーに関連付けられている場合は、URL を 'http://Contoso2/default.aspx' に変更できます。For example, if a server is unavailable, and you have a UI action associated with your Web browser that states Go to Web page 'http://Contoso1/default.aspx', you could change the URL to 'http://Contoso2/default.aspx'.

コントロールのプロパティ

コントロールのプロパティの変更は、UI 操作のプロパティの場合と同じ方法で実行します。Modifying the properties for a control is done in the same way as the UI actions. [UI コントロール マップ] ウィンドウで、編集するコントロールを選択し、[プロパティ] ウィンドウを使用してプロパティを変更します。In the UI Control Map pane, select the control that you want to edit and modify its properties using the Properties window.

たとえば、開発者がテスト対象のアプリケーションのソース コードでボタン コントロールの (ID) プロパティを "idSubmit" から "idLogin" に変更している可能性があるとします。For example, a developer might have changed the (ID) property on a button control in the source code for the application being tested from "idSubmit" to "idLogin." アプリケーションで (ID) プロパティを変更すると、コード化された UI テストでボタン コントロールを検索できずに失敗します。With the (ID) property changed in the application, the coded UI test will not be able to locate the button control and will fail. この場合、テスト担当者は、 [検索プロパティ] コレクションを開き、開発者がアプリケーションで使用した新しい値に合わせて Id プロパティを変更できます。In this case, the tester can open the Search Properties collection and change the Id property to match the new value that the developer used in the application. また、テスト担当者は、[フレンドリ名] プロパティの値を "Submit" から "Login" に変更することもできます。The tester could also change the Friendly Name property value from "Submit" to "Login." この変更を実行すると、コード化された UI テスト エディターでの関連付けられた UI 操作が "'Submit' ボタンをクリック" から "'Login' ボタンをクリック" に更新されます。By making this change, the associated UI action in the Coded UI Test Editor is updated from "Choose 'Submit' button" to "Choose 'Login' button."

変更が完了したら、Visual Studio のツール バーの [保存] をクリックすることで、UIMap.Designer ファイルに変更を保存します。After completing your modifications, save the changes to the UIMap.Designer file by choosing Save on the Visual Studio toolbar.

ヒントTips

  • [プロパティ] ウィンドウが表示されていない場合は、Alt + Enter キーを押すか、F4 キーを押します。If the Properties window is not displayed, press and hold Alt while you press Enter, or press F4.

  • 実行したプロパティの変更を元に戻すには、[編集] メニューの [元に戻す] を選択するか、Ctrl + Z キーを押します。To undo the property changes you made, select Undo from the Edit menu, or press Ctrl+Z.

  • コード化された UI テスト エディターのツール バーにある [検索] ボタンを使用すると、Visual Studio の検索と置換ツールを開くことができます。You can use the Find button in the Coded UI Test editor toolbar to open the Find and Replace tool in Visual Studio. そうすれば、検索コントロールを使用して、コード化された UI テスト エディターで UI 操作を検索できます。You can then use the Find control to locate a UI action in the Coded UI Test editor. たとえば、"'Login' ボタンをクリック" を検索できます。For example, you can try to find "Click 'Login' button." これは、大規模なテストの場合に便利です。This can be useful in large tests. コード化された UI テスト エディターでは検索と置換ツールの置換機能を使用できません。You cannot use the replace functionality in the Find and Replace tool in the Coded UI Test Editor. 詳細については、「 Finding and Replacing Text」の「検索コントロール」を参照してください。For more information, see Find control in Finding and Replacing Text.

  • テスト対象のアプリケーションの UI におけるコントロールの位置を表示するのが難しい場合があります。Sometimes, it can be difficult to visualize where controls are located in the UI of the application under test. コード化された UI テスト エディターの機能の 1 つとして、UI コントロール マップに一覧表示されているコントロールを選択し、テスト対象のアプリケーションにおけるそのコントロールの位置を表示することができます。One of the capabilities of the coded UI Test Editor is that you can select a control listed in the UI control map and view its location in the application under test. 詳細については、このトピックの後半に登場する「テスト対象のアプリケーションで UI コントロールを検索する」を参照してください。For more information, see Locating a UI Control in the application under Test located further below in this article.

  • 編集するコントロールを含むコンテナー コントロールを拡張する必要が生じる場合があります。It might be necessary to expand the container control that contains the control that you want to edit. 詳細については、このトピックの後半に登場する「コントロールとその子孫を検索する」を参照してください。For more information, see Locating a control and its descendants located further below in this article.

不要な UI 操作を削除するDelete unwanted UI actions

コード化された UI テストの不要な UI 操作を簡単に削除できます。You can easily remove unwanted UI actions in your coded UI test.

UI アクションの削除

[UI 操作] ウィンドウで、削除する UI 操作を含むテスト メソッドを展開します。In the UI Action pane, expand the test method that contains the UI action that you want to delete. UI 操作のショートカット メニューを開き、 [削除] をクリックします。Open the shortcut menu for the UI action and choose Delete.

テスト メソッドを 2 つの異なるメソッドに分割するSplit a test method into two separate methods

テスト メソッドを分割し、UI 操作を調整またはモジュール化することができます。You can split a test method to refine or to modularize the UI actions. たとえば、テストには 2 個のコンテナー コントロールの UI 操作を含む単一のテスト メソッドが存在する場合があります。For example, your test might have a single test method with UI actions in two container controls. UI 操作は、1 個のコンテナーで対応する 2 種類のメソッドにおいてより適切にモジュール化される可能性があります。The UI actions might be better modularized in two methods that correspond with one container.

テスト メソッドを分割する

2 つのテスト メソッド

[UI 操作] ウィンドウで、2 種類の異なるメソッドに分割するテスト メソッドを展開し、新しいテスト メソッドを開始する UI 操作を選択します。In the UI Action pane, expand the test method that you want to split into two separate methods and select the UI action where you want the new test method to begin. UI 操作のショートカット メニューを開いて [新しいメソッドに分割] をクリックするか、コード化された UI テスト エディターのツール バーにある [新しいメソッドに分割] をクリックします。Either open the shortcut menu for the UI action and then choose Split into a new method, or choose the Split into a new method button on the Coded UI Test Editor toolbar. 新しいテスト メソッドが [UI 操作] ウィンドウに表示されます。The new test method appears in the UI Actions pane. これには、分割を指定したアクションを先頭とする UI 操作が含まれています。It contains the UI actions starting from the action where you specified the split.

メソッドの分割が完了したら、Visual Studio ツール バーの [保存] をクリックし、UIMap.Designer ファイルに変更を保存します。After you are done splitting the method, save the changes to the UIMap.Designer file by choosing Save on the Visual Studio toolbar.

警告

メソッドを分割する際は、既存のメソッドを呼び出すコードを変更し、含まれている UI 操作を必要とする場合に作成しようとしている新しいメソッドも呼び出すコードにする必要があります。If you split a method, you must modify any code that calls the existing method to also call the new method you are about to create if you still want those UI actions included. メソッドを分割すると、Microsoft Visual Studio のダイアログ ボックスが表示されます。When you split a method, a Microsoft Visual Studio dialog box is displayed. 既存のメソッドを呼び出すコードを変更し、作成しようとしている新しいメソッドも呼び出すコードにする必要があることを示す警告が表示されます。It warns you that you must modify any code that calls the existing method to also call the new method you are about to create. [はい] をクリックします。Choose Yes.

ヒントTips

  • 分割を元に戻すには、[編集] メニューの [元に戻す] をクリックするか、Ctrl + Z キーを押します。To undo the split, choose Undo from the Edit menu, or press Ctrl+Z.

  • 新しいメソッドの名前を変更できます。You can rename the new method. [UI 操作] ウィンドウでメソッドを選択し、コード化された UI テスト エディターのツール バーにある [名前の変更] をクリックします。Select it in the UI Actions pane and choose the Rename button in the Coded UI Test Editor toolbar.

    - または --or-

    新しいテスト メソッドのショートカット メニューを開き、 [名前の変更] をクリックします。Open the shortcut menu for the new test method and choose Rename.

    Microsoft Visual Studio のダイアログ ボックスが表示されます。A Microsoft Visual Studio dialog box is displayed. メソッドを参照しているコードを変更する必要があることを示す警告が表示されます。It warns you that you must modify any code that references the method. [はい] をクリックします。Choose Yes.

カスタマイズを容易にするためにテスト メソッドを UIMap ファイルへ移動するMove a test method to the UIMap File to facilitate customization

コード化された UI テストのテスト メソッドにカスタム コードが必要であることが判明した場合は、そのテスト メソッドを UIMap.cs ファイルまたは UIMap.vb ファイルに移動する必要があります。If you determine that one of your test methods in your coded UI test requires custom code, you must move it into either the UIMap.cs or UIMap.vb file. それ以外の場合、コード化された UI テストが再コンパイルされるたびにコードが上書きされます。Otherwise, your code will be overwritten whenever the coded UI test is recompiled. メソッドを移動しない場合は、テストが再コンパイルするたびにカスタム コードが上書きされます。If you do not move the method, your custom code will be overwritten each time the test is recompiled.

[UI 操作] ウィンドウで、テスト コードの再コンパイル時に上書きされないカスタム コード機能を容易にするために、UIMap.cs ファイルまたは UIMap.vb ファイルに移動するテスト メソッドを選択します。In the UI Action pane, select the test method that you want to move to the UIMap.cs or UIMap.vb file to facilitate custom code functionality that won't be overwritten when the test code is recompiled. 次に、コード化された UI テスト エディターのツール バーにある [コードの移動] をクリックするか、テスト メソッドのショートカット メニューを開いて [コードの移動] をクリックします。Next, choose the Move Code button on the Coded UI Test Editor toolbar, or open the shortcut menu for the test method and choose Move Code. テスト メソッドが UIMap.uitest ファイルから削除され、[UI Actions] (UI 操作) ペインに表示されなくなります。The test method is removed from the UIMap.uitest file and no longer is displayed in the UI Actions pane. 移動したテスト ファイルを編集するには、ソリューション エクスプローラーから UIMap.cs ファイルまたは UIMap.vb ファイルを開きます。To edit the test file that you moved, open the UIMap.cs or the UIMap.vb file from Solution Explorer.

メソッドの移動が完了したら、Visual Studio ツール バーの [保存] をクリックし、UIMap.Designer ファイルに変更を保存します。After you are done moving the method, save the changes to the UIMap.Designer file by choosing Save on the Visual Studio toolbar.

警告

メソッドを移動すると、コード化された UI テスト エディターを使用してそのメソッドを編集できなくなります。Once you have moved a method, you can no longer edit it using the Coded UI Test Editor. カスタム コードを追加し、コード エディターを使って管理する必要があります。You must add your custom code and maintain it using the Code Editor. メソッドを移動すると、Microsoft Visual Studio のダイアログ ボックスが表示されます。When you move a method, a Microsoft Visual Studio dialog box is displayed. メソッドが UIMap.uitest ファイルから UIMap.cs ファイルまたは UIMap.vb ファイルに移動すること、およびコード化された UI テスト エディターを使用してメソッドを編集できなくなることを示す警告が表示されます。It warns you that the method will be moved from the UIMap.uitest file to the UIMap.cs or UIMap.vb file and that you will no longer be able to edit the method using the Coded UI Test Editor. [はい] をクリックします。Choose Yes.

ヒントTips

移動を元に戻すには、[編集] メニューの [元に戻す] をクリックするか、Ctrl + Z キーを押します。To undo the move, select Undo from the Edit menu, or press Ctrl+Z. ただし、その場合は UIMap.cs ファイルまたは UIMap.vb ファイルからコードを手動で削除する必要があります。However, you must then manually remove the code from the UIMap.cs or UIMap.vb file.

テスト対象のアプリケーションで UI コントロールを探すLocate a UI Control in the application under test

テスト対象のアプリケーションの UI におけるコントロールの位置を表示するのが難しい場合があります。Sometimes, it can be difficult to visualize where controls are located in the UI of the application under test. コード化された UI テスト エディターの機能の 1 つとして、UI コントロール マップに一覧表示されているコントロールを選択し、テスト対象のアプリケーションにおけるそのコントロールの位置を表示することができます。One of the capabilities of the coded UI Test Editor is that you can select a control listed in the UI control map and view its location in the application under test. テスト対象のアプリケーションで [UI コントロールの検索] 機能を使用すると、コントロールに対して行った検索プロパティの変更を確認することもできます。Using the Locate the UI Control feature on the application under test can also be used to verify search property modifications you have made to a control.

UI コントロールの検索

テスト中のアプリケーションで検索されたコントロール

[UI コントロール マップ] ウィンドウで、テストに関連付けられたアプリケーション内で検索するコントロールを選択します。In the UI Control Map pane, select the control that you want to locate in the application associated with the test. 次に、コントロールのショートカット メニューを開き、 [UI コントロールの検索] をクリックします。Next, open the shortcut menu for the control and then choose Locate the UI Control. テストされているアプリケーションでは、該当するコントロールは青色の枠線で示されます。In the application that is being tested, the control is designated with a blue border.

注意

UI コントロールを検索する前に、テストに関連付けられているアプリケーションが実行されていることを確認してください。Before you locate a UI control, verify that the application associated with the test is running.

ヒントTips

[すべてを検索] オプションを使用すると、コンテナーにあるすべてのコントロールを正しく配置できることを確認できます。You can use the Locate All option to verify that all the controls under a container can be correctly located. このオプションについては、次のセクションで説明します。This option is described in the next section.

コントロールとその子孫を探すLocate a control and its descendants

コンテナーにあるすべてのコントロールをテスト対象のアプリケーションの UI に正しく配置できることを確認できます。You can verify that all the controls under a container can be correctly located in the UI of the application under test. これは、コンテナーに対して行った検索プロパティの変更を確認するときに便利です。This can be helpful in verifying search property changes you may have made on the container. さらに、テスト対象のアプリケーションの UI を大幅に変更した場合に、既存のコントロール検索プロパティが正しいことを確認できます。Additionally, if there have been significant changes in the UI of the application under test, you can validate that the existing control search properties are still correct.

すべての下位コントロールを検索

検出されたすべてのコントロール

[UI コントロール マップ] ウィンドウで、すべての子孫を検索して表示する対象のコンテナー コントロールを選択します。In the UI Control Map pane, select the container control that you want to locate and view all the descendants for. 次に、コントロールのショートカット メニューを開き、 [すべてを検索] をクリックします。Next, open the shortcut menu for the control and choose Locate All. コンテナー コントロールとそのすべての子孫のコントロールは、コード化された UI テスト エディターにおいて、緑色のチェック マークまたは赤色の "X" でマークされます。The container control, and all its descendant controls, are marked in the Coded UI Test Editor with either a green check mark or a red 'X'. これらのマークを見れば、テスト対象のアプリケーションでコントロールが正しく配置されているかどうかを確認できます。These marks let you know if the controls were successfully located in the application under test.

注意

UI コントロールを検索する前に、テストに関連付けられているアプリケーションが実行されていることを確認してください。Prior to locating the UI controls, verify that the application associated with the test is running.

UI アクションの前に遅延を挿入するInsert a delay before a UI action

ウィンドウの表示やプログレス バーの非表示などの特定のイベントが発生するまでテストを待機させる必要がある場合があります。Sometimes, you might want to make the test wait for certain events to occur, such as a window to appear, the progress bar to disappear, and so on. コード化された UI テスト エディターを使用し、UI 操作の前に遅延を挿入することで、この処理を実行できます。Using the Coded UI Test Editor, you can accomplish this by inserting a delay before a UI action. 遅延する秒数を指定できます。You can specify how many seconds you want the delay to be.

UI アクションの前への遅延の挿入

5 秒間の遅延の追加

[UI 操作] ウィンドウで、事前に遅延を挿入する対象の UI 操作を含むテスト メソッドを展開します。In the UI Action pane, expand the test method that contains the UI action that you want to insert a delay before. UI 操作を選択します。Select the UI action. 次に、UI 操作のショートカット メニューを開き、 [前に遅延を挿入] をクリックします。Next, open the shortcut menu for the UI action and choose Insert Delay Before. 選択した UI 操作の前に遅延が挿入されて強調表示され、 "操作間のユーザー遅延として 1 秒待機します" というテキストが示されます。A delay is inserted and highlighted before the selected UI action with the following text: Wait for 1 seconds for user delay between actions. [プロパティ] ウィンドウで、 [遅延] プロパティの値を目的のミリ秒数に変更します。In the Properties window, change the value for the Delay property to the desired number of milliseconds.

遅延の挿入が完了したら、Visual Studio ツール バーの [保存] をクリックすることで、UIMap.Designer ファイルに変更を保存します。After you are done inserting the delay, save the changes to the UIMap.Designer file by choosing Save on the Visual Studio toolbar.

UI 操作の前に特定のコントロールを使用できるようにする必要がある場合は、適切な UITestControl.WaitForControlXXX() メソッドを使用してテスト メソッドにカスタム コードを追加することを検討してください。If you need to ensure that a specific control is available before a UI action, you should consider adding custom code to your test method using the appropriate UITestControl.WaitForControlXXX() method. 詳細については、「再生中に特定のイベントを待機するようにコード化された UI テストを設定」を参照してください。For more information, see Making Coded UI Tests Wait For Specific Events During Playback.

関連項目See also