Category Archives: Web development

HTML Testing, Ruby and Selenium

One of the problems with using HTML as the user interface is testing it (in fact testing user interfaces has always been a bit of a problem) so I’m always on the look out for good UI testing tools.

For a while I’ve known about and used Watir which scripts Internet Explorer (and now Firefox with FireWatir though it’s a bit more tricky to set up). Watir allows you to write simple but powerful scripts in Ruby that will instruct IE to load up a page, fill in a form, click a button or whatever and then you can make assertions about what should have happened. It’s not difficult to use and even if you don’t know Ruby, if you know other languages, you can soon pick it up.

Today however I came across Selenium (also on the same OpenQA site). This is neat for two reasons: (1) it’s all written in JavaScript so the same script runs in both IE and Firefox, on the PC or Mac; and (2) it has an IDE (a Firefox extension in fact) which lets you record the tests rather than having to write them yourself (you can then save them away and create test suites; you can also load up tests and single step them, etc.). (There is a Watir recorder on the OpenQA site but it’s only version 0.1 so far. There’s also WET which I haven’t tested, but is a Windows application written in Ruby which wraps around Watir.)

The thing I’m currently looking for though is a test environment where I don’t have to install a large infrastructure and which works easily on both PCs and Macs, supporting both IE and Firefox. Selenium seems to give me exactly that. In fact the project’s customer could probably install it on their PC and be able to run the tests (or even record new tests) which would be great.

Please let me know if you know of other tools that would fit the bill or what your experience is with these tools.

Dragging and dropping table rows in Javascript

Summary: This article tells you how to implement drag and drop for HTML tables in Javascript. You can download the source here and play with the demo here.

Updated: now copes with multiple tables on the same page, non-drag and non-drop rows (such as headers) and embedding form elements. Also see my jQuery plug-in which does much more. Continue reading Dragging and dropping table rows in Javascript

Confirming a URL in Javascript

This is a little tip that I discovered a while ago but which I’m always forgetting, so I thought I’d post it here where I woudn’t lose it! Sometimes you’ll have a link on a web page which actually does something to a database, deletes the current thing for example. In those circumstances you want to have some sort of “Are you sure?” confirmation.

Javascript has a confirm dialog that you can use, but because you can use the return value of a method to determine event bubbling, you can use this really neatly to give optional links as follows:

Click here to go to home page

And of course you can try it yourself: Click here to go to home page.

If you click OK, then the confirm returns true and the link is followed. If you click Cancel, then confirm returns false and the event isn’t bubbled up to the href handler and so the link isn’t followed and you stay on the same page.

Javascript debugging, Firefox and Drag and Drop

In one of my current projects I need to have a table of data that the user can reorder. A quick search of the internet doesn’t turn up any javascript howtos or frameworks that allow dragging and dropping of table rows, so I had to role my own. I’ve written an article about how to do it, here. Continue reading Javascript debugging, Firefox and Drag and Drop

Firefox development toolbar

A friend recently pointed me to a useful development toolbar for Firefox. It’s similar to the development toolbar here but does even more stuff.

You can find the toolbar at

Definitely worth having if you’re working with Firefox (in fact I often use Firefox for debugging Javascript and the like because it tends to be much more helpful than IE!).

xml:space=”preserve” and xsl:attribute

Just a quick tip about xsl which I haven’t found anywhere else…

I wanted to generate some human (well me) readable XML using XSL and found that if you add xml:space=”preserve” to the opening tag, then, at least if you are using Xalan and Java to do the transformation, it will preserve the spaces between the tags in the XSL and you’ll get something more or less readable. Continue reading xml:space=”preserve” and xsl:attribute

Debugging Javascript in Firefox

I’ve recently been trying to make some of my scripts work with Firefox 1.5 (from IE) and I was looking for some debugging help to set me on the right track. I found this tool which seems to work very well:

It’s an updated version of Venkman fixed to work with Firefox 1.5.

One of the things it helped me find is that whereas in IE if I ask a table cell (TD) for the nextSibling and get the next TD, in Firefox you always seem to get a text node first and then the next TD. Similarly for getting the next and previous rows.

Javascript Debug Utility

Note: See the May 2008 update at the bottom of this article.

One of the problems when writing JavaScript is that you don’t have a development environment with a debugger to find out what’s going on. For Microsoft platforms, there is the Microsoft Script Debugger which provides some help, but often people resort to just sprinkling alert("You are here") around the code to find out what’s going on. The problems with this approach are that you can’t easily switch them on and off without going through and commenting out individual calls; the fact that you get a dialog box up which needs to be accepted by the user can affect time-sensitive code, so you might not be able to debug it using this method; and finally it’s difficult to compare values from one alert to the next since the text just comes up in a dialog box.

Here we present three functions that allow you to put debug calls in your code and switch them on and off as needed. Continue reading Javascript Debug Utility