Have you ever tried to automate dynamic interfaces and complex AJAX applications using the conventional automation testing tools? If the answer is “Yes”, you’ve most probably run into some difficulties in getting the proper reference to the dynamically created HTML objects once the DOM tree has been modified. Usually, a number of workarounds are necessary in order for your code to find the proper HTML element. This nightmare could even be a deal breaker when evaluating one tool or another.

I know because I am one of the QAs at Telerik’s ASP.NET teams and I have to test and develop tests for our RadControls every single day. I’ve tried multiple tools to automate a part of my job, but one of them has made my life particularly easy. This is why I decided to write this blog post and walk you through the common problems you might meet when testing AJAX applications and how you can easily solve them with Telerik Test Studio.

Common Problems

ASP.NET and AJAX applications have QAs face two major challenges:

  • Partial page updates – only a part of the DOM is refreshed and even though it can stay the same it can also change greatly
  • HTML generated through JavaScript – complex UI controls (like Telerik’s Window and Tooltip for ASP.NET AJAX) create their markup on the client; custom code can also change the page’s HTML dynamically. This is the essence of a web app – flexibility and speed

Take the MS Coded UI Testing Framework for example. In order to get it to test an application that involves these scenarios you need to:

  1. Record the test. Obviously, you can’t avoid that in any case. :)
  2. In my experience, at this step the test always fails, which means that you need to spend time investigating the generic exception you will get.
  3. Start debugging the auto generated files that get a reference to the element. They are huge and finding the search criteria can take a very long time.
  4. Find new search criteria that will work for the given case/test/page and write it in the designer code file. Doing that is quite complex and may depend on the page and the actions the test takes before that. And you have to do it manually.
  5. Hope it will work and the page will not change anymore.

Telerik is Here to Make Your Life Easier

Telerik Test Studio allows for more effective test automation in terms of recording, executing and debugging functional tests. It has the options for creating both recorded and coded tests.

There is an easy way to get around at least two major obstacles when developing automated tests on ASP .NET AJAX controls by means of Telerik Test Studio.

  1. Verifying a specific expected result after an AJAX update based on an explicit wait for a certain condition instead of using hardcoded execution delays. Just record a verification step that you can choose from a predefined list:

  2. Managing the process of finding dynamically changed DOM elements using find expressions.
Let’s illustrate this with a typical case - a Telerik ASP.NET Grid and a control displaying dynamic content like our ToolTipManager together in an UpdatePanel and to use the RadToolTipManager to tooltipify grid elements. This can be seen on the Tooltipified RadGrid online demo.

In such cases the ID of the tooltip control is generated dynamically so once the test is recorded with a certain ID it would fail during the execution because each time the tooltips are created, their IDs will be different.

Test Studio allows you to change the find expressions from the hardcoded “exact match” operator to “contains”. This is easily done through the built in element explorer dialog:

And not a single line of code was written that day :)

This approach can be used for all kinds of content, from our RadControls to any custom content you generate.

There's More

You have just seen it – Test Studio works seamlessly with Telerik’s controls for ASP .NET AJAX - the Test Studio solution provides wrappers and translators for each of them. These integrated adapters are specially designed for automatically identifying the control and exposing its API for the purpose of making the functional testing easier by extending the default list of verification and action steps that are available for the standard HTML elements.

A typical example of the common properties that could be exposed and added as a “verification” or “wait for condition” step with single click can be seen on the following picture:

You can even create wrappers and translators for your own controls and tools, plug them in and create your tests without breaking a sweat.

Here is what each package brings:

  • The free Telerik Testing Framework helps you to automate AJAX, Silverlight and WPF applications using coded steps. It has wrappers that identify our controls and lets you use them in coded tests.
  • Test Studio can record, playback and manage functional, performance and load tests with the Visual Studio environment. It has both the wrappers and the translators for all our controls so you can record and write tests at your leisure.

Don’t Be Shy, Try It

I have never seen an automation tool that is more convenient and user friendly, while offering such a rich feature set. Find out more by going through the comparison between Test Studio and the Visual Studio standard testing framework. You can also download a free trial, so don’t hesitate to give it a shot. As always, I am open to hear how you are used to test your AJAX-enabled applications to overcome the issues I discussed above.
About the Author

Mihail Parvanov

has been working as a Senior QA engineer at Telerik’s ASP .NET AJAX division since 2010. He is responsible for developing the automated test infrastructure for one of the RadControls teams. Apart from work, Mihail’s main interests include riding a bike, playing volleyball or travelling with friends.

Related Posts


Comments are disabled in preview mode.