I've been tasked with testing our ajax enabled admin site for a project we've been working on for a little while now. Jim, the head dev, asked me to use this thing called Selenium to test it with since current unit tests wigs out with ajax items. So off I go to figure this thing. After a short learning curve, its not all that hard, but I DEFINITELY recommend some downloads to supplement.
If you're lucky enough to be like me and know absolutely nothing about how this thing works, don't worry -- it only took me ...2 hours? to get this running and firing off tests. This should cut that down into a few minutes. Before I send you off into the wild unknown, here's a market-less overview of what this thing is. Selenium is a web unit tester that uses specifically formed html pages (tables, thats it) to run against your site. That's it, thats all. All you need is the site setup locally and this thing installed in another place, using the same IIS. Now was that so bad?
Now for the meat. Download this (its small, under 2MB), create a new IIS app and dump the zip file contents into it. Wow that was hard. Navigate your browser to your new IIS app/index.html and you should something like this.
Click the Selenium TestRunner, it'll bring you to another page, on the left, you'll see "Test Suite" and a link, click go, and a ton of stuff will appear. At the top right, you'll see "Selenium TestRunner" in bold and "Execute tests" -- click the left most of those tests (this is run all) and wait a minute -- it'll rip though a ton of tests. Most, if not all should pass (ideally, all pass).
Ok, great it works, now what? Here's were I take everything on their site and ignore it. "But what about all the functions, methods, blah blah?!?" I like to cheat and work more efficiently by letting software do the work and thankfully, they have and "IDE" for download as a firefox extension -- besides, reading the site its like reading msdn, yea its "cool" but 99.999999% of it you won't use. Anyway, so now what? That thing you just downloaded has ALL the stuff in it making it a million times easier to make this stuff work and now you can make tests to your hearts content, very quickly, which is great.
Now we switch gears a bit because as you will discover, its a ROYAL PITA to figure out what the controls are named and you WILL need this info. So instead of hunting though that notepad, may I suggest you try this, IE Dev Toolbar. Using this is easy and here's your learning curve. After you've downloaded this go into IE and (if you don't have menu bar showing, you shall suffer) click view, Explorer Bar, IE Developer Toolbar and you'll get this at the bottom of your IE.
You're only really worried about the first two buttons which are "Select Element by click" and "Refresh". Basically if selecting by click isn't working, click the refresh button and it works. To get this to work, click that first button and click something on a webpage you want to know. The middle box will be populated and look as such.
You're only worried about "Name" which in this case is "connspeed" which you can double click on and copy/paste. Now to bring all this together. Go into firefox, click tools, Selenium IDE and close firefox. You'll get this very uninteresting looking thing which is about to make your life easier. Under "Command" in the big box, click the top most row (there's one there, believe me) and all the other controls below become active. Oh and for the sake of blog, I'm only doing a SHORT example, open a page, type some stuff, click a link (google search). This'll seem cumbersome at first, but its the fastest way I've found so far, so stick with me on this.
Where it says "Command/Target/Value" click the dropdown arrow and look for "open" (or just type it, it'll autocomplete), type in the base URL for your site and leave value blank. Click the row below the command you just created (trust me again, there's one there) and now hunt for the "type" command (or again, type it) and here's where IE dev comes in handy -- open up google, and click the "Select By Element" button, click on the search text box. You'll find its name is simply "q", so in the target column, type in Q and set your value for blog.rileytech.net. Finally, we want to click the search button, so we give it another command of "click" with the target being the "Google Search" button which name value is "btnG". Your result should look something like this.
Now save as html into the directory where you copied the Selenium files over earlier and remember the filename. Only one final step to make this puppy work, you need a test master file of sorts -- its sole purpose is to house links to the tests you just created. No more, no less. So fire up your favorite html editor, create a table that looks something like this (or just copy this and save it)
<html><body><table><tr>
<td>Test Suite</td></tr>
<tr><td><a href="./mytest.html">google test</a></td></tr>
</table></body></html>
Go back into Selenium, Selenium Test Runner and type in the url for your newly created master file and it should come up nicely. Run it like you did the other tests and away you go. Other useful commands are "verify" commands which you'll find there's a nice collection of them, along with "assert" (assertCheck is a good one).
Wow that was a long post.
Subscribe