연습: Firefox를 사용하여 코딩된 UI 테스트 재생

아티클
08/10/2011

코딩된 UI 테스트라고 하는 자동화된 UI(사용자 인터페이스) 테스트를 만들 수 있습니다. 이 테스트를 사용하면 UI가 제대로 작동하는지 확인하고 UI 컨트롤의 유효성을 검사할 수 있습니다. 코딩된 UI 테스트를 사용하면 사용자 인터페이스의 기능을 테스트할 수 있습니다. Microsoft Visual Studio 2010 기능 팩 2를 사용하면 웹 사이트나 웹 기반 응용 프로그램에서 UI 작업을 기록하고 코딩된 UI 테스트를 만들 수 있습니다. Windows Internet Explorer를 사용하여 작업을 기록하고 Mozilla Firefox 브라우저를 사용하여 테스트를 재생할 수 있습니다.

코딩된 UI 테스트에 대한 추가 정보는 자동화된 UI 테스트를 사용하여 사용자 인터페이스 테스트를 참조하십시오.

경고

Microsoft Visual Studio 2010 기능 팩 2 설치를 완료한 후 Mozilla Firefox용 테스트 패키지를 사용하려면 Mozilla Firefox용 테스트 도우미 확장을 설치 및 구성해야 합니다. 자세한 내용은 다음을 참조하십시오. 방법: Mozilla Firefox용 테스트 도우미 확장 설치.

경고

Firefox 브라우저에서만 코딩된 UI 테스트를 재생할 수 있습니다. Firefox 브라우저를 사용하여 웹 사이트 및 웹 응용 프로그램에서 코딩된 UI 테스트를 기록할 수 없습니다.

사전 요구 사항

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

Visual Studio 2010 Ultimate, Visual Studio 2010 Premium 또는 Test Professional 2010
Mozilla Firefox 웹 브라우저 버전 3.5 또는 3.6
Microsoft Visual Studio 2010 기능 팩 2와 Mozilla Firefox용 테스트 도우미 확장을 설치했는지 확인합니다. 설치 관련 정보는 지침에 포함되어 있습니다.

웹 응용 프로그램 만들기

웹 응용 프로그램을 만들려면

Visual Studio 2010의 파일 메뉴에서 새로 만들기를 클릭한 다음 프로젝트를 클릭합니다.

새 프로젝트 대화 상자가 나타납니다.
설치된 템플릿에서 원하는 프로그래밍 언어를 확장한 다음 웹을 클릭합니다.
웹 프로젝트 형식 목록에서 ASP.NET 빈 웹 응용 프로그램을 선택합니다.

참고

이 연습에서는 최소한의 코드만 작성합니다.
이름 상자에 ColorWebApp를 입력합니다.
위치 상자에 웹 응용 프로그램을 만들 폴더를 지정합니다.
솔루션용 디렉터리 만들기를 선택합니다.
확인을 클릭합니다.
솔루션 탐색기에서 새 ColorWebApp 프로젝트가 선택되었는지 확인합니다.
프로젝트 메뉴에서 새 항목 추가를 선택합니다.

새 항목 추가 대화 상자가 나타납니다.
항목 목록에서 Web Form을 선택합니다.
이름 텍스트 상자에 Default.aspx를 입력한 다음 추가를 클릭합니다.

웹 응용 프로그램에 컨트롤 추가

웹 응용 프로그램에 컨트롤을 추가하려면

솔루션 탐색기에서 Default.aspx를 마우스 오른쪽 단추로 클릭하고 디자이너 보기를 선택합니다.

빈 페이지가 표시됩니다.
도구 상자가 표시되지 않으면 보기를 클릭한 다음 도구 상자를 클릭합니다.
표준 그룹에서 RadioButtonList를 끌어 페이지에 놓습니다.

디자인 화면에 RadioButtonList 컨트롤이 추가됩니다.
RadioButtonList 작업 작업 태그 창에서 EditItems 링크를 클릭합니다.

ListItem 컬렉션 편집기가 나타납니다.

참고

속성 창에서 항목 컬렉션을 편집하여 ListItem 컬렉션 편집기를 표시할 수도 있습니다.
추가를 클릭하여 새 항목을 추가합니다.
ListItem 속성에서 다음을 수행합니다.
1. 텍스트 속성을 Red로 변경합니다.
2. 선택됨 속성을 True로 설정합니다.
추가를 클릭하여 다른 항목을 추가합니다.
ListItem 속성에서 텍스트 속성을 Blue로 변경합니다.
확인을 클릭하여 ListItem 컬렉션 편집기를 닫습니다.
Button 컨트롤을 끌어 페이지에 놓습니다. 속성 창에서 Text 속성을 Submit으로 변경합니다.
파일 메뉴에서 모두 저장을 클릭합니다.

웹 응용 프로그램에 페이지 추가

웹 응용 프로그램에 페이지를 추가하려면

프로젝트 메뉴에서 새 항목 추가를 클릭합니다.
새 항목 추가 대화 상자의 템플릿 목록에서 Web Form을 선택합니다. 이름에서 Red.aspx를 입력한 다음 추가를 클릭합니다.
문서 창의 아래쪽에서 디자인 탭을 클릭하여 디자인 뷰로 전환합니다.
Label 컨트롤을 끌어 페이지에 놓습니다. 속성 창에서 Text 속성을 Red로 설정합니다. ForeColor 속성을 Red로 설정합니다.
프로젝트 메뉴에서 새 항목 추가를 클릭합니다.
새 항목 추가 대화 상자에서 Web Form 템플릿을 클릭하고 이름을 Blue.aspx로 지정합니다. 추가를 클릭합니다.
문서 창의 아래쪽에서 디자인 탭을 클릭하여 디자인 뷰로 전환합니다.
Label 컨트롤을 끌어 페이지에 놓습니다. 속성 창에서 Text 속성을 Blue로 설정합니다. ForeColor 속성을 Blue로 설정합니다.
파일 메뉴에서 모두 저장을 클릭합니다.

웹 응용 프로그램에 기능 추가

웹 응용 프로그램에 기능을 추가하려면

솔루션 탐색기에서 Default.aspx를 마우스 오른쪽 단추로 클릭하고 디자이너 보기를 클릭합니다.
전송 Button을 두 번 클릭합니다. Visual Studio에서 페이지 코드로 전환되고 Button 컨트롤의 Click 이벤트에 대한 기초 이벤트 처리기가 만들어집니다.

이벤트 처리기에 다음 코드를 추가합니다.

if (this.RadioButtonList1.SelectedValue == "Blue")
{
    Response.Redirect("Blue.aspx");
}
else
{
    Response.Redirect("Red.aspx");
}

If RadioButtonList1.SelectedValue = "Blue" Then
    Response.Redirect("Blue.aspx")
Else
    Response.Redirect("Red.aspx")
End If

파일 메뉴에서 모두 저장을 클릭합니다.

웹 응용 프로그램이 제대로 실행되는지 확인

경고

이 절차에서는 Microsoft Internet Explorer가 기본 웹 브라우저로 설정되었다고 가정합니다.

웹 응용 프로그램을 실행하려면

솔루션 탐색기에서 Default.aspx를 마우스 오른쪽 단추로 클릭하고 시작 페이지로 설정을 클릭합니다.
Ctrl+F5를 눌러 브라우저에서 해당 웹 응용 프로그램을 실행합니다. 첫 페이지가 표시됩니다.
Red를 클릭한 다음 전송을 클릭합니다. 응용 프로그램이 제대로 작동하는 경우 Red라는 Label이 있는 페이지로 이동하게 됩니다.
첫 페이지로 돌아갑니다.
Blue를 클릭한 다음 전송을 클릭합니다. 응용 프로그램이 제대로 작동하는 경우 Blue라는 Label이 있는 페이지로 이동하게 됩니다.
웹 응용 프로그램의 주소를 클립보드나 메모장 파일로 복사합니다. 예를 들어 이 주소는 https://localhost:<PortNumber>/ Default.aspx 같은 형식일 수 있습니다.
브라우저를 닫습니다.

웹 응용 프로그램에 대해 코딩된 UI 테스트 만들기 및 실행

코딩된 UI 테스트를 만들고 실행하려면

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

새 프로젝트 추가 대화 상자가 나타납니다.
설치된 템플릿 창에서 Visual C# 또는 Visual Basic을 확장하고 테스트를 선택합니다.
가운데 창에서 테스트 프로젝트 템플릿을 선택합니다.
확인을 클릭합니다.

솔루션 탐색기에서 TestProject1이라는 새 테스트 프로젝트가 솔루션에 추가되고 UnitTest1.cs 또는 UnitTest1.vb 파일이 코드 편집기에 나타납니다. UnitTest1 파일은 이 연습에서 사용되지 않으므로 닫아도 됩니다.
솔루션 탐색기에서 TestProject1을 마우스 오른쪽 단추로 클릭하고 추가를 클릭한 다음 코딩된 UI 테스트를 선택합니다.

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

UIMap – 코딩된 UI 테스트 빌더가 나타납니다.

이 대화 상자의 옵션에 대한 자세한 내용은 방법: 코딩된 UI 테스트 만들기를 참조하십시오.
UIMap – 코딩된 UI 테스트 빌더에서 기록 시작을 클릭합니다. 몇 초 안에 코딩된 UI 테스트 빌더를 사용할 수 있게 됩니다.
Internet Explorer를 시작합니다.
이전 절차에서 복사한 웹 응용 프로그램 주소를 Internet Explorer의 주소 표시줄에 입력합니다. 예를 들면 다음과 같습니다.

https://localhost:<PortNumber>/ Default.aspx

(선택 사항) Red, Blue 및 브라우저의 뒤로 단추를 눌러 웹 응용 프로그램을 탐색합니다.
Internet Explorer를 닫습니다.
UIMap – 코딩된 UI 테스트 빌더에서 코드 생성을 클릭합니다.
메서드 이름에 SimpleWebAppTest를 입력하고 추가 후 생성을 클릭합니다. 그러면 몇 초 안에 코딩된 UI 테스트가 나타나고 솔루션에 추가됩니다.
UIMap – 코딩된 UI 테스트 빌더를 닫습니다.

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

Internet Explorer에서 코딩된 UI 테스트가 제대로 재생되는지 확인

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

코딩된 UI 테스트가 실행되는 동안 ColorWebApp을 볼 수 있습니다. 이전 절차에서 수행한 단계가 실행됩니다.

SpecifyFirefox 재생에 속성 추가 및 코딩된 UI 테스트 다시 실행

CodedUITest1.cs 파일에서 TestInitializeAttribute를 사용하는 MyTestInitialize() 메서드를 찾아 코드의 주석 처리를 제거하고 다음 코드와 같이 값이 “FireFox”로 할당된 CurrentBrowser 속성을 추가합니다.

팁

또는 BrowserWindow 속성을 추가하는 대신 값이 “Firefox”인 환경 변수 CodedUITestCurrentBrowser를 만든 다음 Visual Studio를 다시 시작할 수도 있습니다.

////Use TestInitialize to run code before running each test 
        [TestInitialize()]
        public void MyTestInitialize()
        {        
        //    // 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
            BrowserWindow.CurrentBrowser = "Firefox";
        }

' Use TestInitialize to run code before running each test
    <TestInitialize()> Public Sub MyTestInitialize()
        '
        ' 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
        '
        BrowserWindow.CurrentBrowser = "Firefox"


    End Sub

TestInitialze() 특성 사용에 대한 추가 정보는 방법: 테스트 중인 응용 프로그램을 기록하여 코딩된 UI 테스트 생성을 참조하십시오.

테스트 메뉴에서 창을 선택하고 테스트 뷰를 클릭합니다. 테스트 뷰에서 테스트 이름 열 아래의 CodedUITestMethod1을 선택하고 도구 모음에서 선택 항목 실행을 클릭합니다.

Mozilla Firefox를 사용하여 코딩된 UI 테스트를 실행해야 합니다.

참고 항목

개념

자동화된 UI 테스트를 사용하여 사용자 인터페이스 테스트

기타 리소스

Windows Internet Explorer를 사용하여 테스트 기록 및 Mozilla Firefox를 사용하여 재생

연습: Firefox를 사용하여 수동 테스트 재생

방법: Firefox를 사용하여 웹 기반 코딩된 UI 테스트 재생

다음을 통해 공유