Selenium Selenese Continuous Integration Runner

on GitHub in the hopes that it will save other people time when trying to get their Selenese tests running from a continuous integration server. It’s very simple but one thing I battled with was that I had to patch the selenium JAR to get it to work with Firefox 3.0. It should work fine in any continuous integration server regardless if it’s Hudson, Cruise, Cruise Control, Bamboo, etc.

The functional testing products I’ve used that drive a real browser include Test Complete (commercial), Selenium, and Watir. I think all 3 do a good job but one thing I like about Selenium is that it’s dirt simple to get a user productive with the Selenium IDE Firefox plugin. However, that benefit is also the most limiting factor of the Selenium IDE which is that to be able to re-open tests in Selenium IDE you have to save them as Selenese (which is the most limited of the testing languages that Selenium supports). Still, I think Selenese is a reasonable choice for a lot of organizations that need a moderately sophisticated functional test suite.

Publishing dynamic content on your website in a format that you can style with CSS has gotten a whole lot easier with Google’s simple JSON based Javascript API’s. The two I’ve found myself playing with lately are the Google Ajax Feed API for publishing RSS and Atom feeds and the Google Spreadsheet API
for publishing little snippets of text that should be easily editable.

Say you want a simple headline on your homepage that you can change daily. Here’s how you’d do it with the Google Spreadsheet API:

1. Create a spreadsheet making the first row the column headers (important because you’ll refer to the cell by the column header):

2. Go to the publish tab and publish the spreadsheet: http://spreadsheets.google.com/pub?key=pouqRkV5D_eZT_VdOKu7CQA. Note in this example the key is pouqRkV5D_eZT_VdOKu7CQA

3. Use a simple container div and some javascript to display the field:

<div id="headline"></div>

<script type="text/javascript">

function displayContent(json) { document.getElementById('headline').innerHTML = json.feed.entry[0].gsx$html.$t; }

</script>

<script type="text/javascript" 

src="http://spreadsheets.google.com/feeds/list/<b>pouqRkV5D_eZT_VdOKu7CQA</b>/od6/public/values?alt=json-in-script&amp;callback=displayContent"&gt;

&lt;/script&gt;

Note: the spreadsheet key in the URL that needs to be replaced. Also, entry[0] refers to row 2 in the spreadsheet (because row 1 contains the column headers and is not considered an entry):

4. The text appears dynamically on the page:

Palm releases Linux based Foleo

5. When it’s time to update, make your changes to the spreadsheet, go the publish tab, and republish it and the changes will appear on your site!

The only real downside I can think of with this simple approach is that it’s not SEO friendly so if you want all search engine crawlers to follow those links you publish, you’re better off with a non-javascript solution. The Spreadsheets API google group is a good resource and Pamela Fox has some examples to look at.

Let’s take a look at what it takes to put a simple unordered list on a page with a refresh button to refresh the list without doing and page reload and then we’ll spruce it up a bit:

1. First we’ll need a URL that should return the content of the list and say we’re working in a crusty old CGI environment so we’ll call it /cgi-bin/friends_online.cgi and say it returns the list of your friends that are online:

<ul>
<li>Mr Bigglesworth</li>
<li>Austin Powers</li>
</ul>

2. Now on the page where we want to include the list of our friends that are online we’ll need to include prototype.js in the head section of the page:

<script src="/js/prototype.js" type="text/javascript"></script>

3. Let’s look at how simple this can be:

<div id="friends_online">
... friends online ...
</div>
<a href="javascript:var x=new Ajax.Updater('friends_online','/cgi-bin/friends_online.cgi')">Refresh</a>

When you hit the refresh button the contents of the friends_online div will be replaced with the output from friends_online.cgi, it’s that easy! Now let’s spruce it up a bit.

4. Since we’re not concerned with server load in this example we’ll populate the dynamic list using Ajax the first time the page loads as well. While we’re at it let’s also hide the Refresh button and friends_online div while the refresh is happening and display an animated loading gif. Here’s what that would look like:

<div id="friends_online"></div>
<img id="loading" src="loading.gif" alt="Loading"/>
<a id="refresh" href="javascript:friendsOnline()">Refresh</a>

<script type="text/javascript">
function friendsOnline() {
	$('friends_online').style.display = 'none';
	$('refresh').style.display = 'none';
	$('loading').style.display = 'inline';
	new Ajax.Updater('friends_online', '/cgi-bin/friends_online.cgi', {
		parameters: 'key=value&key2=value2',
		method: 'get',
		onComplete: function () {
			$('friends_online').style.display = 'block';
			$('refresh').style.display = 'inline';
			$('loading').style.display = 'none';
		}
	});
}
Event.observe(window, 'load', friendsOnline, false); // This calls friendsOnline on page load
</script>

I put in the parameters just to illustrate how to pass parameters with the URL. If I were to take this one step further I’d put the Javascript into a separate .js file and use Script.aculo.us Effects.js BlindUp and BlindDown to animate hiding and un-hiding the friends_online div. Hopefully you can see how much power Prototype gives you and how easy it can be to Ajax enable a legacy web application!

1. Install the free Microsoft Script Debugger
2. In Internet Explorer:

Tools->Internet Options…->Advanced->Disable Script Debugging (Internet Explorer)
Tools->Internet Options…->Advanced->Disable Script Debugging (Other)

3. Hit a page with a Javascript error and it asks you Do you wish to Debug? and click Yes

It’ll bring up the debugger with a nice yellow line on the Javascript causing the error.

To address this I wrote a simple javascript solution. Here’s how it works:

1. I put my deferredcontent.js code that I wrote in the head tag
<script type=”text/javascript” src=”/js/deferredcontent.js”></script>
2. I added an onload=”relocateDeferredContent();” to the body tag
3. I put an empty div tag where I ultimately wanted the content to end up. E.g <div id=”adleaderboard”></div>
4. I put the deferred content in a display:none div just before the closing body tag at the very end of the page and put each block of code I wanted to relocate in a div with an id of defer-IDFROMSTEP3

<div style=”display:none”>
<div id=”defer-adleaderboard”>
[Ad code goes here]
</div>
</div>

If you want to see it in action you can see it on this San Francisco schools page.

1. Convert an href into a modal window just by setting its class=”submodal”. Now you can do
   &lt;a href="foo.html" class="submodal"&gt;foo&lt;/a&gt;

   and when you click the link the contents will show up in a modal window. Previously submodal required specifying onclick functions and duplicating the target URL.

2. You no longer need to put special div containers in each individual page, subModal.js now adds them to the DOM for you.
3. I fixed a bug in Opera where one of the subModal functions that gets triggered on page load was called infintely.
4. Moved all the javascript into subModal.js and removed common.js
5. Safari active scrollbar fix suggested by Thomas Risberg in a comment on this post.

Here is the file with my changes: subModal.zip.

I’m hiring a front-end web developer (contract or FTE) for either on-site or remote work. This is not a web designer or graphics designer job but rather a technical front-end developer, someone with crazy XHTML/CSS/Javascript skills that can work in our JSPX environment. If you or someone you know fits the bill and is looking, leave a link to their portfolio site as a comment here or drop an email to the address in the job posting. GreatSchools is a great place to work and we get a ton of traffic so your work will be seen by several million people per month!

Here’s a tip if you’re considering applying, the first thing I’ll do is go to your portfolio website and do a view source. Save us both time and only apply if your portfolio website W3C validates XHTML and shows proper usage and understanding of CSS. While I’ll eventually look at the work you did for other companies, I generally take it for granted that you did your portfolio site by yourself so it weighs more heavily than anything else! Having a blog is also a good thing, it’ll show me that you have enough enthusiasm for the work you do to take the initiative to write about it!

Of the 40 or so portfolio websites I’ve visited today, only 1 person’s validated and demonstrated proper usage of XHTML and CSS. Please, is the bar really that low? Disprove my pessimism and leave a link to your kick-ass validating XHTML portfolio site (or a friends) as a comment here, even if you’re not looking I’d like to see some better examples than I’ve seen today!

Related reading: Applying for a job HOWTO

• Lightbox Gone Wild: this is a nice solution based on Lightbox and Prototype but a bit heavy weight due to the inclusion of prototype.js. If you haven’t seen the original lightbox effect check it out!
• SubModal: looks like it was started from scratch and is lightweight.

I’m leaning towards subModal right now since Lightbox uses prototype.js which adds 48K to the first page view. We serve around 150,000 unique visitors per day so adding prototype would result in an additional 150 * 48K = 7GB of bandwidth usage per day (we’re not currently running mod_gzip).

Update: here are some other solutions including a draggable one, DHTML Window (draggable but no shading), draggable with shading or fixed position, and Popup Window 4.5

Related reading: Popups with a twist, Sublog: author of subModal’s blog, and Inline popups