The AJAX Control Toolkit is an incredibly popular set of controls that enable you to easily add JavaScript functionality to an ASP.NET application. The AJAX Control Toolkit has consistently been one of the top three most popular downloads from CodePlex since the birth of CodePlex (see http://www.CodePlex.com).
Lately, we’ve been thinking hard about methods of improving the quality of the AJAX Control Toolkit controls. We want to improve the quality of the AJAX Control Toolkit controls so that they match the very high standards of quality of the official ASP.NET framework controls such as the GridView and TextBox controls.
In discussions of quality, the issue of testing immediately comes up. Right now, the AJAX Control Toolkit solution includes a test project named ToolkitTests. (You can see this project if you download the Source version of the AJAX Control Toolkit from CodePlex). This project contains a set of automated functional tests for each control in the AJAX Control Toolkit (see Figure 1). For example, there is a file named Calendar.aspx which contains a set of tests for the Calendar control.
Figure 1 – Tests in the ToolkitTests project
You can run all of these tests by requesting the Default.aspx page from the ToolkitTests project. The Default.aspx page contains a test runner. If you click the Select All link, and then click the Run Tests button, then all of the tests are run (see Figure 2).
Figure 2 – Running tests
Having a set of tests like this that can be run automatically is invaluable. It means that we can modify existing AJAX Control Toolkit controls and know whether we have broken existing functionality. We run these tests in a standard set of browsers to ensure that the AJAX Control Toolkit controls are cross-browser compatible.
In order to improve the quality of the AJAX Control Toolkit, we plan to significantly improve the quality of the tests that accompany the Toolkit. However, the AJAX Control Toolkit currently uses a proprietary functional test framework. The test framework was invented for the AJAX Control Toolkit and it is used nowhere else.
For this reason, we decided to investigate using alternative functional test frameworks. We had several specific criteria for selecting a functional test framework:
1) The functional test framework needs to be an open-source project.
2) The functional test framework needs to work with all major browsers including Internet Explorer, FireFox, Safari, Opera, and Chrome.
3) The functional test framework needs to support simulating complex browser interactions.
4) The functional test framework needs to be easy for the Quality Assurance team at Microsoft to use.
In order to meet all of these requirements, we decided to use the Lightweight Test Automation Framework as the testing framework for the AJAX Control Toolkit moving forward.
The Lightweight Test Automation Framework
The Lightweight Test Automation Framework (LTAF) is an open source functional test framework available from CodePlex at:
http://aspnet.codeplex.com/Wiki/View.aspx?title=ASP.NET%20QA
LTAF is a lightweight version of the very same testing framework that the ASP.NET Quality Assurance team uses to test the standard ASP.NET controls. The framework is compatible with all major web browsers and the framework enables you to simulate complex JavaScript behaviors.
An important consideration for the ASP.NET AJAX team is that the Microsoft QA team is already very familiar with this framework. Therefore, any member of the Microsoft QA team can easily test the AJAX Control Toolkit using this framework.
Our plan is to include all of the LTAF tests used by the QA team with the download of the AJAX Control Toolkit. That way, if you modify the Toolkit, then you can run the LTAF tests to check whether or not your modifications have broken existing controls.
In the following sections, I provide you with a brief introduction to using LTAF.
Downloading and Installing LTAF
After downloading the Microsoft.Web.Testing.Lightweight.zip file from the CodePlex website, you need to remember to unblock the downloaded ZIP. Right-click the file and click the Unblock button (see Figure 3).
Figure 3 – Unblocking the download file
Next, unzip the file into a new folder and double-click the Microsoft.Web.Testing.Lightweight.sln file to open up the LTAF solution. Build the project by selecting the menu option Build, Build Solution.
The LTAF solution contains the following projects:
· SampleWebSite – Contains sample LTAF tests
· FunctionalTestsWebSite – Contains BVT tests written using LTAF
· Microsoft.Web.Testing.Lightweight – Contains the source code for LTAF
· Microsoft.Web.Testing.Lightweight.UnitTests – Contains unit tests for LTAF
The fastest way to try out LTAF is to run the tests in the SampleWebSite project.
Right-click the Default.aspx page contained in the Test folder and select the menu option View In Browser. The page in Figure 4 appears.
Figure 4 – The LTAF Test Runner
Click the link labeled All Test Cases to select all of the tests and click the Run Tests button to run the tests. All the tests that pass are highlighted with green and a checkmark (see Figure 5).
Figure 5 – LTAF test results
So you might be wondering where the functional tests executed by the test runner are defined. You can find the tests in the App_Code\Test folder. For example, the Test folder includes a class named UserManagementTests.cs that contains a set of tests for the Login.aspx page. An abridged version of this class is contained in Listing 1.
Listing 1 – UserManagementTests.cs [C#]
using System;
using Microsoft.Web.Testing.Light;
[WebTestClass]
public class UserManagementTests
{
[WebTestMethod]
public void SignInAndSignOut()
{
// Navigate to the login page
HtmlPage page = new HtmlPage("Login.aspx");
// Fill Login control user/password and click login button
page.Elements.Find("UserName").SetText("ValidUser");
page.Elements.Find("Password").SetText("foo");
page.Elements.Find("LoginButton").Click(WaitFor.Postback);
// Verify content of the Home page
Assert.AreEqual("Welcome back ValidUser!", page.Elements.Find("LoginName1").GetInnerText());
// Click the logout tab
page.Elements.Find("tab-signout").Click(WaitFor.Postback);
// Verify login tab now exists.
Assert.IsTrue(page.Elements.Exists("tab-login"));
}
}
The class in Listing 1 is decorated with the WebTestClass attribute and the functional test method is decorated with the WebTestMethod attribute.
The SignInAndSignOut() method performs the following tests:
1) It verifies that entering the user name ValidUser and password foo into the Login form on the Login.aspx page results in a page that displays the message “Welcome back ValidUser!”.
2) It verifies that clicking the Logout tab causes the Login tab to appear.
Notice how the HtmlPage class and HtmlElement class are used to interact with a web page. For example, the HtmlPage.Elements.Find() method is used to retrieve a particular DOM element. The HtmlElement.Click() method is used to simulate a button click.
Using LTAF in a New or Existing ASP.NET Website
If you want to use LTAF with a new or existing ASP.NET Website then you need to do two things:
1) Add a reference to the Microsoft.Web.Testing.Lightweight.dll assembly
2) Add a folder named Test that contains the test runner (the Default.aspx and DriverPage.aspx files)
For example, imagine that you have created an ASP.NET website that contains the ASP.NET page in Listing 2. This page contains a single button. Whenever you click the button, the number displayed by the Label control is incremented by 1 (see Figure 6).
Listing 2 – Counter.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnAdd_Click(object sender, EventArgs e)
{
var newValue = int.Parse(lblCounter.Text) + 1;
lblCounter.Text = newValue.ToString();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label
id="lblCounter"
Text="0"
Runat="server" />
<asp:Button
id="btnAdd"
Text="Add 1"
Runat="server" OnClick="btnAdd_Click" />
</div>
</form>
</body>
</html>
Figure 6 – The Counters.aspx page
If you want to test this page using LTAF then you first need to add a reference to the Microsoft.Web.Testing.Lightweight.dll assembly. Select the menu option Website, Add Reference. Click the Browse tab and browse to the folder where you downloaded LTAF (see Figure 7).
Figure 7 – Adding a reference to LTAF
Next, we need to add the Test folder (that contains the Default.aspx and DriverPage.aspx files) into our new website. Using Windows Explorer, navigate to the directory where you downloaded LTAF. You can drag the Test folder from Window Explorer into the Solution Explorer window in your website project (or copy and paste the folder). After you add this folder, your Solution Explorer window should look like Figure 8.
Figure 8 – Solution Explorer with Test folder
Now, we are ready to write some tests. Add a new class to your website named CounterTests.cs (Visual Studio will prompt you to add the class to your App_Code folder). Enter the code in Listing 3.
Listing 3 – CounterTests.cs
using Microsoft.Web.Testing.Light;
[WebTestClass]
public class CounterTests
{
[WebTestMethod]
public void ButtonIncrementsByOne()
{
// Get the Counters.aspx page
HtmlPage page = new HtmlPage("/Counter.aspx");
// Click the btnAdd Button
page.Elements.Find("btnAdd").Click(WaitFor.Postback);
// Get the value of the Counters Label
var labelValue = page.Elements.Find("lblCounter").GetInnerText();
// Verify that the Label has the value 1
Assert.AreEqual("1", labelValue);
}
}
The test class in Listing 3 contains one test method named ButtonIncrementsByOne(). This test verifies that clicking the button increments the value displayed in the Label by one.
You can run the test by opening the Test/Default.aspx page. After you open this page, you can select the ButtonIncrementsByOne test, and click the Run Tests button to execute the test. When the test runs successfully, you get the page in Figure 9.
Figure 9 – Results of running test
Conclusion
The Lightweight Testing Automation Framework (LTAF) is a very powerful framework for building functional tests. It is (a lightweight version) of the testing framework used by the ASP.NET Quality Assurance team and it is the testing framework used to build tests for the ASP.NET framework.
You can use this test framework to build functional tests for your ASP.NET applications. Simply download LTAF from CodePlex and start writing your functional tests in either C# or VB.NET.
We plan to use LTAF for the AJAX Control Toolkit because (1) LTAF works with all modern browsers including Internet Explorer, Firefox, Safari, Opera, and Chrome (2) it is open-source and (3) because LTAF is based on the same testing framework used internally by the ASP.NET QA team, we expect the QA team to continue to invest in improving LTAF over time.