Coded UI Test : How to automate a web application using Code First approach

Now a days Microsoft Visual Studio Coded UI test is becoming popular as it is supporting basic windows UI object as well as WPF and Silverlight UI object. Coded UI test framework has its own search algorithm to search UI object from the window and web page. In our previous post we have shown on how to automate a web application using record and playback approach. Here I will explain how we can automate a Web application using code first approach. We do not record any steps here. We write code for every steps here.

Our example application is Microsoft’s page “http://www.microsoft.com”.

Step One : Writing Test cases
At first we write the test cases that we have to automate.

Test Case : Verify search functionality of Microsoft Page. 

Steps:

• Navigate to http://www.microsoft.com
• Enter the search text “Coded UI Test” in the search text box. 
• Click on Search button
• Verify the result.

Step Two: Create a Coded UI test Project

• Open Visual Studio (In my case it is visual studio 2013)
• Navigate to File>New>Project at File Menu.

• New Project window is displayed.

• Select “Test” from left side Project Template category under visual C#.
• Select “Coded UI Test Project”. Note that in my case .Net Framework 4.5.1 is selected.
• Enter Project name as “MSUITest”.
• Select Location.
• Enter solution name. In my case this is the same as project name.
• Check “Create directory for solution” option
• Click on Ok button

• A new coded UI test project is created and Recorder window (Title : Generate Code for Coded UI test) is displayed. Since we write code for every steps, we do not need recorder. Click Cancel button to close the recorder window.

Step Three: Write Codes for every step

• Go to Visual studio editor and see that there is a namespace names “MSUITest” as same with the project name.
• Under this namespace there is a class “CodedUITest1”.
• Under this class there is a method named “CodedUITestMethod1”. Note that there is an attribute “[TestMethod]”.
• We will write separate method for every test cases and multiple methods can be write in a single class.
• Generally all the test cases for single feature writes in a single class.
• Method name should be similar to Test case title so that we can understand about the test cases by the method name.
• Also we write the test case title as comment before the method name.

• Here we write the Test case title as comment before the method name.

//Verify search functionality of Bing Search engine.

• Here we rename the method name as

  public void VerifySearchFunctionality()

• Now start Writing the codes.
• At first we have to run the Browser application and navigate to Microsoft Page. Code will be

//Navigate to http://www.microsoft.com
string AppURL = "http://www.microsoft.com";
BrowserWindow Browser = BrowserWindow.Launch(new Uri(AppURL));

Note that BrowserWindow class is used here for opening the IE browser. Coded UI test opens Internet explorer as default browser. If we run our script to other browsers like Chrome or Firefox, we need to different codes and run the script in different way. I will show you to my other posts.
Here Launch() method is used to launch the application in IE browser.

• Enter the search text “Coded UI Test” in the search text box. 

//Enter the search text “Coded UI Test” in the search text box.  
UITestControl SearchTextBox = new UITestControl(Browser);
SearchTextBox.TechnologyName = "Web";
SearchTextBox.SearchProperties.Add(UITestControl.PropertyNames.ControlType, "Edit");
Keyboard.SendKeys(SearchTextBox, "Coded UI Test");

Note that we have UITestControl class here to detect the element from the web page. We have taken control type as Search properties for search text box.
We have taken help the coded UI test builder tool to determine the properties of an object. I will discuss it on my later post on how we can determine the properties of an object by using coded UI test builder tool. Now for this task, we just need to right click on  Visual studio editor and select “Generate Code for Coded UI test” and click “Use Coded UI Test Builder” like the following.

Coded UI Test builder window is displayed and now just drag the UI spy button (Crosshair) and drop it.

Now property list window is displayed. It has a list of properties and you can use any property as search properties. 

Common Syntax to add a search property of an object.
UIObject.SearchProperties.Add(UIClass.PropertyNames.propertyName, porpertyValue); 

Here,
UIObject : It is UI object that needs to be operated to automate the application. It is declared under respective UI class.
UIClass : It is the class of UI object. Coded UI test has a set of classes to handle all basic windows UI.
propertyName : It is the list of available property list of that UI object.
porpertyValue : It is the available property value.

• Click on Search button

//Click on Search button 
UITestControl SearchButton = new UITestControl(Browser);
SearchButton.TechnologyName = "Web";
SearchButton.SearchProperties.Add(UITestControl.PropertyNames.Name, "ctl00$SearchButton");
Mouse.Click(SearchButton);

• Verify the result.

//Verify the result
UITestControl SearchResult = new UITestControl(Browser);
SearchResult.TechnologyName = "Web";
SearchResult.SearchProperties.Add(UITestControl.PropertyNames.ControlType, "Hyperlink");
SearchResult.SearchProperties.Add(UITestControl.PropertyNames.FriendlyName, "Test Automation Using Visual Studio 2010 Coded UI ");
Assert.AreEqual("Hyperlink", SearchResult.ControlType.Name);         

Note that we add  AreEqual() under Assert class which is a built in class under Visual Studio Test Framework used for verifying the result. It has two argument as “Expected” and “Actual” result.

• Now VerifySearchFunctionality() method looks like the following:

Step Four: Run the test

• Go to Build menu and click on Build Solution option.

• Go to Test menu and click on Windows>Test Explorer.

• In the Test Explorer, Test Name is displayed.

• Right click on the Test Name and click on “Run Selected Test”.

• Test will run and Test result is displayed at the Test Explorer.

Here we see how we can write the test steps by using C# code and run it. We use the full infrastructure of Coded UI test but we write the code that is in our control and we can reuse it for different purposes. It is more maintainable.
That’s all for now….
Happy Coded UI testing!!!

Coded UI Test : How to automate a WPF application using Code First approach

Now a days Microsoft Visual Studio Coded UI test is becoming popular as it is supporting basic windows UI object as well as WPF and Silverlight UI object. Coded UI test framework has its own search algorithm to search UI object from the WPF window. In our previous post we have shown on how to automate a WPF application using record and playback approach. Here I will explain how we can automate a WPF application using code first approach. We do not record any steps here. We write code for every steps here.

Our example application is the sample WPF calculator application downloaded from Microsoft site. Note that you need to crate a solution with the downloaded project and then build it. Go to bin folder of your solution and create a shortcut of the exe file and pin it to task bar.

Step One : Writing Test cases
At first we write the test cases that we have to automate.

Test Case : Verify addition of two numbers in calculator application.
Steps:

• Open the Calculator application.
• Click on 7 (seven) button.
• Click (+) plus button.
• Click 3 (three) button.
• Click (=) equals button.
• Verify the result.

Step Two: Create a Coded UI test Project

• Open Visual Studio (In my case it is visual studio 2013)
• Navigate to File>New>Project at File Menu.

• New Project window is displayed.

• Select “Test” from left side Project Template category under visual C#.
• Select “Coded UI Test Project”. Note that in my case .Net Framework 4.5.1 is selected.
• Enter Project name as “CalculatorUITest”.
• Select Location.
• Enter solution name. In my case this is the same as project name.
• Check “Create directory for solution” option
• Click on Ok button

• A new coded UI test project is created and Recorder window (Title : Generate Code for Coded UI test) is displayed. Since we write code for every steps, we do not need recorder. Click Cancel button to close the recorder window.

Step Three: Write codes for every step

• Go to Visual studio editor and see that there is a namespace names “CalculatorUITest” as same with the project name.
• Under this namespace there is a class “CodedUITest1”.
• Under this class there is a method named “CodedUITestMethod1”. Note that there is an attribute “[TestMethod]”.
• We will write separate method for every test cases and multiple methods can be write in a single class.
• Generally all the test cases for single feature writes in a single class.
• Method name should be similar to Test case title so that we can understand about the test cases by the method name.
• Also we write the test case title as comment before the method name.

• Here we write the Test case title as comment before the method name.

 //Verify addition of two numbers in calculator application.

• Here we rename the method name as

  public void VerifyAddTwoNumber()

• Now start Writing the codes.
• At first we have to run the calculator application. Code will be

// Open the Calculator application. 
string ApplicationPath = "C:\\Cal\\csharp\\bin\\Debug\\AvalonCalculator2.exe";
ApplicationUnderTest application = ApplicationUnderTest.Launch(ApplicationPath);

Note that we define a variable  “ApplicationPath” to assign the calculator application with path. Also we run the application by using the method “Launch()” under “ApplicationUnderTest”  class that takes application name with path as argument.

• Now we need to define the Calculator parent window which will help us to search objects on Parent window.

//Define Calculator Main window
WpfWindow mainWindow = new WpfWindow();
mainWindow.SearchProperties.Add(WpfWindow.PropertyNames.Name, "WPF Calculator");
mainWindow.WindowTitles.Add("WPF Calculator");

Note that we declare an object called “mainWindow” under WpfWindow class. WpfWindow is the window class for all basic WPF application. Every time we need to have a Parent window object so that we can use it as reference of other objects on that window. Coded UI test has its own algorithm to search an object. Parent window helps search an object on that window. Note that we use WpfWindow class in stead of WinWindow class as this is a WPF application and coded UI test has a separate set of classes for WPF UI objects.

We add a search properties on of that window and that is “Name”. In this way we can add multiple properties. We have taken help the coded UI test builder tool to determine the properties of an object. I will discuss it on my later post on how we can determine the properties of an object by using coded UI test builder tool. Now for this task, we just need to right click on  Visual studio editor and select “Generate Code for Coded UI test” and click “Use Coded UI Test Builder” like the following.

Coded UI Test builder window is displayed and now just drag the UI spy button (Crosshair) and drop it to Calculator window.

Now property list window is displayed. It has a list of properties and you can use any property as search properties.

Common Syntax to add a search property of an object.
UIObject.SearchProperties.Add(UIClass.PropertyNames.propertyName, porpertyValue);

Here,
UIObject : It is UI object that needs to be operated to automate the application. It is declared under respective UI class.
UIClass : It is the class of UI object. Coded UI test has a set of classes to handle all basic windows UI.
propertyName : It is the list of available property list of that UI object.
porpertyValue : It is the available property value.
Note that we add the window title name of that UI object by the following statement.
mainWindow.WindowTitles.Add("WPF Calculator");

Here we add title name with so that system can search the object of that window that has given title name.

• Now we need to click on 7 (seven) button.

//Click on 7 (seven) button. 
WpfButton btnSeven = new WpfButton(mainWindow);
btnSeven.SearchProperties.Add(WpfButton.PropertyNames.Name, "7");
btnSeven.SearchProperties.Add(WpfButton.PropertyNames.AutomationId, "B7");
btnSeven.WindowTitles.Add("WPF Calculator");
Mouse.Click(btnSeven);

Note that we have declared a variable called “btnSeven” for clicking seven button. For WPF application, all buttons are generally under WpfButton class. Also we add a search property “Name” as “7” so that system can search it. 

Note that we add another search properties “AutomationId” that is specially for automation of WPF UI object. Make sure that this property value is unique. At the time of UI design we need to assign this property value so that at the time of automation tester can use this properties as a search property to detect UI objects. Coded UI test search algorithm works faster to detect UI object using Automation ID. 

We use mainWindow object as an argument so that system search this btnSeven object under WPF Calculator window. In this way we define the range of search area and helps search algorithm to take minimum time to search.

Also we add the window title here. 

For click on 7 (seven) button we add Click() method under Mouse class.

• Click (+) plus button

//Click (+) plus button. 
WpfButton btnPlus = new WpfButton(mainWindow);
btnPlus.SearchProperties.Add(WpfButton.PropertyNames.Name, "+");
btnPlus.SearchProperties.Add(WpfButton.PropertyNames.AutomationId, "BPlus");
btnPlus.WindowTitles.Add("WPF Calculator");
Mouse.Click(btnPlus);

• Click 3 (three) button

//Click 3 (three) button.
WpfButton btnThree = new WpfButton(mainWindow);
btnThree.SearchProperties.Add(WpfButton.PropertyNames.Name, "3");
btnThree.SearchProperties.Add(WpfButton.PropertyNames.AutomationId, "B3");
btnThree.WindowTitles.Add("WPF Calculator");
Mouse.Click(btnThree);

• Click (=) equals button

//Click (=) equals button. 
WpfButton btnEquals = new WpfButton(mainWindow);
btnEquals.SearchProperties.Add(WpfButton.PropertyNames.Name, "=");
btnEquals.SearchProperties.Add(WpfButton.PropertyNames.AutomationId, "BEqual");
btnEquals.WindowTitles.Add("WPF Calculator");
Mouse.Click(btnEquals);

• Verify the result.

//Verify the result. 
WpfEdit txtResult = new WpfEdit(mainWindow);
txtResult.WindowTitles.Add("WPF Calculator");
Assert.AreEqual("10", txtResult.Text);

Note that we add  AreEqual() under Assert class which is a built in class under Visual Studio Test Framework used for verifying the result. It has two argument as “Expected” and “Actual” result.

• Now VerifyAddTwoNumber() method looks like the following:

 

Step Four: Playback the test

• Go to Build menu and click on Build Solution option.

• Go to Test menu and click on Windows>Test Explorer.

• In the Test Explorer, Test Name “VerifyAddTwoNumber” is displayed.

• Right click on the Test Name and click on “Run Selected Test”.

• Test will run and Test result is displayed at the Test Explorer.

Here we see how we can write the test steps by using C# code and run it. We use the full infrastructure of Coded UI test but we write the code that is in our control and we can reuse it for different purposes. It is more maintainable.

That’s all for now….

Happy Coded UI testing!!!

Coded UI Test : How to automate a WPF application using Record and Playback approach

Now a days Microsoft Visual Studio Coded UI test is becoming popular as it is supporting basic windows UI object as well as WPF and Silverlight UI object. Coded UI test framework has its own search algorithm to search UI object from the WPF window. Here I will explain how we can automate a WPF application using record and playback approach.

Our example application is the sample WPF calculator application downloaded from Microsoft site. Note that you need to crate a solution with the downloaded project and then build it. Go to bin folder of your solution and create a shortcut of the exe file and pin it to task bar.

Step One : Writing Test cases

At first we write the test cases that we have to automate.

Test Case : Verify addition of two numbers in calculator application.

Steps:

• Open the Calculator application.
• Click on 7 (seven) button.
• Click (+) plus button.
• Click 3 (three) button.
• Click (=) equals button.
• Verify the result.

Step Two: Create a Coded UI test Project

• Open Visual Studio (In my case it is visual studio 2013)
• Navigate to File>New>Project at File Menu.

• New Project window is displayed.

• Select “Test” from left side Project Template category under visual C#.
• Select “Coded UI Test Project”. Note that in my case .Net Framework 4.5.1 is selected.
• Enter Project name as “CalculatorUITest”.
• Select Location.
• Enter solution name. In my case this is the same as project name.
• Check “Create directory for solution” option
• Click on Ok button

• A new coded UI test project is created and Recorder window (Title : Generate Code for Coded UI test) is displayed.

Step Three: Record the test case steps

There are two options of the Recorder window. 

• Record actions, edit UI map or add assertions : This options is selected by default. Selecting this option will open the recording tool bar. New steps can be recorded and for verifying the result assertions can be added.

• Use an existing action recording : This option is selected for existing action recording.

• Select the first option “Record actions, edit UI map or add assertions”.

• Click on Ok button.

• Coded UI test builder window is displayed and click red color “Start Recording” button. Record will start.

• Click on Calculator icon from taskbar and calculator application is started.

• Click on 7 (seven) button

• Click (+) plus button

• Click 3 (three) button

• Click (=) equals button

• Now stop the recording by clicking stop button and do not close the calculator application.

• Click on Generate UI code button

• Enter Method Name “AddTwoNumber” and click “Add and Generate” button at Generate Code window.

• Now Coded UI Test will generate related code for the recorded steps and displayed the method name at Visual studio editor.

• Now we need to verify the result. There is a button   to drag and drop on a UI control in Coded UI Test builder window.

• When move mouse pointer on this button an icon is displayed. Now drag the Crosshair icon and drop it to the Calculator Result box.

• Add Assertions window is displayed

• Scroll down to the Property Column “Text” and select the property.

• Click on Add Assertion button.

• A window is displayed for entering expected result. Select “AreEqual” from Comparator Combo box. Enter comparison value as “10” and Message on Assertion Failure as “Invalid result.”.

• Click on OK button.
• Click on Generate UI code button

• Enter Method Name “VerifyResult” and click “Add and Generate” button at Generate Code window.

• A New method is created at CodedUITestMethod1().

• Now recording is complete and close the coded UI Test builder window. Also close the calculator application if it is opened.

Step Four: Playback the test

• Go to Build menu and click on Build Solution option.

• Go to Test menu and click on Windows>Test Explorer.

• In the Test Explorer, Test Name “CodedUITestMethod1” is displayed.

• Right click on the Test Name and click on “Run Selected Test”.

• Test will run and Test result is displayed at the Test Explorer.

Here we see how we can record the test and run it. In my next post I will show how we can write the test script by using Hand coding of a WPF application and run it.

That’s all for now….

Happy Coded UI testing!!!