코딩된 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. 도구 상자에서 단추 컨트롤과 textbox 컨트롤을 디자인 화면으로 끕니다.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 앱을 실행합니다.Choose F5 to run your UWP app.

UWP 앱에 대해 코딩된 UI 테스트 만들기 및 실행Create and run a coded UI test for the UWP app

UWP(유니버설 Windows 플랫폼) 앱을 위한 코딩된 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 apps)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.

    단추 컨트롤을 클릭하여 텍스트 상자 값 설정Click button control to set textbox value

  7. 십자선 도구를 사용하여 textbox 컨트롤을 선택한 다음 텍스트 속성을 선택합니다.Use the cross-hair tool to select the textbox control, and then select the Text property.

    Text 속성 선택Select the Text property

  8. 어설션을 추가합니다.Add an assertion. 이 어설션은 값이 올바른지 확인하는 테스트에 사용됩니다.It will be used in the test to verify that the value is correct.

    십자선이 있는 텍스트 상자 선택 및 어설션 추가Choose testbox with cross-hair and add assertion

  9. 어설션에 대한 코드를 추가 및 생성합니다.Add and generate code for the assertion.

    텍스트 상자 어설션에 대한 코드 생성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. 그러면 assert 메서드 및 해당 컨트롤에 대해 추가한 코드를 확인할 수 있도록 코드 편집기에서 UIMap.Designer.vb 파일이 열립니다.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 메서드를 사용하여 텍스트 상자의 텍스트 속성이 채워지고 확인됩니다.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. UWP(유니버설 Windows 플랫폼) 앱에 대한 자동화를 만들려면 Windows 10이 필요합니다.To create automation for Universal Windows Platform (UWP) apps, you'll need Windows 10.

Q: UWP(유니버설 Windows 플랫폼) 앱을 위한 코딩된 UI 테스트를 만들려면 어떻게 하나요?Q: How do I create coded UI tests for Universal Windows Platform (UWP) apps?

A: UWP 앱을 테스트하는 플랫폼에 따라 다음 중 한 가지 방법으로 코딩된 UI 테스트 프로젝트를 만듭니다.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 앱이 휴대폰 앱으로 실행되는 경우.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: UIMap - 코딩된 UI 테스트 빌더를 사용하여 코드를 생성할 때마다 UIMapDesigner.cs 파일에서 수정된 코드 변경 내용을 덮어씁니다.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. 코딩된 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