연습: 코딩된 UI 테스트 만들기, 편집 및 유지 관리

아티클
06/07/2013

이 연습에서는 간단한 WPF(Windows Presentation Foundation) 웹 응용 프로그램을 만들어, 코딩된 UI 테스트를 만들고 편집하고 유지 관리하는 방법을 보여 줍니다.이 연습에서는 여러 타이밍 문제 및 제어 리팩터링으로 인해 중단된 테스트를 해결하기 위한 방법을 제공합니다.

사전 요구 사항

이 연습을 수행하려면 다음이 필요합니다.

Visual Studio Ultimate 또는 Visual Studio 프리미엄.

간단한 WPF 응용 프로그램 만들기

파일 메뉴에서 새로 만들기를 가리킨 다음 프로젝트를 클릭합니다.

새 프로젝트 대화 상자가 나타납니다.
에 설치 된 창에서 확장 **C#**을 선택한 다음 Windows.
가운데 창 위에서 대상 프레임워크 드롭다운 목록이 .NET Framework 4.5로 설정되어 있는지 확인합니다.
가운데 창에서 WPF 응용 프로그램 템플릿을 선택합니다.
이름 텍스트 상자에 SimpleWPFApp를 입력합니다.
프로젝트를 저장할 폴더를 선택합니다.위치 텍스트 상자에 폴더 이름을 입력합니다.
확인을 선택합니다.

Visual Studio용 WPF Designer가 열리고 프로젝트의 MainWindow가 표시됩니다.
현재 도구 상자가 열려 있지 않으면 엽니다.선택은 보기 메뉴에서 다음 선택 도구.
모든 WPF 컨트롤 섹션에서 Button, CheckBox 및 ProgressBar 컨트롤을 디자인 화면의 MainWindow로 끌어옵니다.
Button 컨트롤을 선택합니다.속성 창에서 Content 속성 값을 Button에서 Start로 변경합니다.
ProgressBar 컨트롤을 선택합니다.속성 창에서 Maximum 속성 값을 100에서 1000으로 변경합니다.
Checkbox 컨트롤을 선택합니다.속성 창에서 IsEnabled 속성을 지웁니다.
선택 이벤트를 추가 하는 단추 컨트롤을 두 번 클릭 합니다.

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 테스트 만들기 및 실행

솔루션 탐색기에서 솔루션을 마우스 오른쪽 단추로 클릭 하 고 선택한 추가 선택한 다음 새 프로젝트.

새 프로젝트 추가 대화 상자가 나타납니다.
에 설치 된 창에서 확장 **C#**을 선택한 다음 테스트.
가운데 창에서 선택 된 코딩 된 UI 테스트 프로젝트 템플릿.
확인을 선택합니다.

솔루션 탐색기에서 새 UI 테스트 프로젝트 라는 코딩 CodedUITestProject1 를 솔루션에 추가 됩니다.

코딩된 UI 테스트에 대한 코드 생성 대화 상자가 나타납니다.
선택 된 작업 기록, UI 맵 편집 또는 어설션 추가 옵션을 선택 하 고 확인.

UIMap – 코딩 된 UI 테스트 빌더 나타납니다 및 Visual Studio 창이 최소화 됩니다.

이 대화 상자의 옵션에 대한 자세한 내용은 코딩 된 UI 테스트 만들기를 참조하십시오.
앞에서 만든 SimpleWPFApp 응용 프로그램을 찾아 실행합니다.기본적으로 이 응용 프로그램은 C:\Users\<username>\Documents\Visual Studio 2012\Projects\SimpleWPFApp\SimpleWPFApp\bin\Debug\SimpleWPFApp.exe에 있습니다.

SimpleWPFApp 응용 프로그램에 대한 바탕 화면 바로 가기를 만듭니다.SimpleWPFApp.exe를 마우스 오른쪽 단추로 클릭한 다음 복사를 선택합니다.바탕 화면에서 마우스 오른쪽 단추를 클릭하고 바로 가기 붙여넣기를 선택합니다.

팁
응용 프로그램 바로 가기를 사용하면 응용 프로그램을 신속하게 시작할 수 있기 때문에 응용 프로그램에 대해 코딩된 UI 테스트를 쉽게 추가하거나 수정할 수 있습니다.응용 프로그램을 탐색하지 않아도 됩니다.이 연습에서 응용 프로그램을 다시 실행해야 합니다.

선택 녹음/녹화 시작 UI 테스트 빌더 UIMap – 코딩 합니다.몇 초 안에 코딩된 UI 테스트 빌더를 사용할 수 있게 됩니다.
바탕 화면 바로 가기를 사용하여 SimpleWPFApp.exe를 실행합니다.
선택에 SimpleWPFApp, 시작.

몇 초 안에 진행률 표시줄이 100% 완료로 표시됩니다.이제 확인란 컨트롤을 사용할 수 있습니다.
Checkbox 컨트롤에 대한 상자를 선택합니다.
SimpleWPFApp 응용 프로그램을 닫습니다.
UIMap – 코딩 된 UI 테스트 빌더를 선택 코드 생성.
메서드 이름에 Simpleapptest를 입력 하 고 선택 추가 후 생성.그러면 몇 초 안에 코딩된 UI 테스트가 나타나고 솔루션에 추가됩니다.
UIMap – 코딩된 UI 테스트 빌더를 닫습니다.

CodedUITest1.cs 파일이 코드 편집기에 나타납니다.

코딩된 UI 테스트 실행

CodedUITest1.cs 파일에서 CodedUITestMethod 메서드를 찾아 마우스 오른쪽 단추로 클릭한 다음 테스트 실행을 선택합니다.

코딩된 UI 테스트가 실행되는 동안 SimpleWPFApp를 볼 수 있습니다.이전 절차에서 수행한 단계가 실행됩니다.그러나 테스트에서 CheckBox 컨트롤에 대한 확인란을 선택하려고 시도하면 테스트 결과 창에서 테스트가 실패했음을 보여 줍니다.진행률 표시줄이 100% 완료 상태가 될 때까지 CheckBox 컨트롤을 사용할 수 없다는 사실을 모르고 테스트에서 해당 확인란을 선택하려고 시도했기 때문입니다.이와 같은 문제는 코딩된 UI 테스트에 사용할 수 있는 다양한 UITestControl.WaitForControlXXX() 메서드를 사용하여 해결할 수 있습니다.다음 절차에서는 WaitForControlEnabled() 메서드를 사용하여, 테스트 실패의 원인이 된 문제를 해결하는 방법을 보여 줍니다.자세한 내용은 코딩된 UI 테스트가 재생 중 특정 이벤트를 기다리도록 지정을 참조하십시오.

코딩된 UI 테스트 편집 및 다시 실행

테스트 결과 창에서 실패한 테스트를 마우스 오른쪽 단추로 클릭하고 테스트 결과 정보 보기를 선택합니다.

CodedUITestMethod1[결과]이 표시됩니다.
에 오류 스택 추적 섹션에서 첫 번째 링크 옆에 선택 TestProject1.UIMap.SimpleAppTest().

UIMap.Designer.cs 파일이 열리고 코드에서 오류 지점이 강조 표시되어 있습니다.
```
// Select 'CheckBox' check box
uICheckBoxCheckBox.Checked = this.SimpleAppTestParams.UICheckBoxCheckBoxChecked;
```

이 문제를 해결하려면 WaitForControlEnabled() 메서드를 사용하여 이 줄을 계속하기 전에 UI 테스트에서 CheckBox 컨트롤을 기다릴 수 있도록 설정하면 됩니다.

주의
UIMap.Designer.cs 파일은 수정하지 마십시오.UIMap - 코딩된 UI 테스트 빌더를 사용하여 코드를 생성할 때마다 UIMapDesigner.cs 파일에서 수정된 코드 변경 내용을 덮어씁니다.기록된 메서드를 수정해야 하는 경우에는 해당 메서드를 UIMap.cs 파일에 복사한 후 이름을 바꾸어야 합니다.UIMap.cs 파일을 사용하여 UIMapDesigner.cs 파일의 메서드와 속성을 재정의할 수 있습니다.코딩된 UITest.cs 파일에서 원래 메서드에 대한 참조를 제거하고 이름을 바꾼 메서드 이름으로 바꾸어야 합니다.

UIMap.Designer.cs 파일은 수정하지 마십시오.UIMap - 코딩된 UI 테스트 빌더를 사용하여 코드를 생성할 때마다 UIMapDesigner.cs 파일에서 수정된 코드 변경 내용을 덮어씁니다.기록된 메서드를 수정해야 하는 경우에는 해당 메서드를 UIMap.cs 파일에 복사한 후 이름을 바꾸어야 합니다.UIMap.cs 파일을 사용하여 UIMapDesigner.cs 파일의 메서드와 속성을 재정의할 수 있습니다.코딩된 UITest.cs 파일에서 원래 메서드에 대한 참조를 제거하고 이름을 바꾼 메서드 이름으로 바꾸어야 합니다.

솔루션 탐색기에서 찾아 UIMap.uitest 코딩 된 UI 테스트 프로젝트에서입니다.
바로 가기 메뉴를 열고 UIMap.uitest 를 선택 하 고 열기.

코딩된 UI 테스트가 코딩된 UI 테스트 편집기에 표시됩니다.이제 코딩된 UI 테스트를 보고 편집할 수 있습니다.
UI 작업 창에서 UIMap.cs 또는 UIMap.vb 파일로 이동할 테스트 메서드를 선택하여 테스트 코드를 다시 컴파일할 때 덮어쓰지 않도록 해주는 사용자 지정 코드 기능을 지원합니다.
선택 된 코드 이동 코딩 된 UI 테스트 편집기 도구 모음에서 단추.
Microsoft Visual Studio 대화 상자가 표시됩니다.메서드를 UIMap.cs 파일에 UIMap.uitest 파일에서 이동 될 것임을 고 하면 더 이상 코딩 된 UI 테스트 편집기를 사용 하 여 메서드를 편집할 수 있게 된다는 경고입니다.예를 선택합니다.

테스트 메서드가 UIMap.uitest 파일에서 제거되고 더 이상 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의 컨트롤 리팩터링

Designer의 MainWindow.xaml 파일에서 Button 컨트롤을 선택합니다.
속성 창의 맨 위에서 Button 옆의 button1 값을 선택하고 이 값을 buttonA로 변경합니다.
빌드 메뉴에서 솔루션 빌드를 선택합니다.
에 테스트 메뉴에서 Windows 다음 선택 테스트 뷰.
선택 CodedUITestMethod1 에서 테스트 이름 열 다음 선택 선택 항목 실행 도구 모음에서.

코딩된 UI 테스트가 원래 UIMap에서 button1으로 매핑된 Button 컨트롤을 찾을 수 없으므로 테스트가 실패합니다.리팩터링은 코딩된 UI 테스트에 이러한 방식으로 영향을 줄 수 있습니다.
테스트 결과 창에서 실패한 테스트를 마우스 오른쪽 단추로 클릭하고 테스트 결과 정보 보기를 선택합니다.

CodedUITestMethod1[결과]이 나타납니다.
에 오류 스택 추적 섹션에서 첫 번째 링크 옆에 선택 TestProject1.UIMpa.SimpleAppTest().

UIMap.Designer.cs 파일이 열립니다.코드에서 오류 지점이 강조 표시됩니다.
```
// Choose 'Start' button
Mouse.Click(uIStartButton, new Point(27, 10));
```
이 절차 앞부분의 코드 줄에서는 리팩터링되기 전의 UIMap 이름인 UiStartButton을 사용합니다.

이 문제를 해결하려면 코딩된 UI 테스트 빌더를 사용하여 UIMap에 리팩터링된 컨트롤을 추가하면 됩니다.다음 절차에서와 같이 코드를 사용하도록 테스트의 코드를 업데이트할 수 있습니다.

리팩터링된 컨트롤 매핑 및 코딩된 UI 테스트 편집 및 다시 실행

CodedUITest1.cs 파일에서에 CodedUITestMethod1() 메서드를 마우스 오른쪽 단추로 선택 코드를 생성 하는 코딩 된 UI 테스트에 대 한 다음 선택 코딩 된 UI 테스트 빌더.

UIMap – 코딩된 UI 테스트 빌더가 나타납니다.
앞에서 만든 바탕 화면 바로 가기를 사용하여, 앞에서 만든 SimpleWPFApp 응용 프로그램을 실행합니다.
UIMap – 코딩된 UI 테스트 빌더에서 십자형 도구를 SimpleWPFApp의 시작 단추로 끌어옵니다.

시작 단추가 파랑 상자 안에 포함되며 코딩된 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의 생성자 아래에서 속성 영역을 확장합니다.public WpfButton UIStartButton1 속성이 추가되었습니다.

UIStartButton1 속성에서 검색 조건 영역을 확장합니다.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 테스트가 테스트의 모든 단계를 성공적으로 수행합니다.테스트 결과 창에 상태가 성공으로 표시됩니다.