How to use Coded UI in Visual Studio to create automated UI tests

To use the Coded UI for automated testing you need to know three things:

  1. You can use the recording function for Visual Studio to do most of the work
  2. You can do it manually but it requires time and patience.
  3. There are some details which you need to be aware of before you can use Coded UI for testing

 

Automated UI test recording

This is rather straight forward.

To be able to record a test the following must be true:

  • You application but not in debug mode while you are recording your UI test
  • You have to have a physical focus in a C# test file inside a test method where the recording will create a test call created by the recording process.
  • Before you can start recording you must have your application running.

codeduip3

Next open the “Coded UI Test Builder”:

codeduip4

It should look like this:

codeduip6.PNG

At this point open your application on the screen. Then press the red recording button to start recording.

After you are done with your application test steps creation you can add assertions to the test. This happens from the circle in the test builder.

When you are done press the blue arrow pointing to the right with lines below it(the last icon in the test builder). This will generate the test code.

After this, you can start your tests from the test explorer.

Manual UI tests creation

Manual testing can be harder and time-consuming but has the advantage of precision. The basic structure goes as:

  • Create a browser object pointing to a web application
  • Start searching for controls based on search and/or filter properties
  • Do something to the control
  • Do an assertion for the test

[TestMethod]
public void CodedUITestMethod2()
{

// To generate code for this test, select "Generate Code for Coded UI Test" from the shortcut menu and select one of the menu items.
BrowserWindow browser = BrowserWindow.Launch("some your to your web application");
browser.Maximized = true;
UITestControl control = new UITestControl(browser);
control.TechnologyName = "Web";
control.SearchProperties.Add(HtmlHyperlink.PropertyNames.TagName, "A", HtmlHyperlink.PropertyNames.InnerText, "some text", HtmlHyperlink.PropertyNames.ControlType, ControlType.Hyperlink.Name);
control.SearchProperties.Add(HtmlHyperlink.PropertyNames.Href, "some partial URL", PropertyExpressionOperator.Contains);
control.WaitForControlReady();

Assert.AreEqual(true, control.Exists);
control.DrawHighlight();

UITestControl control2 = new UITestControl(browser);
control2.TechnologyName = "Web";
control2.SearchProperties.Add(HtmlInputButton.PropertyNames.ControlType, ControlType.Button.Name, HtmlHyperlink.PropertyNames.ValueAttribute, "some text", HtmlHyperlink.PropertyNames.Class, "some css class");
control2.WaitForControlReady();

Assert.AreEqual(true, control2.Exists);
control2.DrawHighlight();

UITestControl control3 = new UITestControl(browser);
control3.TechnologyName = "Web";
control3.SearchProperties.Add(HtmlHyperlink.PropertyNames.TagName, "input", HtmlEdit.PropertyNames.Name, "some name", HtmlHyperlink.PropertyNames.Id, "some ID");
control3.WaitForControlReady();

Assert.AreEqual(true, control3.Exists);
//tunnit.DrawHighlight();
control3.SetFocus();
control3.SetProperty(HtmlEdit.PropertyNames.Text, "some text");
System.Threading.Thread.Sleep(1000);

UITestControl person = new UITestControl(browser);
person.TechnologyName = "Web";
person.SearchProperties.Add(HtmlCell.PropertyNames.TagName, "td");
person.SearchProperties.Add(HtmlCell.PropertyNames.ValueAttribute, "namefield");
person.SearchProperties.Add(HtmlCell.PropertyNames.InnerText, "some text", PropertyExpressionOperator.Contains);

person.WaitForControlReady();
person.SetFocus();
Mouse.Click(person);

}

For more info on the controls and ways of using go here:

https://msdn.microsoft.com/en-us/library/microsoft.visualstudio.testtools.uitesting.htmlcontrols.aspx

Coded UI – Have to know things

Requirements

To use the Coded UI you need some version of Visual Studio that supports Coded UI. Currently as of this blog post only Visual Studio Enterprise supports it: https://www.visualstudio.com/en-us/products/compare-visual-studio-2015-products-vs.aspx

Running tests

You can run tests with or without debug mode for the tests. Notice that Coded UI test debugging is different than debugging your application, meaning that you have to run the debugging for test specifically from the text explorer.

codeduip1

To access the test explorer:

codeduip5

Debugging

You can’t have your application in debug mode when recording automated UI tests (this is true for Web application, not sure for windows applications). What you need to do is to run your application without debugging. For web apps what this does is that normally IIS Express is launched and the app will be running there. If you are running the app on a manual IIS site well then all you need to do is to start the app.

codeduip2

Browsers

Coded UI requires Internet Explorer unless you configure it otherwise.

You can start a browser from your code using the following code:

BrowserWindow browser = BrowserWindow.Launch(“some URL”);
browser.Maximized = true;

UIMap

This is a class inside your test project where the automated recorded tests are saved.

codeduip8

NOTICE: If you have the “Coded UI Test Builder” closed you can double click on the UIMap.uitest to get an overview of your recorded tests.

codeduip9

Dynamic controls or URLs

If you have dynamic controls or URLs then you need to remove the dynamic parts from the recorded code. This means that you have to inside the C# code to remove search properties of filter properties that define dynamic data. Notice that you have to make sure that the remaining properties are enough to find your controls or URLs

You can do this from your Coded UI test class by going to the declaration of the test function in the UIMap class:

codeduip7

Or by opening the UIMap.cs file and under it the UIMap.Designer.cs file.

codeduip8

Basically what you are looking for is something like the code example below. The commented out code is in this case, the dynamic data which changes. The code assumes that the rest of the properties will do the job in finding the control:


public HtmlCheckBox UI__listitem___id_5066CheckBox
{
get
{
if ((this.mUI__listitem___id_5066CheckBox == null))
{
this.mUI__listitem___id_5066CheckBox = new HtmlCheckBox(this);
#region Search Criteria
//this.mUI__listitem___id_5066CheckBox.SearchProperties[HtmlCheckBox.PropertyNames.Id] = "__id_50661";
//this.mUI__listitem___id_5066CheckBox.SearchProperties[HtmlCheckBox.PropertyNames.Name] = "__listitem___id_50660";
this.mUI__listitem___id_5066CheckBox.FilterProperties[HtmlCheckBox.PropertyNames.Value] = "some value";
this.mUI__listitem___id_5066CheckBox.FilterProperties[HtmlCheckBox.PropertyNames.LabeledBy] = null;
this.mUI__listitem___id_5066CheckBox.FilterProperties[HtmlCheckBox.PropertyNames.Title] = null;
this.mUI__listitem___id_5066CheckBox.FilterProperties[HtmlCheckBox.PropertyNames.Class] = "__checkbox";
this.mUI__listitem___id_5066CheckBox.FilterProperties[HtmlCheckBox.PropertyNames.ControlDefinition] = "name=\"__listitem___id_50660\" class=\"__ch";
this.mUI__listitem___id_5066CheckBox.FilterProperties[HtmlCheckBox.PropertyNames.TagInstance] = "27";
this.mUI__listitem___id_5066CheckBox.WindowTitles.Add("Some URL");
#endregion
}
return this.mUI__listitem___id_5066CheckBox;
}
}

Search and Filter properties when searching for controls – What’s the difference?

The difference is that the search properties act as AND operators. While the filter properties act as OR operators.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s