CUITs: Automating Web Page testing and the Ajax trickster.

(If you’re not interested in my short story and want to skip ahead to the issue being faced and the resolution  go to THE PROBLEM heading.)

So for the past few weeks I’ve been attempting to come up to speed on using CUITs to automate my every testing needs. One of the items on my testing palette is a web page. There are a couple different languages that can be utilized in order to craft a web page into a beautiful butterfree, such as HTML, CSS, and JavaScript. (Let it be known now that I am NOT  a professional web dev and my experience in web development has been summed up by High School classes and a college course)

As pretty much everyone who’s ever stepped onto the interwebz these days know (thanks to MySpace! :P), HTML is the staple language in creating a website. Anyone can put a few lines of HTML into a notepad document and BOOM a “website” appears (obviously not THAT simple, but you get the idea). A while after the birth of HTML came along this thing called CSS, Cascading Style Sheets. CSS allowed web devs to use HTML primarily for placing elements on the screen, not for making it look pretty. You could then create a single CSS document that would be linked to the HTML pages which then would then add the “makeup” to the web page giving it the polished look. Then, to make websites even more interactive and to further increase the coolness factor, JavaScript began to be implemented in the web pages as well. Now JavaScript does a bunch of cool stuff like running client-side scripts, controlling the browser, altering the pages content and asynchronous communications. This my friends, is where my issues began.

After weeks of being trumped on the same issue, someone smarter than I pointed out something in the websites code I was attempting to automate. The website uses JavaScript and implements a technology known as AJAX. AJAX stands for Asynchronous JavaScript And XML and can also be known as AJAJ, Asynchronous JavaScript And JSON.

AJAX Wiki

http://en.wikipedia.org/wiki/Ajax_(programming)

Ajax (also AJAX; /ˈeɪdʒæks/; short for asynchronous JavaScript + XML)[1][2][3] is a group of interrelated Web development techniques used on the client-side to create asynchronous Web applications. With Ajax, Web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behavior of the existing page. Data can be retrieved using the XMLHttpRequest object. Despite the name, the use of XML is not required; JSON is often used instead (see AJAJ), and the requests do not need to be asynchronous.[4]

Ajax is not a single technology, but a group of technologies. HTML and CSS can be used in combination to mark up and style information. The DOM is accessed with JavaScript to dynamically display – and allow the user to interact with – the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.

Upon Googling (This hasn’t been added to the dictionary yet? Whaatttt?)  Problems with CUITS and AJAX, we discovered that the version of AJAX we were using causes conflicts with the CUITs.

Enough Short Story.

THE PROBLEM

The problem I’ve been exhibiting is that when I record a test through Visual Studio’s Test Recorder, the playback of the test would be incorrect. Events were not being executed upon clicking certain elements on the page and therefore the data wouldn’t be sent or retrieved correctly.

THE CAUSE

The website in question, uses AJAX calls when the button I was attempting to test is clicked.  The AJAX calls were responsible for correctly transporting the data to the DB and letting it know I was adding something to the page and then displaying the results on the page. CUITs don’t play nice with the version of JQuery on the web page (v2.0.3), thus concluding in unexpected test results.

THE SOLUTION

The solution to the issue was simple.  One line of code resolved all my issues. Inside the list of local variables (empty by default) for your CUIT.cs file, a single app setting is required.

08302014_AJAXFix

The line

ConfigurationManager.AppSettings["WebWaitForReadyLevel"] = "3";

Is what is required to make the CUIT play nice with AJAX calls to the server. With this single line of code, the doors to Web Page Automation shall be open and rainbows will emit unicorns that twirl sparklers throughout the sky. Seriously, it’s that awesome.

 

Hopefully someone will be able to make sense of my ramblings here and will prove useful!

 

 

Advertisements

One thought on “CUITs: Automating Web Page testing and the Ajax trickster.”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s