コード化された UI テストを使用して Windows UWP アプリをテストするTest Windows UWP Apps with Coded UI Tests

このチュートリアルでは、UWP アプリと XAML ベースの 8.1 アプリの UI テストを作成します。Use this walkthrough for creating UI tests for UWP apps and XAML-based 8.1 apps.

簡単な UWP アプリの作成Create a simple UWP app

  1. XAML ベースの UWP アプリ用のコード化された UI テストを実行する場合は、 各コントロールを識別する一意のオートメーション プロパティを設定する必要があります。If you want to run coded UI tests for your XAML-based UWP app, you must set a unique automation property that identifies each control.

    [ツール] メニューの [オプション] をポイントし、 [テキスト エディター][XAML][その他]の順に選択します。On the Tools menu, point to Options and then choose Text Editor, then XAML, and finally Miscellaneous.

    チェック ボックスをオンにして、対話要素の作成時に自動的に名前を付けます。Select the check box to automatically name interactive elements on creation.

    その他の XAML オプションXAML Miscellaneous options

  2. Visual C# または Visual Basic テンプレートを使用して、空の XAML ベースの UWP アプリ用の新しいプロジェクトを作成します。Create a new project for a blank XAML based UWP app using either Visual C# or Visual Basic template.

    アプリ (XAML) を作成するCreate a App (XAML)

  3. ソリューション エクスプローラーで、MainPage.xaml を開きます。In Solution Explorer, open MainPage.xaml. ツールボックスから、ボタン コントロールとテキスト ボックス コントロールをデザイン サーフェイスにドラッグします。From the Toolbox, drag a button control and a textbox control to the design surface.

    UWP アプリをデザインするDesign the UWP app

  4. ボタン コントロールをダブルクリックし、次のコードを追加します。Double-click the button control and add the following code:

    private void button_Click_1(object sender, RoutedEventArgs e)  
    {  
        this.textBox.Text = this.button.Name;  
    }  
    
    Public NotInheritable Class MainPage  
        Inherits Page  
    
        Private Sub button_Click(sender As Object, e As RoutedEventArgs) Handles Button.Click  
            Me.textBox.Text = Me.button.Name  
        End Sub  
    End Class  
    
  5. F5 キーを押して UWP アプリを実行します。Press F5 to run your UWP app.

UWP アプリのコード化された UI テストの作成と実行Create and run a coded UI test for the UWP app

ユニバーサル Windows プラットフォーム (UWP) アプリ用のコード化された UI テストは、どのようにして作成できますか?How do I create coded UI tests for Universal Windows Platform (UWP) apps?

  1. UWP アプリの新しいコード化された UI テスト プロジェクトを作成します。Create a new coded UI test project for the UWP app.

    新しいコード化された UI テスト プロジェクト (UWP アプリ)New coded UI tet project (UWP apps)

  2. 十字線ツールを使用して UI マップを編集することを選択します。Choose to edit the UI map using the cross-hair tool.

    [UI マップの編集またはアサーションの追加] を選択するChoose edit UI map or add assertions

  3. コード化された UI テスト ビルダーで十字線ツールを使用してアプリ タイルを選択し、 [AutomationId] を右クリックして、 [値をクリップボードにコピー]を選択します。Use the cross-hair tool in the Coded UI Test Builder to select the app tile, right-click AutomationId and choose Copy Value to Clipboard. クリップボード内の値は、テスト用のアプリを起動する操作を記述するために後で使用されます。The value in the clipboard will be used later for writing action to launch the app for testing.

    AutomationId をクリップボードにコピーするCopy AutomationId to clipboard

  4. 実行中の UWP アプリで、十字線ツールを使用してボタン コントロールとテキスト ボックス コントロールを選択します。In the running UWP app, use the cross-hair tool to select the button control and the textbox control. 各コントロールを追加した後、コード化された UI テスト ビルダーのツール バーの [コントロールの UI コントロール マップへの追加] を選択します。After adding each control, choose the Add control to UI control map button in the Coded UI Test Builder toolbar.

    UI マップにコントロールを追加するAdd control to UI map

  5. コード化された UI テスト ビルダーのツール バーの [コードの生成] ボタンを選択し、 [生成] を選択して、UI コントロール マップへの変更のコードを作成します。Choose the Generate Code button in the Coded UI Test Builder toolbar and then choose Generate to create code for changes to the UI control map.

    UI マップのコードを生成するGenerate code for the UI map

  6. テキスト ボックスの値を設定するボタンを選択します。Choose the button to set a value in the textbox.

    [ボタン コントロール] をクリックして TextBox 値を設定するClick button control to set textbox value

  7. 十字線ツールを使用してテキスト ボックス コントロールを選択し、 [Text] プロパティを選択します。Use the cross-hair tool to select the textbox control, and then select the Text property.

    [テキスト] プロパティを選択するSelect the Text property

  8. アサーションを追加します。Add an assertion. これは、値が正しいことを確認するためにテストで使用されます。It will be used in the test to verify that the value is correct.

    十字形で [TextBox] を選択し、アサーションを追加するChoose testbox with cross-hair and add assertion

  9. アサーションのコードを追加および生成します。Add and generate code for the assertion.

    Textbox アサーションのコードを生成するGenerate code for textbox assertion

  10. Visual C#Visual C#

    ソリューション エクスプローラーで、UIMap.Designer.cs ファイルを開いて、Assert メソッドとコントロール用に追加されたコードを表示します。In Solution Explorer, open the UIMap.Designer.cs file to view the added code for the assert method and the controls.

    Visual BasicVisual Basic

    ソリューション エクスプローラーで、CodedUITest1.vb ファイルを開き、CodedUITestMethod1() テスト メソッドのコードでアサーション メソッド (自動的に追加された Me.UIMap.AssertMethod1() ) への呼び出しを右クリックし、 [定義へ移動]を選択します。In Solution Explorer, open the CodedUITest1.vb file and then in the CodedUITestMethod1() test method code, right-click the call to the assertion method that was automatically added Me.UIMap.AssertMethod1() and choose Go To Definition. これにより、コード エディターで UIMap.Designer.vb ファイルが開かれ、Assert メソッドとコントロール用に追加されたコードが表示されます。This will open the UIMap.Designer.vb file in the code editor so you can view the view the added code for the assert method and the controls.

    警告

    UIMap.designer.cs または UIMap.Designer.vb ファイルを直接変更しないでください。Do not modify the UIMap.designer.cs or UIMap.Designer.vb file directly. そうすると、ファイルへの変更はテストが生成されるたびにオーバーライドされます。If you do this, the changes to the file will be overwritten each time the test is generated.

    Assert メソッドAssert method

    public void AssertMethod1()  
    {  
        #region Variable Declarations  
        XamlEdit uITextBoxEdit = this.UIApp1Window.UITextBoxEdit;  
        #endregion  
    
        // Verify that the 'Text' property of 'textBox' text box equals 'button'  
        Assert.AreEqual(this.AssertMethod3ExpectedValues.UITextBoxEditText, uITextBoxEdit.Text);  
    }  
    
    Public Sub AssertMethod1()  
        Dim uITextBoxEdit As XamlEdit = Me.UIApp2Window.UITextBoxEdit  
    
        'Verify that the 'Text' property of 'textBox' text box equals 'button'  
        Assert.AreEqual(Me.AssertMethod1ExpectedValues.UITextBoxEditText, uITextBoxEdit.Text)  
    End Sub  
    

    コントロールControls

    #region Properties  
    public XamlButton UIButtonButton  
    {  
        get  
        {  
            if ((this.mUIButtonButton == null))  
            {  
                this.mUIButtonButton = new XamlButton(this);  
                #region Search Criteria  
                this.mUIButtonButton.SearchProperties[XamlButton.PropertyNames.AutomationId] = "button";  
                this.mUIButtonButton.WindowTitles.Add("App1");  
                #endregion  
            }  
            return this.mUIButtonButton;  
        }  
    }  
    
    public XamlEdit UITextBoxEdit  
    {  
        get  
        {  
            if ((this.mUITextBoxEdit == null))  
            {  
                this.mUITextBoxEdit = new XamlEdit(this);  
                #region Search Criteria  
                this.mUITextBoxEdit.SearchProperties[XamlEdit.PropertyNames.AutomationId] = "textBox";  
                this.mUITextBoxEdit.WindowTitles.Add("App1");  
                #endregion  
            }  
            return this.mUITextBoxEdit;  
        }  
    }  
    #endregion  
    
    #region Fields  
    private XamlButton mUIButtonButton;  
    
    private XamlEdit mUITextBoxEdit;  
    #endregion  
    
    #Region "Properties"  
    Public ReadOnly Property UIButtonButton() As XamlButton  
        Get  
            If (Me.mUIButtonButton Is Nothing) Then  
                Me.mUIButtonButton = New XamlButton(Me)  
                Me.mUIButtonButton.SearchProperties(XamlButton.PropertyNames.AutomationId) = "button"  
                Me.mUIButtonButton.WindowTitles.Add("App2")  
            End If  
            Return Me.mUIButtonButton  
        End Get  
    End Property  
    
    Public ReadOnly Property UITextBoxEdit() As XamlEdit  
        Get  
            If (Me.mUITextBoxEdit Is Nothing) Then  
                Me.mUITextBoxEdit = New XamlEdit(Me)  
                Me.mUITextBoxEdit.SearchProperties(XamlEdit.PropertyNames.AutomationId) = "textBox"  
                Me.mUITextBoxEdit.WindowTitles.Add("App2")  
            End If  
            Return Me.mUITextBoxEdit  
        End Get  
    End Property  
    #End Region  
    
    #Region "Fields"  
    Private mUIButtonButton As XamlButton  
    
    Private mUITextBoxEdit As XamlEdit  
    #End Region  
    
  11. ソリューション エクスプローラーで、CodedUITest1.cs ファイルまたは CodedUITest1.vb ファイルを開きます。In Solution Explorer, open the CodedUITest1.cs or CodedUITest1.vb file. これで、UIMap に追加されるコントロールを使用してテストを実行する必要がある操作の CodedUTTestMethod1 メソッドにコードを追加できます。You can now add code to the CodedUTTestMethod1 method for the actions need to run the test using the controls added to the UIMap:

    1. 前にクリップボードにコピーしたオートメーション ID プロパティを使用して、UWP アプリを起動します。Launch the UWP app using the automation ID property you copied to the clipboard previously:

      XamlWindow.Launch("8ebca7c4-effe-4c86-9998-068daccee452_cyrqexqw8cc7c!App")  
      
      XamlWindow myAppWindow = XamlWindow.Launch("7254db3e-20a7-424e-8e05-7c4dabf4f28d_cyrqexqw8cc7c!App");  
      
    2. ボタン コントロールをタップするジェスチャを追加します。ボタン コントロールをタップするジェスチャを追加します。Add a gesture to tap the button control:

      Gesture.Tap(this.UIMap.UIApp1Window. UIButtonButton);  
      
      Gesture.Tap(Me.UIMap.UIApp2Window. UIButtonButton)  
      
    3. 自動的に生成された Assert メソッドへの呼び出しが、アプリの起動とボタンのタップ ジェスチャの後にあることを確認します。Verify that the call to the assert method that was automatically generated comes after launching the app and tap gesture on the button:

      this.UIMap.AssertMethod1();  
      
      Me.UIMap.AssertMethod1()  
      

      コードを追加すると、CodedUITestMethod1 テスト メソッドは次のようになります。After adding the code, the CodedUITestMethod1 test method should appear as follows:

    [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.  
    
        // Launch the app.  
        XamlWindow myAppWindow = XamlWindow.Launch("7254db3e-20a7-424e-8e05-7c4dabf4f28d_cyrqexqw8cc7c!App");  
    
        // Tap the button.  
        Gesture.Tap(this.UIMap.UIApp1Window.UIButtonButton);  
    
        this.UIMap.AssertMethod1();  
    }  
    
    <CodedUITest(CodedUITestType.WindowsStore)>  
    Public Class CodedUITest1  
    
        <TestMethod()>  
        Public Sub 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.  
            '  
    
            ' Launch the app.  
            XamlWindow.Launch("8ebca7c4-effe-4c86-9998-068daccee452_cyrqexqw8cc7c!App")  
    
            '// Tap the button.  
            Gesture.Tap(Me.UIMap.UIApp2Window.UIButtonButton)  
    
            Me.UIMap.AssertMethod1()  
        End Sub  
    
  12. テストをビルドし、テスト エクスプローラーを使用してテストを実行します。Build your test and then run the test using the test explorer.

    コード化された UI テストをテスト エクスプローラーから実行するRun the coded UI test from Test Explorer

    UWP アプリが起動し、ボタンをタップする操作が完了し、Assert メソッドを使用してテキスト ボックスの Text プロパティが設定され、検証されます。The UWP app launches, the action to tap the button is completed, and the textbox's Text property is populated and validated using the assert method.

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

    テストの完了後、テストが成功したことがテスト エクスプローラーに表示されます。After the test completes, the test explorer displays that the test passed.

    成功したテストがテスト エクスプローラーに表示されるPassed test displays in Test Explorer

Q & AQ & A

Q: [コード化された UI テスト] ダイアログの [コードの生成] に、コード化された UI テストを記録するオプションが表示されないのはなぜですか?Q: Why don't I see the option to record my coded UI test in the Generate Code for a Coded UI Test dialog?

A: 記録するオプションは、UWP アプリではサポートされません。A: The option to record is not supported for UWP apps.

Q: WinJS ベースの UWP アプリのコード化された UI テストを作成できますか?Q: Can I create a coded UI test for my UWP apps based on WinJS?

A: いいえ、XAML ベースのアプリだけがサポートされます。A: No, only XAML based apps are supported.

Q: Windows 8.1 または Windows 10 が実行されていないシステムで、UWP アプリのコード化された UI テストを作成できますか?Q: Can I create coded UI tests for my UWP apps on a system that is not running Windows 8.1 or Windows 10?

A: いいえ、できません。コード化された UI テスト プロジェクトのテンプレートは、Windows 8.1 および Windows 10 でのみ使用できます。A: No, the Coded UI Test Project templates are only available on Windows 8.1 and Windows 10. ユニバーサル Windows プラットフォーム (UWP) アプリ用にオートメーションを作成するには、Windows 10 が必要です。To create automation for Universal Windows Platform (UWP) apps, you'll need Windows 10.

Q: ユニバーサル Windows プラットフォーム (UWP) アプリ用のコード化された UI テストは、どのようにして作成できますか?Q: How do I create coded UI tests for Universal Windows Platform (UWP) apps?

A: コード化された UI テスト プロジェクトは、UWP アプリをテストしているプラットフォームに応じて、次のいずれかの方法で作成します。A: Depending on the platform where you're testing your UWP app, create coded UI test project in one of these ways:

  • ローカル コンピューターで実行している UWP アプリは、UWP アプリとして実行されます。A UWP app running on local machine will run as a UWP app. このアプリをテストする場合、 コード化された UI テスト プロジェクト (Windows) のテンプレートを使用します。To test this, you must use the Coded UI Test Project (Windows) template. 新しいプロジェクトの作成時にこのテンプレートを検索するには、 [Windows][ユニバーサル] ノードに移動します。To find this template when you create a new project, go to the Windows, Universal node. あるいは、 [Windows][Windows 8][Windows] ノードに移動します。Or go to the Windows, Windows 8, Windows node.

  • モバイル デバイスまたはエミュレーターで実行している UWP アプリは、Phone アプリケーションとして実行されます。A UWP app running on mobile device or emulator will run as a Phone app. このアプリをテストする場合、 コード化された UI テスト プロジェクト (Windows Phone) のテンプレートを使用します。To test this, you must use the Coded UI Test Project (Windows Phone) template. 新しいプロジェクトの作成時にこのテンプレートを検索するには、 [Windows][ユニバーサル] ノードに移動します。To find this template when you create a new project, go to the Windows, Universal node. あるいは、 [Windows][Windows 8][Windows Phone] ノードに移動します。Or go to the Windows, Windows 8, Windows Phone node.

プロジェクトを作成した後も、テストの作成は以前と同じままになります。After you create the project, authoring a test stays the same as before.

Q: UIMap.Designer ファイルでコードを変更できないのはなぜですか?Q: Why can't I modify the code in the UIMap.Designer file?

A: UIMapDesigner.cs ファイルでコードを変更しても、[UIMap - コード化された UI テスト ビルダー] を使用してコードを生成するたびに変更が上書きされます。A: Any code changes you make in the UIMapDesigner.cs file will be overwritten every time you generate code using the UIMap - Coded UI Test Builder. 記録されたメソッドを変更する必要がある場合は、メソッドを UIMap.cs ファイルにコピーし、メソッド名を変更する必要があります。If you have to modify a recorded method, you must copy it to UIMap.cs file and rename it. UIMap.cs ファイルを使用すると、UIMapDesigner.cs ファイルのメソッドやプロパティをオーバーライドできます。The UIMap.cs file can be used to override methods and properties in the UIMapDesigner.cs file. Coded UITest.cs ファイルの元のメソッドへの参照を削除し、変更したメソッド名に置き換える必要があります。You must remove the reference to the original method in the Coded UITest.cs file and replace it with the renamed method name.

関連項目See Also

UI オートメーションを使用してコードをテストする Use UI Automation To Test Your Code
テスト用に UWP コントロールの一意のオートメーション プロパティを設定するSet a Unique Automation Property for UWP Controls for Testing