Click here to Skip to main content
12,452,000 members (27,142 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

20K views
289 downloads
12 bookmarked
Posted

JavaScript Based Automated Testing for Web Applications

, 25 Feb 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
The idea was to create a wrapper parent HTML page which will 'host' the web-page to be tested in an iframe and then access its controls, populate value and perform clicks, etc...

Background

I've been looking for auto-testing tools for my web-app developed in C# having AJAX. I tried to find some tools but some were complex, some were paid and some would not allow me to tweak in. Some are listed below but I wanted something on which I had the total control and would be very lightweight and easily portable.

My inspirations:

  • http://watin.sourceforge.net
  • http://sahi.co.in/w/
  • http://seleniumhq.org/projects/ide/

Solution

So, finally getting back to my old JavaScript skills I ended up creating my own simple (and hopefully effective) auto-testing tool! The idea was to create a wrapper parent HTML page which will 'host' the web-page to be tested in an iframe and then access its controls, populate value and perform clicks, etc...

Start Testing Button

<input type="button" value="Start Testing" onclick="javascript:TC =
'EmptySearch';doTesting(false);" />

Load event for iframe (to continue testing after postback)

<div style="text-align: center">
            <iframe src="../Forms/SearchUser.aspx" id="ifrmUserSearch" name="ifrmUserSearch"
                width="96%" height="500px" onload="doTesting(true);" />
        </div>

*NOTE: Both the pages need to be on the same machine to be tested (cross domain testing is not allowed)

mA8a6.gif

Here's a sample image explaining my method:

And here's the wrapper page code:

1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html xmlns="http://www.w3.org/1999/xhtml">
3.<head>
4.    <title>Test User Search </title>

Logic and Flow (How Does it Recursively Loop)

As this is "your own code" there will be a one-time setup code which will require some effort. For example,

function setVariables()

You’ll need to declare variables for each control in the child page (page to be tested) used for testing. You’ll need to view-source the rendered page and pickup control Ids from it. So that controls can be directly accessed in the code-logic.

function doTesting(isResult)

This is the main function which is called ‘recursively’ until you mark a flag in your code to notify that the testing is complete (i.e. TC = "";). The isResult argument is meant to separate the server postback call of this function. In this function, after some preliminary checks there’s a Switch-case statement which determines in which test-case does this execution fall.

switch (TC)
        {        
            case "EmptySearch":
                if(isResult)
                {chkTC01.checked = false;  EmptySearch(true);//Tested, show notification}
                else
                {
                    if(chkTC01.checked) EmptySearch(false); // perform test
                   //set test-case variable & skip to next }
                   else {skipNext = true; TC = "HeaderSorting1";
               }
            break;

In each case the flow is as follows:

  • There’s a function for each test-case like function EmptySearch(done)
  • If isResult = true – means the test is already conducted so we uncheck the checkbox and call the test-case function with flag done=true
  • If test-case is yet to be performed then first we check whether the user has checked that test-case or not. Then we call the test-case routine.
  • ATTENTION: what happens at this point is tricky, so pay attention. Now from the test-case routine the script might trigger a postback which will mean that the iframe page is refreshed. The script execution can’t "wait" until the server response arrives so we exit the function after - EmptySearch(false);
  • The TRICK is to trap the execution flow and get it back to the next step. There’re two steps here:
    • Test-case is done so show notification. After this as the flow exits the Switch-case we’ve another recursion to make sure we trigger the next test-case. Here it is:
    • //Testing continues if it was just a result or we need to skip to the next test-case
      //HT: MAKE SURE TC is set or it'll be an infinite loop!!!
      if(isResult || skipNext && TC != "")doTesting(false);
  • This will take the flow back to the same test-case in the Switch-case and this time execute the following code:
  • else {skipNext = true; TC = "HeaderSorting1"; //set test-case variable  & skip to next
  • And finally, we get back to the recursion, this time with skipNext = true; and a new test-case set TC = "HeaderSorting1";
  • So, this recursion takes the flow back to the Switch-case but this time it falls into the next case and this cycle is repeated until all the test-cases are done.
  • Sorry for the complex logic but this is really the only way I could find to continue the flow and also keep the notifications in between. It’s tricky but once you understand the mechanism you’ll know that its mandatory. Of course I’m all ears for those logic-gurus who can optimize my code in any form.
  • For now, I’ve tried to bundle some common functions in a Testing.js file so don’t panic if you don’t see all the functions in the same file

I hope you can spare me from explaining how to set control values and then trigger the button click events. I’ve implemented/tested this for AJAX based web-app so this will definitely work in a simple manner for those plain post-back web-apps.

ADVANCED: For AJAX based web-app all you need to add is a callback to our doTesting(true);on top of the page as follows:

$(document).ready(function(){if(window.parent
!= self) window.parent.doTesting(true);}

Conclusion

I developed this method because I needed something which was my own and allowed full-freedom to tweak-n-tap. Because now-a-days web app are only getting more and more complex, tools are cool but sometimes they limit the functionality. I believe, apart from the recursive-logic, the rest of the code is simple and it makes it easier to tweak your test-cases, add, edit and remove test-cases as your web-app evolves. I hope its helpful.

Please share your thoughts. And if anyone is interested I've also posted a YouYube video showing it live in action: Simple JS based Auto Testing User Search

I'd like to know your suggestions and idea about the same and what you prefer. I see many usages of this method like - auto-testing, showing an automated demo, automated-data-entry... but everything on the same domain.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

hemant0005
India India
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.160826.1 | Last Updated 25 Feb 2011
Article Copyright 2011 by hemant0005
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid