Click here to Skip to main content
Click here to Skip to main content

UI Test Automation Using Coded UI

, 13 Jul 2014
Rate this:
Please Sign up or sign in to vote.
In this article I have tried to explain about UI Automaton using Coded UI

Introduction

There was a time when everyone used to write the Unit Test Cases in MS Excel with all the Unit Test Steps and the developer used to perform all these steps one by one by going through all the Unit Test Cases and the steps associated with these UTs. It used to be really time consuming and lengthy process especially if the application is big or the UI is complicated.

The same unit test execution process used to become a bottle neck due to any code change and large number of Unit Tests had to be executed manually in order to make sure that the new change has not broken any existing functionality.

In today’s fast pace where everyone wants to get the work done quickly without manual intervention and in automated fashion. Everyone would like to just run a command to get the work done and without manual intervention while the activity is getting performed. Preference is just verify the final output.

As this world is moving towards automation, the automation testing is no way behind in any manner being it Functional testing or UI testing. Every day we listen about new software for automation testing.

This white paper provides information for .Net developers who want to automate the application’s UI with Coded UI test automation framework.

What is Coded UI

Recently I was looking for a solution to automate the User Interface testing where multiple inputs were required to be provided by the user manually that was tiring and time consuming process hence was looking for a smarter solution to automate the UI testing which can be recorded, saved and play backed back, to test the code changes quickly without manual intervention.

Coded UI Tests are automated tests that drive the application through its user interface. These tests include functional testing of the UI controls. They let you verify that the whole application, including its user interface, is functioning correctly. Coded UI tests are particularly useful where there is validation or other login in the user interface, for example in a web page. They can be used to automate the existing manual test cases also.

Coded UI tests help the user to test the User Interface of the application. These tests allow verifying the application functionally. Coded UI assist in verifying the Validation logic exists in the UI layer itself most of the time. It has capability to verify the controls on the User Interface against the values for the correctness.

Other Solutions

There are many solutions available in the market to automate the User Interface including HP's QuickTest Professional, IBM Rational Functional Tester. The other famous, readily available and open source tool to overcome the User Interface automation problem is Selenium which also records the tests and play back as and when required. There was no tool available in the market from Microsoft which could the same without putting much effort. With Visual Studio Microsoft has come up with a solution for UI unit testing as Coded UI.

Where Coded UI Fits In?

Most of the developers who have Visual Studio installed would prefer to do the Unit Testing with in Visual Studio instead of using a 3rd party tool. That is where the Coded UI test comes in handy and available from Microsoft with in Visual Studio. There is no extra step required for Coded UI to be installed on developer’s machine. Once you install the Premium or Ultimate edition of Visual Studio, you are done with the installation of Coded UI feature too.

Availability of Coded UI

In order to use Coded UI, one should have either Premium or Ultimate edition of Visual Studio 2010/2012/2013.

Composition of Coded UI test

The composition of a Coded UI test is easy to understand and can be divided into the following files:

UIMap.uitest

This file is an XML representation of the UIMap class which includes windows, controls, properties, methods, assertions and actions.

UIMap.cs

 Any customization done to the UIMap is to be stored in this file. If changes are made directly to the UIMap.designer.vb file, those changes will be lost if a recording is done, as the file is regenerated.

Create a separate UIMap file for each module in your application under test.

UIMap.Designer.cs

This is a partial class representing the classes for various controls and their fields, properties and methods.

TIP: Do not modify the UIMap.designer.cs file directly. If you do this, the changes to the file will be overwritten.

CodedUITest.cs

This class represents the actual CodedUI test class, method invocation, and assertion invocation. All methods and assertions are by default invoked from the UIMap.designer.cs file. This class has TestClass decorated with [CodedUITest] attribute and contains multiple methods decorated with [TestMethod] attribute.

Features/Benefits of Coded UI

  • User Interface testing is performed along with validations.
  • Code is generated in VB.Net/C#.
  • Test Cases can be recorded and playback.
  • Integrated with ALM Story
    • Can be executed a part of daily build.
  • Superior extensibility based on need.
  • Integrated with Visual Studio so no need to buy separate license.
  • Coded UI works for Web as well as Windows applications.
  • Well known Microsoft support.

Creating Coded UI Tests

The Coded UI Tests can be created in the following ways

  • Fast Forward Automation using MTM
  • Generate Coded UI from existing recording (Convert the recorded actions from manual test)
  • Generate a new Coded UI Test from scratch using Coded UI Test Builder.
  • Write own Coded UI.

The scope of this white paper is limited to “Generate a new Coded UI Test from scratch using Coded UI Test Builder” only.

TIP: Use the Coded UI Test Builder whenever possible.

Coded UI Test Builder

Each Coded UI Test generation will require each of the following steps to be followed.

  • Record/Stop/Pause
  • Edit Recorded Steps
  • Add Assertions
  • Generate Code

Create Coded UI Tests

Creating New Coded UI Project

To start with Coded UI first we need to create a Test Project which will keep all the Coded UI tests. Creation of new Coded UI Project involves the following steps

  • Open Visual Studio 2012
  • Choose File > New > Project
  • Choose the required language template (C# or VB.Net). We would be using C#.
  • Choose Coded UI Project
  • Give it a name
  • Click on OK button

Adding Coded UI Tests

By default Visual Studio is configured to create the Coded UI tests using “Generate a new Coded UI Test from scratch using Coded UI Test Builder” only.

TIP: In the application under test, use meaningful names when you create the UI controls. This gives more meaning and usability to the automatically generated control names.

As soon as the Coded UI test project is created, Generate Code for Coded UI Test dialog box is opened. It will ask for the options given below.

  • Record actions, edit ui maps or add assertions
  • Use an existing action recording

Choose Record actions, edit UI map or add assertions which is selected by default too. Click OK

Coded UI Test Builder

After selecting the option, Coded UI Test Builder is opened and Visual Studio is minimized. This is an indication that we are ready for recording the actions.

As described earlier Coded UI Test Builder does the recording based on the following 4 actions

  1. Record Steps
  2. Update or Delete Steps
  3. Verify Results (Add Assertions)
  4. Generate Code

TIP: If the user interface (UI) changes, re-record the test methods, or the assertion methods, or re-record the affected sections of an existing test method.

Record a sequence of actions.

Recording of an action majorly require the following steps.

  • Start Recording, by selecting the Record button.
  • Pause Recording, to handle some other action between recording i.e. Generate Code.
  • Edit/Delete actions, in case if the wrong action is recorded.
  • Generate code to create the code for the recorded actions. Code generation will be done for each recorded actions.
  • Add Assertions to verify the results.

TIP: Create each assertion using the Coded UI Test Builder, which automatically adds an assertion method to the UIMap.Designer.cs file.

Planning about the actions to be recorded

Success of any task depends on how well it has been planned. Better planning leads to most the successful the task completion. It is always better that before start recording the actions; we plan about all the steps that will be a part of recording.

Here we would be using the Windows calculator application to record the steps and we will automate the addition & subtraction of two numbers. The following steps would be involved while recording the Addition and Subtraction of 2 numbers.

  • Click on “Start Recording” button
  • Go to Start, Click on Run
  • Type “calc” in Run Window
  • Pause the recording, View Recorded Steps
  • Delete the wrong step (If any)
  •  Generate Code; provide a name which matches with the action. i.e. Open Calculator.

TIP: When you create a method, use a meaningful method name instead of the default name. A meaningful name helps identify the purpose of the method.

  • Resume Recording, Provide first number, Pause recording, Generate Code
  • Resume Recording, Provide operator (addition or subtraction), Pause recording, Generate Code
  • Resume Recording, Provide second number, Pause recording, Generate Code.
  • Add Assertions.

TIP: Create your test as a sequence of recorded methods.

TIP: When possible, limit each recorded method to fewer than 10 actions. This modular approach makes it easier to replace a method if the UI changes.

Conclusion

We have seen how Coded UI can make a developer’s life so easy especially when there is a complex UI which needs multiple inputs every time. Where the Test cases are required to be record once and played as many times as required. The advantage of using Coded UI over other tools is the same tool can be used to automate Web as well as Windows applications. Coded UI tests were launched with Visual Studio 2010 and with every release of VS, they are getting more powerful. Clearly it is a great tool provided by the technology leader and In order to feel the power of Coded UI test we should start using the same in our projects and find out how much ROI we achieved by using the same tool and I am sure that the Coded UI will not let you down.

References and Further Reading…

http://msdn.microsoft.com/en-us/library/dd286726.aspx

http://msdn.microsoft.com/en-us/library/dd286681(v=vs.100).aspx

http://msdn.microsoft.com/en-us/library/ee624082.aspx

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Mohit1110
Architect Infinite Computer Solutions
India India
Dear Technologists,
 
This is Mohit Jain, working in Bangalore as Technical Architect. I love to work in Microsoft Technologies. I am having rich 13+ years of experience. Started career with VB, ASP then moved to .Net. I have worked with some reputed companies like Microsoft, American Express and Syntel Limited etc. I have helped many reputed clients in designing and architecting the enterprise applications.
 
I own MCTS in Web and Windows Development, MCPD in Web, Windows and Enterprise Development, MCSD in Web and Windows Development. I have extensive knowledge on ASP.Net, C#, VB.Net, ASP, JavaScript, Web Services, WCF Services and SQL Server.
 
If you have any challenges in .Net code, feel free to contact me at mail_mohitjain@yahoo.co.in, I will try my best to help you out.
Follow on   Twitter

Comments and Discussions

 
QuestionTest Automation for hidden controls in Coded UI Pinmemberepsanthu16-Jul-14 20:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140814.1 | Last Updated 13 Jul 2014
Article Copyright 2014 by Mohit1110
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid