Telerik WebUI Test Studio

Telerik WebUI Test Studio powered by ArtOfTest is an automated software testing product that lets you simply construct nonscripted test cases for complex web applications. The product combines capabilities provided by ArtOfTest, a software quality assurance (QA) vendor, and Telerik, a vendor of developer tools and UI components for .NET Framework, into a powerful tool that offers a resourceful solution to the automated testing and QA. I'll provide an overview of the main features of Telerik WebUI Test Studio and run through how to use it in a sample testing scenario.

Telerik WebUI Test Studio Overview

Telerik WebUI Test Studio incorporates in its solution the ArtOfTest Automation Design Canvas tool which enables recording automated tests for ASP.NET applications and the WebAii Automation Framework which lets the product support testing of rich Internet applications (RIAs) and AJAX applications. In addition, the product includes RadControls translators that support testing Telerik RadControls for ASP.NET AJAX. Telerik WebUI Test Studio costs $2,500 for a design and runtime license for a specific machine, including one year of support. Now let's look at the Telerik WebUI Test Studio components.

WebAii Automation Framework

WebAii Automation Framework is a free .NET library, built to support RIAs and AJAX applications. By using the routines in the framework, you can enable access and validation of the UI elements of your web application. Using WebAii Automation Framework lets you detect bugs in software at the testing stage. The automated tests generated by the framework's extensive library let you quickly and with minimal effort run regression testing to uncover errors that could be generated as software ages and becomes more complex.

Using WebAii Automation Framework

WebAii Framework lets you create your tests using C# or Visual Basic.NET. To start using WebAii Framework, create a new Visual Studio 2008 Test Project in the solution and add a reference to WebAii API, represented by ArtOfTest.Webaii.dll. The example solution we'll look at in this article contains the test cases that will reference the .aspx and HTML pages in the main web application that's part of the entire Visual Studio 2008 solution, and it can also hold the test results, including log files.

You can manage the WebAii Framework settings through the Test project's app.config file. This file contains information such as the default browser to connect to, log location, simulation of mouse speed, timeout for a browser to respond, as well as other settings. Figure 1 shows the WebAii Automation Framework configuration section.

You can also use the NUnit testing framework with the WebAii library. The WebAii library includes a BaseNUnitTest base class under its TestTemplates namespace to enable tests to run with NUnit. You can find out more about the NUnit testing framework at http://www.nunit.org/index.php.

Now we're ready to learn how to do a test case. The benefit of WebAii Automation Framework is in its cross-browser support, which abstracts the type of the browser used and thus alleviates the need to specialize test cases according to a certain browser. Therefore, you can write your test case once and later specify the browser you want the test case to run against.

How the WebAii Library Aids in Testing

Before examining how to call library methods, let's look at WebAii library functionalities that can help ensure that your web application testing goes smoothly. The facilities provided by this library help the quality control (QC) engineer keep track of and maintain control mainly over the actions that occur on the browser page and also internal access and manipulation of UI elements by code.

On the web application level, the library provides built-in methods that enable annotations on the page to trace the UI actions. In addition, the WebAii library lets you capture snapshots of current executions and save them in a previously specified folder. The tester has complete control over the browser actions: Navigate to a certain site, refresh and stop the loading of the page, navigate backward and forward, clear history and cache, set cookies and query them, set timeouts and delay, claim resources, enable visual capture using bitmaps, and of course, locate UI elements to invoke actions on them. The running of the scripts visually simulates the actions as if they were live commands from the user. Figure 2 shows script commands that let you control the browser actions.

Let's look at how things are manipulated internally with the library routines. In the HTML-rendered markup, each Document Object Model (DOM) element has attributes. The library's methods use these attributes to gain control over the UI elements and run validation tests against them. WebAii Framework includes, under its Controls.HtmlControls namespace, controls to cover a wide pool of HTML elements, each with its corresponding actions. The flexibility that WebAii Framework provides to enable access to these elements makes it easier to find and handle them, especially for elements that have complex IDs.

To elaborate more, the Find class, under the WebAii.Core namespace, enables locating the element by tag content (i.e., attributes), if present; if not, the element is reachable by tackling its hierarchy in the DOM tree. The methods Find.ByNodeIndexPath(), Find.ByXPath(), and Find.ByTagIndex() exist to meet the previous criteria.

Another significant feature that WebAii Framework supports is the Test Region Object. This type of object is inserted in a manner to enclose a piece of code in the source code of the .aspx/HTML page that's being tested. With this feature, access is easier because the elements comprising this region can now be referenced by means of the region itself. Thus, you can relocate your test region to another page, and your test will still work. Another benefit that this object presents is scoping down the search to restrict it to only within the region. This means that in a case where two elements have the same partial value in their IDs, there will be no conflict in locating them if they belong to two different regions.

Most important, regions offer test adaptation to construct robust automated test cases. Decomposing the source code into regions lessens the need to adjust test cases according to the changes that affect the source code. Figure 3 shows a C# code sample that demonstrates the benefits of WebAii Framework that we've just reviewed.

After we've generated the test cases, it's time to run them. Test cases are gathered in a Test List Editor, as Figure 4 shows. The Test List Editor gives you the option to run or debug the wanted test cases.

Test results are shown in a tab to denote the status and final outcome of the test, specifying the line of code failure, if any, as Figure 5 shows. If you double-click the error message, you'll see additional information about the failure.

Design Canvas Tool

The Design Canvas Tool is a plug-in for Microsoft Visual Studio Team System 2008 Team Suite and Visual Studio 2008 Professional Edition that provides a recorder capability to let you record scriptless automated test cases. The Design Canvas Tool is built on top of the rich WebAii Automation Framework and lets you save browser actions. However, navigating between the recorded steps and the code-behind is possible; therefore, you can convert one to the other. You use the recording surface to create and follow up with your recorded steps.

As its name implies, the recording surface is a platform where recording of the actions take place. Using it is as simple as actually performing the actions you want on the page and having the recorder handle the tasks of following your steps and saving them. Figure 6 shows a snapshot of the recording surface as integrated in Visual Studio.

To start using the recording surface, follow these steps:

1.     Click Record.

2.     Enter the URL.

3.     Click the Navigate button.

4.     Record your steps.

5.     Run them.

Once the page is loaded, the hover-over highlighting button tracks the controls and actions on the page. As you hover over UI elements, they become featured by being boxed into a rectangle. Right-clicking inside the rectangle pops up a window in which the actions are listed. Here's an overview of the available options:

         Desktop Actions simulate the mouse actions.

         Invoke Events simulate JavaScript events.

         Verification a Sentence Verification Builder used for validation tests against the content, attributes, style, and visibility of UI elements. You can choose your validation options from drop-down lists to construct the sentence to be verified.

         Element Explorer Panel the internal hierarchy of the page is embodied in a tree where the upper node is that of the page. Then as we go deeper, we successively deal with the frames, WebAii Test regions, and the elements that form this page.

         On the level of the page node, some actions are enabled, such as loading the page in the browser, validating the elements in the hierarchy, and editing the properties. When the hover-over highlighting button is enabled, the Element Explorer Tool panel is populated by right-clicking the element and choosing the Add to Project Elements option. On the level of the elements are options to load the page and mostly to edit the FindParam of the element and locate it in the DOM tree, as I'll explain shortly.

         DOM Explorer Panel has the object model of the loaded page. When the page is opened in the browser, DOM Explorer lets you display the elements by their tag index and attributes. Clicking any element in the DOM Explorer wraps up the element in a rectangle to locate it. Inversely, right-clicking the element and choosing the Locate in DOM Explorer option lets you position the element in the DOM Explorer.

         Test Explorer Panel in this window, you can view, organize, and customize your ordered recorded steps and descriptions of them. For instance, you can choose which steps to be executed in which order, enable test annotation, and so on.

Binding Data and Data-Driven Tests

Data binding lets you build your own data dictionary, reference data from it, and tie the data to your methods and recorded steps. Filling your data grid will help you create data-driven tests easily, by following these steps:

1.     Start by clicking the Data tab from your WebAii test view.

2.     Click the Create New Table Button on the top of the page.

3.     Adjust the number of columns you need.

4.     Add the data you want.

While creating the code-behind file, you can reference the data you already created by calling Data followed by the index of the variable for example, Data\[1\]. You can also bind data can from within your recorded browser steps. To do so, in the Test Explorer window, right-click the recorded step and choose Properties. In the Properties window, locate Data Driven row and select from the drop-down list the property and data you want to bind with.

Mapping Recorded Steps into Code

Record some steps using the recorder. After doing so, click the Add Code Behind file to your test, right-click the recorded step, and choose the Convert to Code option. You can now navigate to the code-behind file and perform any modifications to it. Later, you can save and run your tests. However, once a step is converted to code, you can no longer convert it back into a regular step.

Mapping Code into Recorded Steps

In the code-behind file, add a method to perform a certain browser action. The method that incorporates the code should have a void return type and must not take any parameters. Once saved, the method is added as a step to the test explorer window and can be executed along with the other recorded steps.

RadControls Translators

The actions that the Design Canvas tool presents are generic for HTML controls. However, if the application is built using the RadControls for ASP.NET AJAX, you can benefit from more specific recorded automated tests.

Under the Properties button on the Translators tab, turn on all the translators. Each of the RadControls requires one or more translator, depending on the complexity of the control, to translate the actions associated with this specific type of control. Thus now, when hover-over highlighting is enabled, the recorder is aware of the type of the RadControl. The validation tests are enriched to cover as many features available for the control, starting from the verifications against the control itself, thanks to the Sentence Verification Builder, passing through its internal hierarchy, and ending with the desktop actions and JavaScript events against it.

Let's use the RadGrid example to explain this feature a bit more. Before enabling the settings of the RadGrid translator associated with the RadGrid control, the actions that can be performed are common to other elements, such as checking whether an element is visible/not visible, the text contained, and so on. However, with the RadGrid translator enabled, the recorder is rendered more intelligent and customized to validate the correctness of more specific related control features, such as the columns, cells, and hierarchy of the grid. As you right-click further on the control, you can navigate upward in its hierarchy.

This feature works similarly with other RadControls: calendar, color picker, tab strip, editor, panel bar, combo box, toolbar, and others. Imagine that you have an independent translator that recognizes the control, its functionality, its properties, and the actions to be checked against. Furthermore, with a simple right-click, you can choose the desired tests, record, and execute them.

With the RadControls translators, you can validate, in an abstract manner, the effectiveness of your ASP.NET AJAX application build with the Telerik RadControls and trust even the most little functional details.

Better Testing Through Automation

Through this introduction to the WebAii Automation Framework, Design Canvas by ArtOfTest, and Telerik WebUI Test Studio, I've provided information that will help you start building your own test cases through the WebAii API and run, validate, and analyze them. You've also seen that, for noncoded testing, Telerik WebUI Test Studio lets you track your browser actions and records them for you so that you can rerun, validate, and analyze them. These tools can help make your software testing more efficient and accurate, improving the quality and easing maintenance of your web applications.

Learn more about the tools discussed in this article:

Telerik website: http://www.telerik.com

WebUI Test Studio Product: http://www.telerik.com/products/web-ui-test-studio.aspx

WebUI Test Studio Resources: http://www.telerik.com/products/web-ui-test-studio/resources.aspx

WebUI Test Studio videos: http://tv.telerik.com/search/library/webui-test-studio

ArtOfTest website: http://www.artoftest.com

WebAii Framework home page: http://www.artoftest.com/products/webaii.aspx

Design Canvas home page: http://www.artoftest.com/products/design-canvas.aspx

Design Canvas videos: http://www.artoftest.com/community/videos.aspx

Rawane Madi ([email protected]) is a computer science graduate from the American University of Beirut. She started her career as a QC engineer, focusing on software testing for web and Windows applications, at CCC, a multinational construction company based in Athens, Greece.

Figure 1: WebAii Automation Framework configuration section

baseUrl="http://www.testserver.net/"

clientReadyTimeout="50000"

defaultBrowser="FireFox"

enableScriptLogging="false"

enableUILessRequestViewing="false"

executionDelay="0"

executionTimeout="60000"

localWebServer="None"

logLocation="C:WebAiiLog"

simulatedMouseMoveSpeed="0.3"

/>

Figure 2: Script commands to control browser actions

// Launch an instance of the browser

Manager.LaunchNewBrowser();

// Navigate to the test page

ActiveBrowser.NavigateTo(Path.Combine(TestContext.TestDir, TESTPAGE));

// Now click the toggle button.

Actions.Click(toggle);

// Finding the checkbox element

Element checkBox = Find.ById("checkBox");

// Check the checkbox

Actions.Check(checkBox, true);

// Select using index

Actions.SelectDropDown(Find.Elements\["droplist"\], 2);

// Capturing a snapshot of the current execution

Log.CaptureBrowser(ActiveBrowser);

Figure 3: Sample C# code

Source code:

Test code:

// Accessing the test region

TestRegion tableRegion = ActiveBrowser.Regions\["Table"\];

// Scoping the search within the Table region

Assert.IsNotNull(tableRegion.Find.ById("tableExample "));

// Find the banner image element

Element e = tableRegion.Find.ByXPath("//body\[1\]/table\[1\]/tbody\[1\]/tr\[1\]/td\[1\]/image\[1\]");

Figure 4: Test List Editor

Figure 5: Test results

Figure 6: Recording surface