Coded UI Testing HOL

Coded UI Testing Hands-On-Lab (HOL)

Wednesday, July 18, 2012

Visual Studio ALM Rangers , Richard Fennell, Christofer Lf

Microsoft Corporation

Visual Studio ALM Rangers

This content was created by the Visual Studio ALM Rangers, a special group with members from the Visual

Studio Product Team, Microsoft Services, Microsoft Most Valued Professionals (MVPs) and Visual Studio

Community Leads.

Coded UI Testing - Hands-On-Lab

Copyright 2012 Microsoft Corporation Page 2

The information contained in this document represents the current view of Microsoft Corporation on the issues discussed as of the date of publication. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented after the date of publication.

This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS DOCUMENT.

Microsoft grants you a license to this document under the terms of the Creative Commons

Attribution 3.0 License. All other rights are reserved.

2012 Microsoft Corporation.

Microsoft, Active Directory, Excel, Internet Explorer, SQL Server, Visual Studio, and Windows are trademarks of the Microsoft group of companies.

All other trademarks are property of their respective owners.



Table of Contents Introduction ...................................................................................................................................................................................... 8

Overview ...................................................................................................................................................................................... 8

Visual Studio ALM Rangers .......................................................................................................................................................... 8

Prerequisites ................................................................................................................................................................................ 8

Paths ............................................................................................................................................................................................ 9

Suggested Focus and Time Map ................................................................................................................................................... 9

Exercise 1a (MVC Version): ............................................................................................................................................................ 10

Step 1: Context........................................................................................................................................................................... 10

Step 2: Start Visual Studio Ultimate Environment ..................................................................................................................... 13

Step 3: Adding UI Maps and Recording Navigation.................................................................................................................... 19

Step 4: Adding Validations ......................................................................................................................................................... 29

Step 5: Building Test Cases ......................................................................................................................................................... 34

Step 6: Making our tests robust ................................................................................................................................................. 37

Selecting the correct item from the list. ............................................................................................................................... 37

Overriding Assertions ............................................................................................................................................................ 40

Data Driven Tests .................................................................................................................................................................. 41

Ensuring the Application Under Test closes .......................................................................................................................... 42

Refactor for increased maintainability .................................................................................................................................. 43

Exercise 1b (WebForms version): ................................................................................................................................................... 46

Step 1: Context........................................................................................................................................................................... 46

Step 2: Start Visual Studio Ultimate Environment ..................................................................................................................... 49

Step 3: Adding UI Maps and Recording Navigation.................................................................................................................... 55

Step 4: Adding Validations ......................................................................................................................................................... 67

Step 5: Building Test Cases ......................................................................................................................................................... 70

Step 6: Making our tests robust ................................................................................................................................................. 72

Selecting the correct item from the list. ............................................................................................................................... 72

Overriding Assertions ............................................................................................................................................................ 75

Data Driven Tests .................................................................................................................................................................. 75

Ensuring the Application Under Test closes .......................................................................................................................... 77

Refactor for increased maintainability .................................................................................................................................. 79

Exercise 2 ........................................................................................................................................................................................ 82

Step 1: Context........................................................................................................................................................................... 82

Step 2: Create Project ................................................................................................................................................................ 82

Step 3: Add Test Case ................................................................................................................................................................. 85

Step 4: Verify UI Map ................................................................................................................................................................. 95

Step 5: Update UIMap ............................................................................................................................................................... 97

Exercise 3 ...................................................................................................................................................................................... 100

Step 1: Context......................................................................................................................................................................... 100

Step 2: Create Project .............................................................................................................................................................. 100



Step 3: Create the Test Steps ................................................................................................................................................... 101

Step 4: Checking the Test Works ............................................................................................................................................. 103

Step 5: Breaking the Test ........................................................................................................................................................ 104

Step 6: Enabling the HTML Logger ........................................................................................................................................... 105

Step 7: Fixing the Test .............................................................................................................................................................. 107

References .................................................................................................................................................................................... 108

Visual Studio ALM Rangers Site................................................................................................................................................ 108



Table of Figures Figure 1 - Fabrikam Dashboard Page .............................................................................................................................................. 10

Figure 2 - New Ticket Page .............................................................................................................................................................. 11

Figure 3 - Ticket Detail Page............................................................................................................................................................ 12

Figure 4 - Tickets Page .................................................................................................................................................................... 13

Figure 5 - Microsoft Visual Studio 2012 in Programs Menu............................................................................................................ 14

Figure 6 - Microsoft Visual Studio 2012 Startup Environment ........................................................................................................ 15

Figure 7 - Installed Templates ......................................................................................................................................................... 16

Figure 8 - Add New Project Menu ................................................................................................................................................... 16

Figure 9 - Installed Test Templates ................................................................................................................................................. 17

Figure 10 - Solution Explorer .......................................................................................................................................................... 17

Figure 11 - Coded UI Test Project Structure.................................................................................................................................... 18

Figure 12 - Add New Item ............................................................................................................................................................... 19

Figure 13 - Coded UI Test Map Template ....................................................................................................................................... 20

Figure 14 - Coded UI Test Builder ................................................................................................................................................... 20

Figure 15 - Generate Method With Comment ................................................................................................................................ 21

Figure 16 - Create New Ticket ......................................................................................................................................................... 21

Figure 17 - Generate Method with Comment ................................................................................................................................ 22

Figure 18 - New Sample Ticket ........................................................................................................................................................ 23

Figure 19 - Generate New Sample Ticket Method .......................................................................................................................... 24

Figure 20 - Return to List ................................................................................................................................................................ 25

Figure 21 - Generate Return to List Method ................................................................................................................................... 26

Figure 22 - Service Ticket Ref Link ................................................................................................................................................... 26

Figure 23 - Generate Open Ticket code .......................................................................................................................................... 27

Figure 24 - Generate Delete Navigation ......................................................................................................................................... 27

Figure 25 - Generate Delete Ticket ................................................................................................................................................. 28

Figure 26 - Edit Existing UI Map ...................................................................................................................................................... 29

Figure 27 - Details page validation. ................................................................................................................................................. 30

Figure 28 - Adding an assertion ...................................................................................................................................................... 31

Figure 29 Add Assertions Dialog ..................................................................................................................................................... 31

Figure 30 Validate Ticket Title ......................................................................................................................................................... 32

Figure 31 - Defining Assertion ......................................................................................................................................................... 32

Figure 32 - Add Assertion Details .................................................................................................................................................... 33

Figure 33 - Generate Assertion Code Details .................................................................................................................................. 33

Figure 34 - Details ........................................................................................................................................................................... 34

Figure 35 - Rename Coded UI Test Class ......................................................................................................................................... 35

Figure 36 Debug Test ...................................................................................................................................................................... 36

Figure 37 - Expected Error .............................................................................................................................................................. 36

Figure 38 - Hyperlink Click .............................................................................................................................................................. 37

Figure 39 - Finding the search criteria ............................................................................................................................................ 37

Figure 40 - Hyperlink Search Criteria .............................................................................................................................................. 38

Figure 41 - Hyperlink Search and Filter Properties ......................................................................................................................... 39

Figure 42 - Fabrikam Dashboard Page ............................................................................................................................................ 46

Figure 43 - New Ticket Page ............................................................................................................................................................ 47

Figure 44 - Ticket Detail Page.......................................................................................................................................................... 48



Figure 45 - Tickets Page .................................................................................................................................................................. 49

Figure 46 - Microsoft Visual Studio 2012 in Programs Menu.......................................................................................................... 50

Figure 47 - Microsoft Visual Studio 2012 Startup Environment ...................................................................................................... 51

Figure 48 - Create New Project ....................................................................................................................................................... 51

Figure 49 - Installed Templates ....................................................................................................................................................... 52

Figure 50 - Add New Project Menu ................................................................................................................................................. 52

Figure 51 - Installed Test Templates ............................................................................................................................................... 53

Figure 52 - Solution Explorer .......................................................................................................................................................... 53

Figure 53 - Coded UI Test Project Structure.................................................................................................................................... 54


Figure 55 - Coded UI Test Map Template ....................................................................................................................................... 56

Figure 56 - Coded UI Test Builder ................................................................................................................................................... 56

Figure 57 - Generate Method With Comment ................................................................................................................................ 57

Figure 58 - Create New Ticket ......................................................................................................................................................... 58

Figure 59 - Generate Method with Comment ................................................................................................................................ 58


Figure 61 - Coded UI Test Template ................................................................................................................................................ 60

Figure 62 - New Sample Ticket ........................................................................................................................................................ 61

Figure 63 - Generate New Sample Ticket Method .......................................................................................................................... 61


Figure 65 - Coded UI Test Template ................................................................................................................................................ 63

Figure 66 - Return to List ................................................................................................................................................................ 63

Figure 67 - Generate Return to List Method ................................................................................................................................... 64


Figure 69 - Service Ticket Ref Link ................................................................................................................................................... 65

Figure 70 - Generate Open Ticket code .......................................................................................................................................... 65

Figure 71 - Generate Delete Navigation ......................................................................................................................................... 65

Figure 72 - Generate Delete Ticket ................................................................................................................................................. 66

Figure 73 - Edit Existing UI Map ...................................................................................................................................................... 66

Figure 74 - Details page validation. ................................................................................................................................................. 67

Figure 75 - Modify UI Map .............................................................................................................................................................. 68

Figure 76 - Adding an assertion ...................................................................................................................................................... 68

Figure 77 - Defining Assertion ......................................................................................................................................................... 69

Figure 78 - Add Assertion Details .................................................................................................................................................... 69

Figure 79 - Generate Assertion Code Details .................................................................................................................................. 69

Figure 80 - Details ........................................................................................................................................................................... 70

Figure 81 - Rename Coded UI Test Class ......................................................................................................................................... 71

Figure 82 - Expected Error .............................................................................................................................................................. 72

Figure 83 - Hyperlink Click .............................................................................................................................................................. 72

Figure 84 - Finding the search criteria ............................................................................................................................................ 73

Figure 85 - Hyperlink Search Criteria .............................................................................................................................................. 73

Figure 86 - Hyperlink Search and Filter Properties ......................................................................................................................... 74

Figure 87 - Error Message ............................................................................................................................................................... 77

Figure 88 - Enable Deployment ....................................................................................................................................................... 77

Figure 89 - New Project MVC4 ........................................................................................................................................................ 82

Figure 90 - MVC4 Project Options................................................................................................................................................... 83



Figure 91 - MVC 4 Webpage ........................................................................................................................................................... 84

Figure 92 - Register ......................................................................................................................................................................... 84

Figure 93 - Project MVC4 ................................................................................................................................................................ 85

Figure 94 - Add a CodedUI Test Project .......................................................................................................................................... 85

Figure 95 - Start Coded UI Test Builder ........................................................................................................................................... 86

Figure 96 - MVC4 Webpage ............................................................................................................................................................ 86

Figure 97 - Add and Generate Code ................................................................................................................................................ 87

Figure 98 - Login Window ............................................................................................................................................................... 87

Figure 99 - Generate Login Code .................................................................................................................................................... 88

Figure 100 - InnerText Assertion ..................................................................................................................................................... 88

Figure 101 - Assert Validation ......................................................................................................................................................... 89

Figure 102 - Validation saved .......................................................................................................................................................... 89

Figure 103 - Assertion Code Generation ......................................................................................................................................... 90

Figure 104 - Close Explorer ............................................................................................................................................................. 90

Figure 105 - Project Methods ......................................................................................................................................................... 91

Figure 106 - Uncomment Test Attributes ....................................................................................................................................... 92

Figure 107 - Code Moved into attributes ........................................................................................................................................ 93

Figure 108 - Unit Test Explorer ....................................................................................................................................................... 94

Figure 109 - Locate all controls ....................................................................................................................................................... 95

Figure 110 - UI Control Map Locate controls ............................................................................................................................... 95

Figure 111 - Change Log in to Log in here ....................................................................................................................................... 96

Figure 112 - Failed Test Case .......................................................................................................................................................... 96

Figure 113 - UIMap Control Map Properties ................................................................................................................................... 97

Figure 114 - Edit Search Properties ................................................................................................................................................. 97

Figure 115 - Edit Search Properties ................................................................................................................................................. 98

Figure 116 - Locate Ui Properties .................................................................................................................................................... 98

Figure 117 - Updated test case passing .......................................................................................................................................... 99

Figure 118 - New Project Coded UI Test project ........................................................................................................................... 100

Figure 119 - Generate Code for Coded UI Test Dialog .................................................................................................................. 101

Figure 120 - Test Builder ............................................................................................................................................................... 101

Figure 121 - Add a Method ........................................................................................................................................................... 102

Figure 122 - Adding the assertion ................................................................................................................................................. 102

Figure 123 - Add Assertion property ............................................................................................................................................. 103

Figure 124 - Test Explorer ............................................................................................................................................................. 103

Figure 125 - Incorrect Url used in Browser ................................................................................................................................... 104

Figure 126 - Test Failure Details .................................................................................................................................................... 105

Figure 127 - HTML Logger Attachments ....................................................................................................................................... 106

Figure 128 - HTML Action Logger Output ..................................................................................................................................... 107

Figure 129 - A passing test ............................................................................................................................................................ 107

Figure 130 - Log of a passing test .................................................................................................................................................. 108

Table of Tables Table 1 - Hands-On-Lab Software Requirements .............................................................................................................................. 8

Table 2 - Suggested focus and time map .......................................................................................................................................... 9



Introduction

Overview

Note

This Hands-on Lab was initially created for Visual Studio 11 Beta. If you are using a newer version of Visual Studio, you may need to follow slightly different steps to those prescribed.

Coded UI Tests, which we released in Visual Studio 2010, has seen a lot of adoption. It provided a very effective and powerful model for functional UI Testing. It gives a lot of flexibility to the user for building her test projects. As the complexity of applications that are being tested increases, it becomes more and more important to follow a structured approach to building Coded UI Tests. Users have been asking for guidance on how to structure their Coded UI Tests so that it can scale to large projects and teams. The Visual Studio ALM Rangers are a group of people who have a lot of experience in building real-life Coded UI Tests for large projects. They have come together to build a detailed guidance document for building Coded UI Tests. This hands-on-lab provides a very useful companion for the Coded UI Test guidance. It walks through two scenarios which will help the practitioner in understanding the steps required to build Maintainable Coded UI Tests and update them when the UI changes.

Mathew Aniyan (Senior Program Manager, Visual Studio ALM)

Visual Studio ALM Rangers The Visual Studio ALM Rangers are a special group with members from the Visual Studio Product group, Microsoft Services, Microsoft Most Valued Professionals (MVP) and Visual Studio Community Leads. Their mission is to provide out-of-band solutions to missing features and guidance.

This guide is intended for - s of Visual Studio. They are intermediate to advanced users of Visual Studio and have in-depth understanding of the product features in a real-world environment. Parts of this guide might be useful to novices and experts, but they are not the intended audience for this guide.

Prerequisites To complete the basic and advanced hands-on-lab walk-through scenarios you need the following environment:

Visual Studio 2012 Release Candidate Virtual Image http://blogs.msdn.com/b/briankel/archive/2011/09/16/visual-studio-11-application-lifecycle-management-virtual-machine-and-hands-on-labs-demo-scripts.aspx

A single server (physical or virtual) environment that has the following software installed and configured:

Software Version Note

Operating System Windows Server 2008 R2

IIS IIS7 Shipped as part of operating system.

SQL Server SQL Server 2008 R2 Enterprise edition recommended.

Visual Studio 2012 2012

Team Foundation Server 2012 2012

Table 1 - Hands-On-Lab Software Requirements
http://blogs.msdn.com/b/briankel/archive/2011/09/16/visual-studio-11-application-lifecycle-management-virtual-machine-and-hands-on-labs-demo-scripts.aspxhttp://blogs.msdn.com/b/briankel/archive/2011/09/16/visual-studio-11-application-lifecycle-management-virtual-machine-and-hands-on-labs-demo-scripts.aspx



Paths The HOL refers to the working directory as in this document, which by default refers to the following path on Rangers VMs: C:\ HOL\

Suggested Focus and Time Map If you are intending to follow the Hands-on Lab (HOL) step by step, use these times as a guideline. If, however, you are intending to investigate each step in detail to double the times as a bare minimum.

Topic Duration in minutes Page

Exercise #1a or #1b:

Step 1 Context 10 10/46

Step 2 Start Visual Studio 10 13/49

Step 3 Adding UI Maps and Recording Navigation 25 19/55

Step 4 Adding Validations 10 29/67

Step 5 Building Test Cases 10 34/70

Step 6 Making our tests robust 25 37/72

Total Exercise #1 90

Exercise #2:

Step 1 Context 5 82

Step 2 Create Project 10 82

Step 3 Add Test Case 10 85

Step 4 Verify UI Map 5 95

Step 5 Update UI Map 5 97


Exercise #3

Step 1 Context 5 100

Step 2 Create Project 5 100

Step 3 Create the Test Steps 5 101

Step 4 Checking the Test Works 5 103

Step 5 Breaking the Test 5 104

Step 6 Enabling the HTML Logger 5 105

Step 6 Fixing the Test 5 107


TOTAL 160

Table 2 - Suggested focus and time map

We wish you a pleasant and interesting journey!



Exercise 1a (MVC Version):

Step 1: Context This HOL has been designed around the Fabrikam Fiber web site available on the Visual Studio Release Candidate image. Navigate to http://intranet.fabrikamfiber.com/Dashboard.aspx and explore the application. Pay Particular attention to the Dashboard page, adding a new ticket, viewing ticket details, and the Tickets page as these four pages will be the focus of our Hands on lab.

Figure 1 - Fabrikam Dashboard Page
http://blogs.msdn.com/b/briankel/archive/2011/09/16/visual-studio-11-application-lifecycle-management-virtual-machine-and-hands-on-labs-demo-scripts.aspxhttp://intranet.fabrikamfiber.com/Dashboard.aspx



Figure 2 - New Ticket Page



Figure 3 - Ticket Detail Page



Figure 4 - Tickets Page

Step 2: Start Visual Studio Ultimate Environment

OBJECTIVE

In this step, we start and setup the Visual Studio environment.

1. Open Visual Studio.

Choose Start, All Programs, Microsoft Visual Studio 2012, Visual Studio 2012.



Figure 5 - Microsoft Visual Studio 2012 in Programs Menu

2. If this is the first time launching Visual Studio for this user, you will be prompted to Choose Environment Settings. Choose the settings that are most appropriate to the kind of development that you do and click the Start Visual Studio button.

3. You will see the following environment once Visual Studio has initialized successfully:



Figure 6 - Microsoft Visual Studio 2012 Startup Environment

4. Take the opportunity to explore the Getting Started, Guidance and Resources, and Latest News tabs. 5. Create a new project.

6. Select the Blank Solution template from The Other Project Types, Visual Studio Solutions, name the solution FabrikamFiber.Web.Tests and place it in the directory:



Figure 7 - Installed Templates

7. Select the solution in Solution Explorer, right-click and Choose File, Add, New Project.

Figure 8 - Add New Project Menu

8. Choose Coded UI Test Project from Visual C#\ Test Projects and name the new project FabrikamFiber.Web.Tests.CUITests:



Figure 9 - Installed Test Templates

9. Click Cancel when prompted and the resulting projects should look as follows:

Figure 10 - Solution Explorer

10. Right click on the FabrikamFiber.Web.Tests.CUITests project and select Add, New Folder. 11. Name The new folder UIMaps 12. Repeat the process and add a folder named Utility



13. The resulting projects should look as follows

Figure 11 - Coded UI Test Project Structure

REVIEW

We have started Visual Studio, selected the appropriate profile if needed, explored the new home page, and created a new test

project with a couple folders.



Step 3: Adding UI Maps and Recording Navigation

OBJECTIVE

What we want to do now is to record the UI actions for several different pages in the Fabrikam website.

We are going to make a separate map for each page of the site.

This is the test case we are going to exercise:

Navigate to the Fabrikam Intranet site.

Add a new Ticket

Validate the ticket is added correctly

Delete The Ticket

1. Add a new UI Map

Right click on the UI Maps folder and

Figure 12 - Add New Item

2. From the resulting dialog, select Coded UI Test Map, change the name to something meaningful like DashboardUIMap and click the Add button.



Figure 13 - Coded UI Test Map Template

NOTE

The Coded UI Test Builder is launched and displayed in the lower right hand corner of your screen.

Figure 14 - Coded UI Test Builder



3. Press record button. 4. Launch Internet Explorer 5. Type in the address: http://intranet.fabrikamfiber.com/ and click the enter key. 6. you can

delete them and re-record as appropriate.

ALERT | WARNING

It is important to type the URL into the Internet Explorer address bar rather than using a shortcut or copy and paste. When the

test is executed on a different machine, the shortcuts may not exist.

7. Click the Generate Code button and add a method name as LaunchBrowserAndNavToFabrikamDashboard , then click Add and Generate. Best practice is to add a comment for each generated method, this step will be omitted in future steps for brevity.

Figure 15 - Generate Method With Comment

8. Next click record again and click on the Create New button.

Figure 16 - Create New Ticket

9. Click the Generate Code button on the Coded UI Test Builder and enter CreateNewTicket then click Add and Generate.



Figure 17 - Generate Method with Comment

NOTE

Next we will generate the UI map for our Create Test Ticket page. The key here is that we do not want or need to launch internet explorer again, we want to resume at the spot where we left off. If you already closed the browser, before recording we will open IE -> navigate to the Fabrikam Site, and click the create new button.

10. Because this is a different page and we want to interact with it independent of the other pages, we are going to create a new UI Map. Close the Coded UI builder if it is open then to create the UI Map, right click on the UI Maps folder and select Add,

11. From the resulting dialog, select Coded UI Test Map, change the name to something meaningful like CreateTicketUIMap.uitest and click the Add button.

12. Again, the Coded UI builder is launched. Click the record button ->Fill in the ticket details as seen in Figure 18, click Create, then click generate code In the Coded UI Test Builder.



Figure 18 - New Sample Ticket

13. Enter CreateSampleTicket and click Add and Generate.



Figure 19 - Generate New Sample Ticket Method

14. Close the coded UI Builder. 15. That brings us to the next page which we will call the Ticket Details page. On this page we are interested only validating

the contents of the ticket and returning to the dashboard. Again go to solution explorer in visual studio, right click on the UI Maps folder and

16. From the resulting dialog, select Coded UI Test Map, change the name to something meaningful like TicketDetailUIMap.uitest and click the Add button. Again, the Coded UI Test builder is launched.

17. Click the record button -> Click the Back to list link.



Figure 20 - Return to List

18. Click the Generate Code Button and type in the name ReturnToList -> click Add and Generate.



Figure 21 - Generate Return to List Method

19. Close the Coded UI test builder. 20. There is two more clean-up step we want to record. First we are going to delete the new ticket from the Tickets page. This

is a new page so we are going to add another UI Map. 21. Again go to solution explorer in visual studio, right click on the UI Maps folder and

22. From the resulting dialog, select Coded UI Test Map, change the name to something meaningful like TicketsUIMap.uitest and click the Add button. Again, the Coded UI Test builder is launched.

23. Click the record button -> Click the ticket ref link corresponding to the Ticket we just added.

Figure 22 - Service Ticket Ref Link

24. Click Generate Code -> Enter OpenTicket for the name -> Click Add and Generate.



Figure 23 - Generate Open Ticket code

25. Close the CodedUI Test Builder. 26. Right Click on the TicketDetailUIMap and select Edit With Coded UI Test Builder. Press Record and click the delete Link.

Click the Generate code button and Name the method NavigateToDeletePage.

Figure 24 - Generate Delete Navigation

27. Close the CodedUI Test Builder. 28. Finally add one more UI Map called DeleteUIMap.uitest. Press Record and click the Delete Button. Click Generate Code

and enter the following:



Figure 25 - Generate Delete Ticket

ALERT | WARNING

The final thing we want to do with our UI Maps is to close the Browser. This is important as eventually these tests should be automated and run as part of a build. we will run out of memory and 2) this can really mess up our tests depending on how the site manages session.

29. Close the CodedUI Test Builder. 30. We are going to close the browser from the Dashboard window. In Solution Explorer, highlight the

DashboardUIMap.UITest, right-click, select Edit With Coded UI Test Builder. The recorder is launched.



Figure 26 - Edit Existing UI Map

31. Press Record 32. Close The Browser Window 33. Click Generate Code -> Enter CloseBrowser for the name -> Click Add and Generate.

REVIEW

We have broken down our site under test into several pages. We have added a Coded UI Map for each page, and we have

recorded some navigation steps.

Step 4: Adding Validations

OBJECTIVE

Now that we have completed recording our navigation steps, we want to start validating the contents of

the pages.

1. Before beginning we want to have a sample ticket ready for validation. If the sample ticket from the previous step does not exist, repeat sub-steps 1 12 of step 3 to create a sample ticket and leave the browser open to the details page. We will be validating the contents of the fields outlined in red as in Figure 27.



Figure 27 - Details page validation.

2. To begin adding our validations we want to modify the TicketDetailUIMap. To launch the coded UI Test Builder, right click on TicketDetailUIMap.uitest and select Edit With Coded UI Test Builder

3. The first thing we want to do is validate the Title value. Drag the crosshair control on the Coded UI Test Builder onto the web page until the ticket area is highlighted in blue, then release the left mouse button.



Figure 28 - Adding an assertion

4. This is a lot more HTML than we want to validate so we are going to use the arrowed control selector at the top of the assertion dialog to help us get more granular.

Figure 29 Add Assertions Dialog

5. This control selector will help us move through the control tree when simply dragging and dropping the cross hairs is not granular enough. Clicking the up arrow (or typing Alt +up arrow) will bring us to the highlighted controls parent. Similarly, clicking the down arrow (or typing Alt +down arrow) will bring us to the highlighted controls child, clicking the left arrow (or typing Alt +left arrow) will bring us to the highlighted controls previous sibling, and clicking the right arrow (or typing Alt +right arrow) will bring us to the highlighted controls next sibling.

6. To go from highlighting the ticket area to just the title field we need to start with the ticket area highlighted, then click the down arrow once, then the right arrow 3 times.



Figure 30 Validate Ticket Title

7. In the Inner Highlight the Inner Text row and click the Add Assertion button

Figure 31 - Defining Assertion

8. Populate the Add Assertion dialog as follows and click OK.

Documents

Coded UI Testing HOL