Let Selenium’s robots do the testing for you!

Recently I have stumbled upon Selenium, which according to their site’s title is a “Web application testing system.” What I love about Selenium, is that it is extremely easy to begin using, it takes absolutely no time to get it going and therefore, you really have no excuse not to be using it to automate much of the testing of your web app!

What makes Selenium special? Two very strong points:

  1. Creating tests is easy for most tasks, and when you need more sophistication, you can achieve that (more on that later).
  2. Selenium performs the tests in any or all major browsers of your choice (IE, FF, Chrome, Safari and Opera). Selenium uses Javascript to run tests within the browser and make assertions, so you can test almost all compatibility issues (except for things like flash).

Selenium IDE

To create tests, simply install selenium’s firefox plugin, which they call Selenium IDE. Once it is installed you’ll be able to invoke it through Tools -> Selenium IDE. When you invoke this tool, it is in recording mode by default, which means it is watching what your are doing and recording a log of your actions, which allows them to be repeated later.

At this point you can go ahead and hit your site, navigate around and when you are ready to make “assertions” (i.e. confirm that one or more things is/are right), right click on the element or text you want to verify, and you’ll see a list of actions available like verifyTextPresent, which is the simplest one.

Once you are done recording your test, you can have Selenium IDE playback to test at a slower speed, to confirm that it works as recorded. You can save this test and re-open it later for editing or export into an alternative format, if needed for unit testing or bromine integration (more on this coming right up!).

You’ll notice that Selenium IDE keeps the website separate from the test case, that’s because it allows to provide the website immediately before running a test, which means you can very quickly switch between websites to test.

What’s next?

There mainly two ways to make use of those tests, you can choose either or both! Firstly, you can integrate those tests with your unit tests, and have them run whenever your unit tests are usually performed, e.g. when creating a new build or on every SVN commit…etc.

Secondly, you can install Bromine, a web interface for managing projects and test cases. Bromine allows you to invoke tests from the web interface. Those load of those test is equally distributed to pre-defined nodes within Bromine. Each node defines what platform is its (Windows, Mac, Ubuntu…etc) and what browsers it has available. A machine can run multiple instances of the server software on different ports to parallelize the execution of the tests.

In both these scenarios, the nodes are to run Selenium Remote Control (RC), which is a Java-based server. It runs by default on port 4444, but you can (and you are encouraged to) run multiple instances of it on each machine on different ports, by passing -port 4445 as an example when invoking that JAR file.

What else?

A few tips and suggestions to make your Selenium experience more sparkly:

  • If you don’t like the way Selenium IDE finds your elements, you can use other alternatives like the XPath of the element.
  • You can make different assertions than the pre-defined set you see in the IDE.
  • The machine(s) which runs the tests doesn’t have to be super fast. Almost anything will work! In my case I started with one 1 GHZ machine, which ran four instances of the servers on Windows XP and handled them just fine.
  • In Bromine, you can define for each group of testcases which browsers and on what platforms are you concerned with. That is done with a grid-like so you can test with Firefox on Windows and Mac for example.
  • Bromine supports plugins if you need any extra functionality.
  • If your test requires logging in, make sure you logout at the end of the test. This way it won’t break the next time it runs and the session/cookie persists.

Form validation tips and tricks using jQuery

I’ll keep this article short and sweet… I love jQuery! The end.

Just kidding! I do love jQuery though. Recently I have written a quick and nice (in my opinion at least) Javascript function to do simple form validation on the client side for me. I am not including the whole function here because I am sure others have posted better solutions online, but I will include the part I thought was cool, thanks to jQuery.

First, a bit of background. My function is invoked upon form submission and expetcted to return true or false, obviously. I am currently passing the list of field ids to it using a global array variable. So I loop through the array to do my checks, and for the ones that don’t pass my validation, I do this:

$('label[for="'+elemId+'"]').attr('class','error');
missing[missing.length] = $('label[for="'+elemId+'"]').text();

Where “missing” is an array I declared within my function, and class “error” is a CSS class with extra styling to make the label stand out, in my case that extra styling is a simple “color: red”. As you may have noticed, this will only work if your form has proper markup, namely if fields have unique ids each, and labels are properly linked to them using the “for” attribute.

Lastly, at the bottom I have:

if( missing.length > 0 ) {
alert("You missed filling out the following required fields:\n- "+missing.join("\n- "));
return false;
}
return true;

You can easily change it so the error message shows up in an existing div you have for that purpose, instead of using alert as I did in my example.

That’s all, I hope someone finds that useful!

Nice looking thumbnails without image manipulation

In this article I’ll explain how you can include the full-size images in your HTML, and use simple CSS to make them look like thumbnails. From my experience this works great for images up to say 1024×768 pixels, and for up to 30 or so images (depending on the size, ofcourse).

Even if you have access to image manipulation functions that make it easy for you. this function can be, in some cases, better than generating thumbnails. One popular example is if you are using lightbox (or a similar solution, and there is plenty of them), sure those clever scripts can pre-fetch full-size images as the user is browsing, but browsing through photos, which the browser downloaded on page load, is even faster!

So, how does this work? Simple! you want to wrap your image with an anchor (link) as you usually do, then wrap the anchor with a div or span element, giving each a unique class name. Example:

<div class="photoContainer" >
<a class="photoLink" title="Photo caption" rel="lightbox" href="/photos/1.jpg">
<img class="photoImage" src="/photos/1.jpg" alt="Photo caption" />
</a>
</div>

Here’s the CSS that goes with that:

div.photoContainer {
float: left;
height: 65px;
width: 100px;
overflow: hidden;
margin: 5px;
}
a.photoLink {
text-decoration: none;
}
img.photoImage {
height: auto;
width: 115px;
}

That’s all! The widths and heights I provided in the example work well with 4:3 and 16:9 aspect ratios, as well as portait photos. Feel free to adjust as necessary but I recommend you test with a variety of photos to confirm they all look good. Enjoy!