Automating Web Applications
GUI automation for web applications can be very different than testing standard Windows applications and there are some tools and techniques that can really help to resolve these particular challenges. Let’s take a look at an example.
The challenge for a recorder with this example can be mouse hover behavior of the menu. Hovering the mouse over the menu items activates the submenus automatically and some recording tools don’t capture that information. TestComplete records selection of the Orders item as follows in JScript:
iexplore = Aliases.iexplore;
page = iexplore.pageHttpTrainingFalafelComDynami;
//Please wait until download completes: "http://training.falafel.com/dynamiccontent/NewItem.aspx"
Playing back this recording results in error indicating that TestComplete was trying to click outside the bounds of an object which in this case happens to be the Orders item but since it never appears on screen it’s impossible to click on it at all. Fortunately, there is an alternative which is to write a function that will handle menu selection for any item within the menu control using a familiar syntax to address the menu items.
However, there’s the minor issue of understanding exactly what it takes to develop such a routine and that means digging into the HTML of the page and coming up with a mechanism to uniquely identify the various menu items. To aid this process I leverage the Internet Explorer Developer Toolbar or the Developer Tools add-in which allows us to dig into the page right from within IE. Let’s take a look:
function AspNetMenuSelect(page, menuitem)
var items = menuitem.split("|");
var itemstr = "";
var count = 0;
while(count < items.length - 1)
itemstr = itemstr + items[count];
item = page.NativeWebObject.Find("href", "*" + itemstr + "*", "a");
itemstr = itemstr + "\\\\"; // Add\\New\\Customer
item = page.NativeWebObject.Find("innerText", items[count], "a");
The function is called as follows:
Where “page” represents Sys.Process(“iexplore”).Page(“*”). If you’re not familiar with TestComplete it exposes a “Page” object off of Internet Explorer (and Firefox) allowing a test to access elements of a web page.
The second parameter is a “|” separated string of menu items to select. The code breaks the string up into an array, searches the page looking for an anchor tag that has an href with the specified value and hovers the mouse over it. The process then repeats, building up the href the value we identified above until the last parent menu item is reached. The final piece is to locate the last menu item using the innerText property, click on it then wait for a page load to complete.
If you have a test automation tool, any tool, go ahead and record this test case where you click on the item highlighted above using a non-journaling mode and see how well it plays back. Then, post a comment below and let me know the outcome I’d be really interested in seeing some of the other tools compare. I will note that Selenium had no problem recording this example though it uses an entirely different technique.
Admittedly, it’s not terribly satisfying when you record a test and your tool of choice fails to replay it properly, a situation that can understandably leave people frustrated. It’s important to grasp the limitations of your recording software as I’ve yet to find one that works flawlessly in all cases. However, in the case of TestComplete, through scripting, we can dig in at a lower level and solve problem.
Now, if you made it this far which I hope you did because you can watch a video of this whole process on Falafel Software’s new tv.falafel.com.
Ok, so that was a bit of tease… 🙂