UI Testing with CUITe « Practical Success with Agile!

21Oct/110

UI Testing with CUITe

This blog entry is part of a multi-part series to incorporate Visual Studio Coded UI tests (CUIT) into a sophisticated data driven web application.

CUITe is a thin layer developed on top of the Microsoft Visual Studio Coded UI Test engine. This blog entry walks through the creation of creating a CUITe test.

I switched to CUITe framework due to the separation of the Object Repository from the automation code. This approach moves away from the UIMaps in the base CUIT framework. Make your own determination but I feel that CUITe makes the coding of these unit tests more like MSTest or Nunit and in that sense more developer friendly than QA Engineer friendly. Again, make your own judgment on that aspect.

Future blogs will address scaling the framework to make CUITe usable for large applications.

All of the blog entries will use a basic website created in VS 2010. Use the steps in the walkthrough provided by Microsoft to create a website with membership and login.

Create the sample Web Site

For this installment of the blog you can stop once you reach the "Adding New Users" section of the Walkthrough.

Walkthrough: Creating a Web Site with Membership and User Login

Download CUITe from codeplex

CUITe

Create the test project

Open the solution created under "Create the sample Web Site"
Right click the Solution and select Add | New Project
Select Visual C# | Test project
Name it something appropriate. I usually append the word "Tests" to the project name I am putting under test. So in my case the web site is named WebSiteCuit so my test project is named WebSiteCuitTests
Your solution should look something like this in VS 2010
Delete the UnitTest1.cs file
Right click the test project. In this example, WebSiteCuitTests and select Add | Coded UI Test…
Click Cancel when the Dialog box pops asking to record or select existing. At this point we just wanted to make sure all of the Coded UI Test references are created for us.
Add a reference to the CUITe.dll from c:\Program Files(x86)\Microsoft\CUITe folder.
Create a folder "Object Repository" under the test project.
Your test project should look similar to this:

Let's create our first test

In the next step CUITe needs us to navigate to our application. In our case a web site but I've created this using the built in web server for Visual Studio so we need to launch the application once to get the local url. Right click the Default.aspx page and select View in Browser…
Copy the url of the homepage and close the browser window
Open CUITe Object Recorder (Start | All Programs | CUITe | CUITe Object Recorder)
Paste the url of your application in the Address Bar at the top of the CUITe Object Recorder
Verify that the language drop down is set to the programming language that you want the tests recorded in. I'm using C#
Click the Record button at the top left corner
Place your mouse pointer in the "User Name" text box and then left click. (You should see the text window at the bottom start to fill with code.
Place your mouse pointer in the "Password" text box and then left click.
Click the "Log In" button
Since you didn't key in your User Name and Password you will see the "Your login attempt was not successful. Please try again." Message. Place your mouse over the message and when you receive a red box around it left click it. We'll use this message in an assert.
You'll have a series of public members that look similar to this:
Click the "Code" button at the top of the Object Recorder. The page definition code will appear in a notepad instance.
Go back to Visual Studio and right click the "Object Repository" Folder
Select Add | Class. Name your class PALogin (I'm using PA to indicate Page)
Click Add
Copy and Paste the code from the notepad instance keeping the namespace of your project.

Your code should look something like this:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.VisualStudio.TestTools.UITesting;
using CUITe.Controls.HtmlControls;

namespace WebSiteCuitTests.Object_Repository
{
    class PALogin : CUITe_BrowserWindow
    {
        public new string sWindowTitle = "";
        public CUITe_HtmlEdit txtLogin1UserName = new CUITe_HtmlEdit("Id=Login1_UserName");
        public CUITe_HtmlPassword txtLogin1Password = new CUITe_HtmlPassword("Id=Login1_Password");
        public CUITe_HtmlInputButton btnLogIn = new CUITe_HtmlInputButton("Id=Login1_LoginButton");
        public CUITe_HtmlCell celTemp1 = new CUITe_HtmlCell(
               "InnerText=Your login attempt was not successful. Please try again.");
    }
}

Open the CodedUITest.cs file in the test project
Right click on the class name and select Refactor | Rename. Name the class LoginCodedUITest
Right click the CodedUITest1.cs file in Solution Explorer and select Rename. Name the class LoginCodedUITest.cs to match the class name
Add a using statement for CUITe
```
using CUITe.Controls.HtmlControls;
```
Open up the “Additional test attributes” code region and uncomment the MyTestInitialization method and add the following line of code:
```
CUITe_BrowserWindow.CloseAllBrowsers();
```

Add the following code to CodedUITestMethod1():

CUITe_BrowserWindow.Launch("http://localhost:41901/WebSiteCuit/Login.aspx");
PALogin pgPALogin = CUITe_BrowserWindow.GetBrowserWindow<PALogin>();
pgPALogin.txtLogin1UserName.SetText("Jimmy");
pgPALogin.txtLogin1Password.SetText("Jimmypwd");
pgPALogin.btnLogIn.Click();
StringAssert.Contains(pgPALogin.celTemp1.UnWrap().InnerText, "attempt was not successful");