WPF Application Automation in Telerik Test Studio

This post is written by Guest Author (and my friend) Amit Kumar Singh.

Hello buddy, so how it’s going? Good, Ok! Then let’s proceed towards the tutorial which I am finally writing after the motivation given by my friend on how can I overcome my laziness and be awesome ;).

So, the application that we are going to target will be a WPF application built in .NET. Telerik Test Studio provides quite an extensive support for automating the WPF applications. Although this is not free, but we can use the trial version for its evaluation. The link to download the Telerik Test Studio is http://www.telerik.com/download/teststudio.

Just use your email id to register and activate it for 1 month trial period. Also while installing it don’t forget to check the checkbox indicating that it has to be installed for Visual Studio with the respective VS’s version, as we are going to use it as a VS plugin in this tutorial and of course you can use it as a standalone testing tool but using it with Visual Studio makes it more cool as you can use your all techniques and shortcuts for Visual Studio while writing and debugging the test cases.

Ok now, once you have successfully installed the VS plugin for Telerik Test Studio we can move on how to write our first coded step. Telerik also provides its own feature for recording a test case and you have not to write a single line of code for it. Just record and play any test case as simple as that of recording your voice and playing it.

So now, the very first and the only step is create a test project in Visual Studio. So goto New Project and under Telerik select Visual C# Test Studio Project as C# is my comfort zone. Below is the snapshot for the same:

WPF Automation Telerik

And please change this dull default name here like “TestStudioProject1” to some cool name like “HakunaMatataMyFirstTestProject” or “BazingaTheFirstWPFCodedProject”. Click Ok and that’s all, you are welcome to your first test studio project window where in solution explorer you will be able to see your created project as shown below-

WPF Automation Telerik

The very first thing is to delete this WebTest1.tstest as we are not going to write any test case to automate web browsers and so add a WPF test to this project as shown in the below snapshot-

WPF Automation Telerik

Give it some name like MyFirstWPFtest. Once this is done my friend, you will find that a .tstest is created in the solution explorer as shown in the image below-

WPF Automation Telerik

Open this .tstest file by double-clicking on it and the UI to automate test cases is shown as per below-

WPF Automation Telerik

This is the UI built by Telerik to help you in automating test cases for WPF application. So the very first thing to do is to configure the WPF application which we have to automate. In case you don’t have a WPF application, you can try this WPF calculator app uploaded at this location. This is also the same app on which we are going to write our coded step.

So, please click on the button left to the “Use debugger” link shown in the image above, a screen like below will be presented with various options like where to enter the path of the WPF application and other more valuable options that you can select as per your comfort.

WPF Automation Telerik

So to enter the path, click on Browse and select your application. Also uncheck the option for Use default path. Click Ok and now we are all set to write our first WPF coded step.

Create your first coded step by clicking on Add->Click on “Add A Coded Step”. Refer the screenshot below-

WPF Automation Telerik

The next screen that you will see is as below-

WPF Automation Telerik

You will see that in the first tab present in the left a file with name “MyFirstWpfTest.tstest.cs” is created, this is actually the file where we will write our C# code to automate the test case. Also the current tab named as “MyFirstWpfTest.tstest” which is currently in focus right now as shown in the image above is the screen which is giving a summary of our test cases like you can see the name as “New Coded Step”. We can change it suit the test case as per its purpose. So right click on this test case and select rename, enter the description you feel will be good. Refer the screenshot below-

WPF Automation Telerik

Ok now double click on this test case and you will see the control moves to the method where we can write the code for this test case. Refer the screenshot below-

WPF Automation Telerik

In this method we can write the code to automate the test case. Now suppose we want to write a test case to test whether the calculator application is doing the add operation correctly. So how to do it? The very first thing is to think how we will accomplish the task like in this case we need to first click on some number from 1 to 9, let’s say it be 9 and clicking on “+” button and then again clicking on some number between from 1 to 9, let’s say it be 6 and then clicking on “=” button. We know the result should be 15 , this is what is called the expected result in the terminology of automation testing and now we know there is some result generated by the calculator in the texbox window, which is called the actual result. So, if this actual result is equal to the expected result, “Congratulations! Your very first test case has been passed!” and if it’s not equal to it you need to see where you had fallen back and debug the code, find the problem, solve it and pass your test case. Ok, let’s write our test case in C# using the approach discussed above.

The very first thing is to get the reference of the calculator application, so declare an instance of WPF application as below which will be initialized to our application.

WpfApplication wpfApp; // Instance of wpf application

[CodedStep(@"New Coded Step")]
public void MyFirstWpfTest_CodedStep()
{
}

We need to initialize this WPF app instance and for this we need to do before the test case starts since our test case will access this instance, for this Telerik provides a method which we can override to do all the initialization work.

Refer the below code for reference-

public override void OnBeforeTestStarted()
        {
            base.OnBeforeTestStarted();
            wpfApp = Manager.ActiveApplication;
        }

Note that we have initialized the wpfApp instance using the Manager.ActiveApplication as we have already configured the WPF calculator app so Telerik Test Studio is very much aware of which will be our active application that we are going to automate, we can also launch the application using Manager.LaunchApplication(//path of application) in case you want your application to be launched from some path and do not want it to configure in Telerik test studio.

Ok, now the application is configured to launch and we can use the instance of the WPF application to write our first test case to test whether the add operation is performing in correct way.
So if you can remember and have not a poor memory like me about the approach that we discussed above how to write the test case. The first thing is to find the required button say with label 9, well we can find it using the .Find.ByName <Button> method present in the instance of the window in which this button is present. So the total code will be like-

wpfApp.MainWindow.Find.ByName<Button>(//name of the button);

Now the next thing that may have come to your mind is how to find the name of this button 9, for this we have to use another tool named WPFInspector. This tool helps in traversing the WPF elements present in your application like what was the name with which they were created, their position in terms of x and y co-ordinates and their size etc.
Download the tool from here https://wpfinspector.codeplex.com/releases/view/64045, install it and run. A window like below will be visible-

WPF Automation Telerik

Now run the WPF calculator app, it will become visible as per below in the wpf inspector application-

WPF Automation Telerik

Now click attach and the next window will be like-

WPF Automation Telerik

Now open the calculator application, press cntrl key and hover the button 9 you will see the information related to button 9 is automatically displayed in this WPF inspector window. Refer the image below

WPF Automation Telerik

Now in the search textbox type “Name” and click enter, and we can find the name of this button as shown in the image below-

WPF Automation Telerik

So the name of this button is “button9” and to find this button now we can write the code like below-

Button nineButton = wpfApp.MainWindow.Find.ByName<Button>("button9");

We can automate the click on this button as per the code below-

nineButton.User.Click();

Similary we can do the other part of the above approach as per the below code-

Button addButton = wpfApp.MainWindow.Find.ByName<Button>("buttonAdd");
addButton.User.Click();
Button sixButton = wpfApp.MainWindow.Find.ByName<Button>("button6");
sixButton.User.Click();
Button equalButton = wpfApp.MainWindow.Find.ByName<Button>("buttonEQ");
equalButton.User.Click();

Now we can check whether the actual result is same as per the expected result as per the code below-

// Check whether the output is correct
TextBox tbResult = wpfApp.MainWindow.Find.ByName<TextBox>("textBox1");
Assert.IsTrue(tbResult.Text.Equals("15"));

Finally our test case will look like this-

[CodedStep(@"New Coded Step")]
public void MyFirstWpfTest_CodedStep()
{
// Click on the "9", "6", "+" and "=" button
       Button nineButton = wpfApp.MainWindow.Find.ByName<Button>("button9");
       nineButton.User.Click();
       Button addButton = wpfApp.MainWindow.Find.ByName<Button>("buttonAdd");
       addButton.User.Click();
       Button sixButton = wpfApp.MainWindow.Find.ByName<Button>("button6");
       sixButton.User.Click();
       Button equalButton = wpfApp.MainWindow.Find.ByName<Button>("buttonEQ");
       equalButton.User.Click();


       // Check whether the output is correct
       TextBox tbResult = wpfApp.MainWindow.Find.ByName<TextBox>("textBox1");
       Assert.IsTrue(tbResult.Text.Equals("15"));
  }

We can run or debug this test as required, for this open Test explorer by clickin on tab Test->Windows->Test explorer and test explorer window will be opened on the left hand side.

Next thing is to right click on this test case and click run selected test.
If all goes well, you will see the test case getting pass as per the image below-

WPF Automation Telerik

That’s all for the day and thanks for being patient with me!