複数の UI マップでの大規模アプリケーションのテストTesting a Large Application with Multiple UI Maps

このトピックでは、複数の UI マップを使って大規模なアプリケーションをテストする際に、コード化された UI テストを使用する方法を説明します。This topic discusses how to use coded UI tests when you are testing a large application by using multiple UI maps.


  • Visual Studio EnterpriseVisual Studio Enterprise

    新しいコード化された UI テストを作成すると、Visual Studio テスト フレームワークによってテスト用のコードが生成されます。既定では、このコードは Microsoft.VisualStudio.TestTools.UITest.Common.UIMap.UIMap クラスに生成されます。When you create a new coded UI test, the Visual Studio testing framework generates code for the test by default in a Microsoft.VisualStudio.TestTools.UITest.Common.UIMap.UIMap class. コード化された UI テストを記録する方法の詳細については、「コード化された UI テストを作成する」および「コード化された UI テストの構造」を参照してください。For more information about how to record coded UI tests, see Creating Coded UI Tests and Anatomy of a Coded UI Test.

    UI マップに対して生成されるコードには、テストで操作する各オブジェクトに対応するクラスが含まれます。The generated code for the UI Map contains a class for each object that the test interacts with. 生成されるメソッドごとに、そのメソッドに固有のメソッド パラメーターのコンパニオン クラスが生成されます。For each generated method, a companion class for method parameters is generated specifically for that method. アプリケーションで多数のオブジェクト、ページ、フォーム、およびコントロールが使用されていると、UI マップがかなりの大きさになる場合があります。If there are a large number of objects, pages, and forms and controls in your application, the UI Map can grow very large. また、複数のテスト担当者で作業する場合、単一の大きな UI マップ ファイルでは、アプリケーションを扱いきれなくなります。Also, if several people are working on tests, the application becomes unwieldy with a single large UI Map file.

    複数の UI マップ ファイルを使用すると、次のような利点があります。Using multiple UI Map files can provide the following benefits:

  • 各マップを、アプリケーションの論理的なサブセットに関連付けることができます。Each map can be associated with a logical subset of the application. このようにすると、変更を管理しやすくなります。This makes changes easier to manage.

  • 各テスト担当者が、それぞれアプリケーションの特定のセクションに取り組んで、アプリケーションの他のセクションで作業するテスト担当者に干渉することなく担当のコードをチェックインできます。Each tester can work on a section of the application and check in their code without interfering with other testers working on other sections of the application.

  • アプリケーション UI への追加をインクリメンタル方式で行えるため、UI の他の部分のテストに与える影響が最小限になります。Additions to the application UI can be scaled incrementally with minimal effect on tests for other parts of the UI.

複数の UI マップが必要な場合Do you need multiple UI Maps?

次のような場合には、それぞれに複数の UI マップを作成してください。Create multiple UI Maps in each of these types of situations:

  • 互いに関連して論理演算を実行する複雑な複合 UI コントロールのセットが複数ある場合 (Web サイトでの登録ページや、買い物カゴの購入ページなど)。Several complex sets of composite UI controls that together perform a logical operation, such as a registration page in a Web site, or the purchase page of a shopping cart.

  • アプリケーションのさまざまな時点でアクセスする、独立したコントロールのセットがある場合 (複数の操作ページからなるウィザードなど)An independent set of controls that are accessed from various points of the application, such as a wizard with several pages of operations. ウィザードのそれぞれのページが非常に複雑な場合には、ページごとに個別の UI マップを作成することもできます。If each page of a wizard is especially complex, you could create separate UI Maps for each page.

複数の UI マップの追加Adding Multiple UI Maps

コード化された UI テスト プロジェクトに UI マップを追加するにはTo add a UI Map to your coded UI test project

  1. ソリューション エクスプローラーで、コード化された UI テスト プロジェクト内にすべての UI マップを格納するフォルダーを作成します。それには、コード化された UI テスト プロジェクト ファイルを右クリックし、[追加] をポイントして、[新しいフォルダー] を選択します。In Solution Explorer, to create a folder in your coded UI test project to store all the UI Maps, right-click the coded UI test project file, point to Add and then choose New Folder. たとえば、UIMaps という名前を付けます。For example, you could name it UIMaps.

    コード化された UI テスト プロジェクトの下に、新しいフォルダーが表示されます。The new folder is displayed under the coded UI test project.

  2. UIMaps フォルダーを右クリックし、[追加] をポイントして、[新しい項目] をクリックします。Right-click the UIMaps folder, point to Add, and then choose New Item.

    [新しい項目の追加] ダイアログ ボックスが表示されます。The Add New Item dialog box is displayed.


    新しいコード化された UI テスト マップを追加するには、コード化されたテスト プロジェクト内で操作する必要があります。You must be in a coded UI test project to add a new coded UI test map.

  3. リストから [コード化された UI テスト マップ] を選択します。Select Coded UI Test Map from the list.

    [名前] ボックスに、新しい UI マップの名前を入力します。In the Name box, enter a name for the new UI Map. マップが表すコンポーネントまたはページの名前を使用してください (例: HomePageMap)。Use the name of the component or page that the map will represent, for example, HomePageMap.

  4. [追加] をクリックします。Choose Add.

    Visual Studio ウィンドウが最小化されて、[コード化された UI テスト ビルダー] ダイアログ ボックスが表示されます。The Visual Studio window minimizes and the Coded UI Test Builder dialog box is displayed.

  5. 最初のメソッドのアクションを記録して、[コードの生成] を選択します。Record the actions for the first method and choose Generate Code.

  6. 最初のコンポーネントまたはページのすべてのアクションおよびアサーションを記録して、メソッド別にグループ化します。この作業が完了したら、[コード化された UI テスト ビルダー] ダイアログ ボックスを閉じます。After you have recorded all actions and assertions for the first component or page and grouped them into methods, close the Coded UI Test Builder dialog box.

  7. UI マップの作成を続けます。Continue to create UI Maps. アクションとアサーションを記録し、各コンポーネントのメソッド別にグループ化した後、コードを生成します。Record the actions and assertions, group them into methods for each component, and then generate the code.

    多くの場合、アプリケーションの最上位レベルのウィンドウは、すべてのウィザード、フォーム、ページで共有されます。In many cases, the top level window of your application remains constant for all wizards, forms, and pages. 各 UI マップに、最上位レベルのウィンドウに対応するクラスがありますが、通常は、いずれのマップも同じ最上位レベルのウィンドウ (アプリケーションの全コンポーネントが実行されるウィンドウ) を参照しているはずです。Although each UI Map has a class for the top level window, all maps are probably referring to the same top level window within which all components of your application run. コード化された UI テストでは、最上位レベルのウィンドウから下に向かって、階層的にコントロールを検索します。そのため、複雑なアプリケーションでは、実際の最上位レベルのウィンドウが、すべての UI マップで複製される可能性があります。Coded UI tests search for controls hierarchically from the top down, starting from the top level window, so in a complex application, the real top level window could be duplicated in every UI Map. 実際の最上位レベルのウィンドウが複製されていると、そのウィンドウが変更された場合、そのウィンドウが複製されている UI マップごとに変更を繰り返さなければなりません。If the real top level window is duplicated, multiple modifications will result if that window changes. したがって、UI マップを切り替えるときにパフォーマンスの問題が発生する可能性があります。This could cause performance problems when you switch between UI Maps.

    この影響を最小限に抑えるには、UI マップの新しい最上位レベルのウィンドウが、メインの最上位レベルのウィンドウと同じになるように、CopyFrom() メソッドを使用することができます。To minimize this effect, you can use the CopyFrom() method to make sure that the new top level window in that UI Map is the same as the main top level window.


この例は、さまざまな UI マップで生成されるクラスによって表される各コンポーネントとその子コントロールにアクセスするユーティリティ クラスの一部です。The following example is part of a utility class that provides access to each component and their child controls which are represented by the classes generated in the various UI Maps.

この例の Contoso という名前の Web アプリケーションには、ホーム ページ、製品ページ、買い物カゴ ページがあります。For this example, a Web application named Contoso has a Home Page, a Product Page, and a Shopping Cart Page. これらのページのそれぞれが、同じ最上位レベルのウィンドウ (ブラウザー ウィンドウ) を共有しています。Each of these pages share a common top level window which is the browser window. ページごとに UI マップがあります。ユーティリティ クラスのコードは以下のようになります。There is a UI Map for each page and the utility class has code similar to the following:

using ContosoProject.UIMaps;
using ContosoProject.UIMaps.HomePageClasses;
using ContosoProject.UIMaps.ProductPageClasses;
using ContosoProject.UIMaps.ShoppingCartClasses;

namespace ContosoProject
    public class TestRunUtility
        // Private fields for the properties
        private HomePage homePage = null;
        private ProductPage productPage = null;
        private ShoppingCart shoppingCart = null;

        public TestRunUtility()
            homePage = new HomePage();

        // Properties that get each UI Map
        public HomePage HomePage
            get { return homePage; }
            set { homePage = value; }

        // Gets the ProductPage from the ProductPageMap.
        public ProductPage ProductPageObject
                if (productPage == null)
                    // Instantiate a new page from the UI Map classes
                    productPage = new ProductPage();

                    // Since the Product Page and Home Page both use
                    // the same browser page as the top level window,
                    // get the top level window properties from the
                    // Home Page.
                return productPage;

    // Continue to create properties for each page, getting the
    // page object from the corresponding UI Map and copying the
    // top level window properties from the Home Page.

関連項目See also