maxheapsize.com

Spring 3 MVC, Ajax and jQuery Magic (or better: simplicity)

Oliver Wehrens — Tue, 20 Jul 2010 04:00:09 +0000

I’m playing around with some web frameworks lately and to see what’s in store with Spring 3 MVC (never did too much with it) I gave it a try to see how it handles Ajax. According to ajax simplification announcement it should be possible to get up and running in (almost) no time.

We will do a simple web application which will show the current time via Ajax.

The directory layout (using maven) should look like this:

Directory Layout



	Spring3MVC
	
		index.jsp
	

	
		spring
		
			org.springframework.web.servlet.DispatcherServlet
		
		1
	
	
		spring
		*.html

The web.xml holds no secrets. The Dispatcher servlet is defined and it should react on everything *.html.

Since we named our Servlet ’spring’ we need to add a servlet configuration for that. It goes in WEB-INF as well.

It uses the component scanning feature of spring and instructs spring to check the package ‘com.maxheapsize.springmvc3.controller’ for controllers. Furthermore a url based view resolver is defined which uses Jstl and looks into /WEB-INF/jsp for jsp with the ending ‘.jsp’.

In WEB-INF/jsp/hello.jsp we define a jQuery snippet for the Ajax request and provide a button which we should push if we want to know the time.




  Spring MVC Ajax Demo
  
  


${message}

How does Spring now know which classes or methods to call? Here comes the nice part about it.

package com.maxheapsize.springmvc3.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.Date;

@Controller
public class HelloWorldController {

  @RequestMapping("/hello")
  public ModelAndView helloWorld() {
    return new ModelAndView("hello", "message", "Spring MVC Demo");
  }

  @RequestMapping(value = "/time", method = RequestMethod.GET)
  public @ResponseBody String getTime(@RequestParam String name) {
    String result = "Time for " + name + " is " + new Date().toString();
    return result;
  }
}

The RequestMappings define the Url’s which can be called to reach that code. So the helloWorld method is available with ‘hello.html’ in the web app. Why hello.html and not just hello ? Because we said so in the web.xml. I included a sample message which will be shown at the web page when this method is called.

If you now push the button on the webpage, ‘time.html’ with a parameter ‘name’ is called. This will go directly to the second method. Spring will also check if a string parameter ‘name’ (@RequestParam) is present in the original request. The @ResponseBody annotation indicates that a method return value should be bound to the web response body.

The result will be returned and shown in the webpage.

Ajax Result

Overall this is a pretty nice integration. I tend to use Spring for many projects and this makes it even easier to write some nice web apps in it. If you have a single page application and all you do is sending ajax request back and forth this might be a solution.

JSON response Update

To get a JSON response from your Controller you need to:

Make sure the jackson mapper is present in your classpath. Maven users use:

    
      org.codehaus.jackson
      jackson-mapper-asl
      1.5.3

in their pom.xml.

MySimpleDataObject is a Pojo

The method you are calling has a signature like:

@RequestMapping(value = "/demo", method= RequestMethod.GET)
public @ResponseBody MySimpleDataObject doSomething(@RequestParam name, @RequestParam email)

You are returning MySimpleDataObject at the end

Your calling javascript looks like this:

jQuery.getJSON("demo.html", {name: name, email: email}, function (data) {
        alert(data.someValueInMySimpleDataObject);
      });

Busy Programmers Guide on where to buy eBooks

Oliver Wehrens — Sat, 05 Jun 2010 21:00:20 +0000

Every Programmer needs to read books. Usually you would get some packages from Amazon (or your favorite retailer) and read through them.
Now with devices like the Kindle and iPad (and Nook and…) things will change. No more carrying around a couple of hundred pages of paper. Only some Megabytes on Gigabytes of storage. The displays nowadays are good enough and the battery is not a problem for the most part.

Now the tricky part, you want your books in a format which you can read on many devices. The obvious candidates are:

PDF : Lots of books are available in pdf, be sure not to get DRM PDF. Not all reader software can show this.
Kindle (.azw) : The Kindle Software is available for many devices (iPad, PC, Mac and of course Kindle devices).
mobi : Some stuff is available in .mobi as well.
ePub : This is also wide spread. A DRM’d version is also available. So make sure your reader is able to handle that.

The best choice is of course to get non protected (read non-drm) books. To me pdf, epub and azw (I know, drm) all look nice. It is just a question of your reading device.

Formats are important but and the end, where do I get my books?

I picked a few publisher and looked on what they provide. Amazon is a different thing anyway. I compare the prices to their Kindle format.

Manning – jQuery in Action

	Print Book	eBook	Amazon	Kindle
	$39.99 (+ PDF)	$24.55 (.epub, pdf, .mobi)	$29.69	Could not find Manning titles for Kindle

Wrox – Professional XMPP Programming with JavaScript and jQuery

	Print Book	eBook	Amazon	Kindle
	$49.99	$49.99 (pdf, could be DRM)	$31.49	$19.54

OReilly – 97 Things Every Programmer Should Know

	Print Book	eBook	Amazon	Kindle
	$29.99 ($32.99 Book + eBook)	$23.99 (Android, Mobi, PDF, ePub)	$19.79	$18.85

APress – Coders at Work

	Print Book	eBook	Amazon	Kindle
	$29.99	$20.99 (pdf)	$18.85	$19.79

Packt Publishing – Solr 1.4 Enterprise Search Server

	Print Book	eBook	Amazon	Kindle
	$40.49	$30.59 (pdf)	$35.39	Could not find any Packt titles for Kindle

Pragmatic Bookshelf – Programming Scala: Tackle Multi-Core Complexity on the JVM

	Print Book	eBook	Amazon	Kindle
	$34.95 ($43.75 book + pdf,mobi,epub)	$22.00 (pdf,mobi,epub)	$23.07	Could not find any titles for Kindle

Conclusion:

Amazon shines, if they can offer eBooks there are priced very low, sometimes even the printed book is cheaper then the publisher eBook. If you can cope with Amazons format, a Kindle (or a Kindle app) is the way to go. Instant download, sharing between devices, very nice. I can now carry around dozens of books which I get for very cheap.
Mannings and Wrox have Twitter accounts where they announce good discounts on printed and electronic books. Worth to checkout. APress eBooks are always 30% cheaper as the cover price of the printed one.
Most of the publishers do have an extensive part of their books available as eBoooks.

Getting the eBooks is especially nice for folks living outside the US, e.g. ‘97 Things Every Programmer Should Know’ is listed for about $27 at Amazon Germany. So I save about 40%. I will buy more books now since they are now much cheaper and more accessible to me.

My reader is an iPad with iBooks for epubs, the Kindle app for Amazon’s selection and GoodReader for Pdf’s.

Does anybody have good or bad experience with eBooks?

How to detect if your server is down when making jQuery Ajax calls

Oliver Wehrens — Mon, 26 Apr 2010 19:19:33 +0000

If you developed an ajax rich web application, maybe even a single page interface, you want to make sure that the user gets notified if the server is not reachable anymore. This happens either if the it goes down or the client loses its network connection.
Depending on your code the application can run for a while and the user is confused about missing interactivity.

So how do you detect this? jQuery offers an error callback if something with the call goes wrong.

window.setInterval(function() {
$.ajax({
   type: 'GET',
   url: 'http://www.myapp.com/heartbeat',
   success: function(data, textStatus, XMLHttpRequest) {},
   error: function(XMLHttpRequest, textStatus, errorThrown) {
      alert('Failure');
    }
  });
}, 2000);

Unfortunately this does not work for a server which is down and if you are using a debugger like Firebug you will see that these calls have the status aborted. It turns out that if the server goes away jQuery will still execute the success callback. So how do you know that the server died?

I changed the response of the heartbeat query to contain some simple string like ‘alive’. In the success callback I just check if the data contains this string. If it does not, I know that I do have a problem and I need to make sure that the user can’t do anything anymore.

I use the jQuery plugin uiBlock to block every interaction and show a nice little message. Check out the uiBlock demos.

var uiBlocked = false;

window.setInterval(function() {
    $.ajax({
      cache: false,
      type: 'GET',
      url: '/mywebapp/alive.txt',
      timeout: 1000,
      success: function(data, textStatus, XMLHttpRequest) {
        if (data != 'alive') {
          if (uiBlocked == false) {
            uiBlocked = true;
            $.blockUI({
              message: "I'm trying to connect to the server.",
              css: {
                border: 'none',
                padding: '15px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff'
              } });
          }
        } else {
          if (uiBlocked == true) {
            uiBlocked = false;
            $.unblockUI();
          }
        }
      }
    })

  }, 2000);

This code will check the server every 2 seconds and will block the UI when the server is not reachable and will come back up if the connection is alive again. Depending on your scenario (intranet/internet) you can change the interval for checking the connection.

This took me a couple of hours to get to this point and I thought it might be worth sharing. It seems a bit hacky but it works. What do you think?

Lightweight Web Prototyping for the Framework loving (Java) Developer

Oliver Wehrens — Tue, 20 Apr 2010 13:00:53 +0000

A couple of month ago I had an idea for a small web app. But what does it take to do it ? Do you start with the back end or the front end (read server or client side) ? Typically I would start at the back end, get the domain right and then see how I can fit the UI in. If a programmer starts this way you end with the typical ‘the programmer did the GUI’ scenario. That’s not really what I wanted. Don’t think too much about the domain, just see what the needs of the end user are and get the UI done (right).

Trying frameworks …

But there you go, being a framework loving web developer, how do you do the UI, or better, in what technology? Among other I tried JSF 2 and I thought it’s cool. After a couple of hours I realized that this will slow me down. Fiddling with different ideas and concepts I just could not do that with JSF right away. I would have to write my own components. This is supposed to be very easy but still too much waste when I’m not sure if I even will use this.

Trying paper…

Next I started very basic and did some drawings. While this is all nice (I did it on my white board, I strongly recommend to do this on something you can erase) it turns out I had no idea on how to realize that in Html. I knew this must be possible somehow today but I had no idea what does it take to implement things like drag and drop, box scrolling, reordering and more. Nice thing I build on paper…but can I do it ?

The solution

What if I now combine those two approaches ? I needed some lightweight web framework, easy to learn (maybe one I already know) with quick turn around. After looking around for a couple of hours I came up with Html and jQuery.

I have some knowledge in Html and Css but I never did anything in Javascript or jQuery. So there is something new to learn. Since this was on my agenda anyway and I already bought Mannings jQuery in Action book in December I went this route. I hoped that adding jQuery into the page would give me some interactivity to the otherwise static Html page.

It turns out, it was the best choice. I came up with at least three completely different designs in a matter of evenings, got them to a working stage and could ‘feel’ how they would work (or not). After experiencing this I decided to do some substantial changes to the UI. Dragging and dropping is all nice and dandy, but it’s too much clicking and dragging for the app. On paper this really looked cool but in practice it was not.

It’s amazing what you can do with jQuery. You can save state on elements using Html 5 attribute, can load other Html snippets as Ajax responses and use a dozen jQuery plugins for menus, zooming, dragging and so on. Not to mention the power of jQuery itself. You can append action, animations or anything to any element. Without programming one line server side I got a fully working prototype running including adding and removing items, saving, loading and dynamic generated forms.

Some more iterations later (still not 100% happy) I started to implement it for real. Since I wanted to stay with that design (and very much Ajax oriented) I went the route of Direct Web Remoting and Freemarker. Freemarker will render my templates and DWR talks to my Spring beans. Whenever I needed to design another page I first did the standalone Html version, got it to a working state and then integrated it in the app.

Conclusion

Even if I would not have decided to use jQuery and pure Html for the final implementation (totally depends on the use case) I would strongly consider going the same route for doing the prototype again. It was so easy and the feedback was right there. I could throw away not working ideas and make new ones very easily. There was a learning curve using jQuery (and I needed to refresh my CSS) but it was time well invested.

How do you your prototypes? Fully integrated with your existing frameworks or on paper?

How we switched from Subversion to Git

Oliver Wehrens — Mon, 22 Mar 2010 13:00:11 +0000

So I heard about these strange distributed version control systems like over a year ago. I used it in my own little projects and everything went smoothly and I really liked it.
The idea also caught on at work and my team started a using Git in a fresh project last summer. We did not had so much problems since you can use Git very much like a central vcs like Subversion if you want to.

Still, for all other code, we used Subversion.
We believe in agile and feature branches, so that’s what we do a lot. Every story has its own branch. If one story touches multiple code bases, that means multiple merge down/copy up’s.
At some point, in preparation for a sprint review, we found that code had disappeared from the trunk. Everything seems to work perfectly, just this feature was missing. Usually you would think if code was deleted, there would be at least one test failing and telling you that something is missing. But no, typing one wrong version number during merge down/copy up cut out the story very cleanly. Once we found the problem we could merged it back in from the not yet deleted feature branch.
Overall we managed to work with Subversion but it was a growing pain since we knew there was something better.

There are several advantages of distributed version control system which you all might have heard of already so I won’t go in to detail of this (of course there is also one major disadvantage: complexity). The main advantages for me are:

Everything is local – very fast
Merging is much much easier (or updating from another repo)
Because merging is easier I tend to branch more often to try out ideas

Now, what does it take for my team to get Git going in all major code bases?

Technology

Here is our setup what we use at work:

Windows PC, some Mac OS X
IntelliJ Idea 9.0.x
Teamcity 5.0.x
Maven

The OS: Windows and Mac

Basically no surprise here. Works on both machines.

The IDE: IntelliJ Idea 9

Idea does support Git. I do like the approach which they took to simply use the git binary of your operating system. With the version control console you can see what Idea is doing. This way you can watch and learn. Back with subversion we had sometimes trouble using two different tools for handling subversion problems, like Idea and Tortoise SVN. Using the same tool for everything will make it easier.
The Git integration is not perfect but it does work well.

Continuous Integration: Teamcity

Teamcity does support Git the same way as Subversion. There is one drawback however: Pre-Tested checkins are not supported yet. This cool features allows you to run all tests before checking in. You will never have a broken branch/trunk if you use it! Basically it will take your changes to the code base, runs all tests and only commits them if everything passes. Sadly, it does not work with Git (yet, but you can vote for this feature).
Teamcity does allow you however to do a remote run with the changes you committed locally. So you check in everything locally and while Teamcity runs all the tests you can keep on coding. Running all tests with your current changes in the change list is also supported.
Teamcity uses JGit and has some limitations (like no tagging support). In Teamcity 5.1 they want to use the Git binary as well.

Another problem, which I will talk about in the next section, is agent side checkout.

Build Tool: Maven

Maven supports git as scm. Nothing more to say.

Since we are releasing our software every other week we automated the build process to two stages. Building the release and packaging different build artifacts. We used to have a button in Teamcity, push it and 30 minutes later we had a release. Unfortunately the way Teamcity supports Git is that the code which will get checkout does not have a .git directory (and for maven it is not under source control). I still wonder what the heck they are doing there. Without that, maven can not advance the version numbers in your pom and you are stuck. Please go and vote for this feature now. Thanks.
Until then we just do it like in the good old times and do a maven release from the command line.

People

While everything so far was technical, the biggest challenge might be mindset of the people and support from your friendly manager.

I’m lucky that my boss is very hands on and really liked that idea (also, since he was the one we usually asked if we yet again had problems with Subversion properties being messed up somehow). Otherwise you might need to do some ROI calculation why this really is a good idea.

What I encourage is that every team needs to have 1 or 2 people interested in git. The others in the team should see the benefit of it, even though they don’t know how git works. My advice would be that one person would give a 20 minutes presentation of what you can do with it to all interested co workers. We did not do it, but looking back, we should have done it. Make sure that you bring across the message that switching scm’s will not be that easy. If possible make everyone read the first 3 chapters of the freely available Pro Git book (and also buy a copy or two for the library). This will give them a much better understanding.
It is change and change usually causes some trouble. We got a team commitment for it so at least nobody was opposed to it. If a couple of people are not happy with the way how the new things are around here, they will have an easy time to make a loud and clear statement that switching to Git was a bad idea. Git is more complex but also more powerful.

I did a plan on how to migrate. This took me just a couple of hours.

Which code bases to migrate
Where to put the git repositories? Use the filesystem, SSH, Gitorius, Gitosis, Github:fi
You might need more infrastructure, everybody needs ssh keys
Any depended processes
External collaborators
When does operations have time to implement it
Does the release process still work
Continuous Integration System
Test conversion of the subversion repository
Access rights
… there might be more I forgot about

Plan and test these as much as you can. We started to use git just to discover that we missed some use cases like our automated runs to check the external web service dependencies. Two people doing the planning certainly helps.

After start using it, we had one guy (me) who went around for the first 2-3 days and helped people with their git related problems. There will be problems, I promise!

We did migrate all of our code at once since we did not want to be stuck between two vcs’s. We will go with Gitorius and ssh based authentication. Since we do not have a server for that (yet) we use a shared drive for the time being as a repository. Being distributed it will be no problem for Git to change it’s location later on.

The first two of days were a bit tricky but it got much smoother after we all got used to it.

The work flow is different and it will take some time until everybody takes advantages of all the features like commit your files more often or make more private branches to try out ideas.
We started with a similar work flow we are used to and plan to introduce one feature of git at a time. This could have been better. Iron out the known commit habits with Git and make sure this works in your favorite IDE before hand. It is very important to make the transition a better experience.

We started just this month but we already had some nice effects like merging two branches with renamed files. On guy changed file and somebody else renamed the same file in his repository. As he merged in the changes, the change appeared in the renamed file. Really great.

Do you use a distributed version control system? How did your transition go ?

5 code metrics you need to watch

Oliver Wehrens — Tue, 23 Feb 2010 14:00:27 +0000

Developing software ain’t easy.

How do you know how you are doing ?

You could start collecting metrics about your code. These can give you some indication how maintainable and reliable it is.

The metric which come to mind to the most people is code coverage. Some people say it must be near 100%, other say 80% is a good number. At the end it can’t tell you if you are doing great or good. The only thing you might read from it is that a low number indicates a potential problem.

Duplication is another one you should look out for. A high number of duplicated code might bring up the problem that a bug was fixed in one place but lives on in other. If you are doing code generation (e.g. from WSDL’s) you might have a lot of duplicated code reported to you. A closer inspection is needed to really make sure this is a problem in the code you have written and is not auto generated.

Test success is not a metric you should be worried to much about. It just needs to be 100% at every checking in a shared repository. No discussion.

Cyclomatic complexity let’s you measure the number of linearly independent paths through your code. A high number means a more complex code. A complex code base is hard to maintain and involves a lot of work to adopt it to new requirements.

Dependencies between packages is another important value to check on (see Uncle Bob’s paper on Acyclic Dependency Principle). Basically it revolves around that packages should not have cyclic dependencies between them since this does have an impact on releasing and testing (and therefore coding). A change in one package could trigger a whole system build to make sure everything works together.

Tools like Findbugs let you define rules to which your code should comply to. This is great because it is tailored to your code/company and ensures you control and fine tune the measures. Or so. It requires some time to define these rules. They need to be refined over time and you have to understand them to make use of it. Of course you can leave out some of these and reduce complexity. Do not underestimate the effort to implement these.

This rounds up the metrics you can get from your code base.

But wait, there is more.

A valuable metric is the meantime between reporting a feature or bug and fixing. This gives your team (and management of course) a rough estimate how fast you can react to market changes.

To get an estimate of the mean time before a failure happens you can measure the time between two bugs. The higher the number the better. Current reported bugs per lines of code can also be measured. These metrics will give you some confidence in your code base.

At the end of the day the ultimate measure is the money on the company’s bank account. If this is not working out you are in trouble.

How to get all of these ?

There are some static code analysis tools to get you started. I only can talk about Java related tools but there are others as well.

To get more information about your bugs should query your bug tracking system like Jira or Bugzilla.

Summary

There are much more numbers out there but I think these are the ones you should always keep an eye on.

Look out for

Code Coverage
Duplication
Cyclomatic complexity
Cyclic dependencies
Test success
Time to market
Mean time between failure

What metrics do you look out for ? Let me know in in the comments and why.

Name your objects right

Oliver Wehrens — Tue, 09 Feb 2010 15:00:21 +0000

Whenever you create an object you have to find a meaningful name.

While renaming later in modern IDE’s is no problem at all you should not pick the first name which comes to your mind.

Imagine you have an external fraud detection web service and it will return a ‘hit’ or ‘miss’. How do you name this object? HitOrMiss maybe (since this is the representation you get from the webservice) ? It might describe the problem at hand. If you go with this name it will dripple down through all layers. The domain model, the dto’s, services and more will now reference to this object (and create their own derivates for it). Your colleagues which code up other parts of the system will refer to it and create their own variants of the name (like structure for web pages). The wrong name is now all over your code.

So much for refactoring in your IDE. You will never catch all the places automatically where the wrong name was used.

While it seemed lost time discussing the ‘right’ name for 5 minutes in the beginning it saves you much more time afterwards. Of course you might get also confused a couple of weeks later remembering what this thing really does and what it is used for.

Make sure you take time in naming your objects. A wrong decision can do some harm to your code. The later it turns out that the name was not correct the much more expensive it becomes to correct this mistake. If you are not really sure how to name it, talk to your colleagues and discuss the name. A second opinion can not hurt.

Maybe FraudDetectionResult would have been a better choice.

One year of blogging

Oliver Wehrens — Sat, 06 Feb 2010 19:46:59 +0000

One year ago I started to blog again. Time for a little recap.

Why did I do it ?

I use this blog to write down my own thoughts about software and development. This is for my own reference but also it is a little way to give something back to the world wide community in return for all the useful stuff I do read on the net.

I noticed how this also made me a better programmer. Try it out by yourself. Having a professional blog is also a good way for Personal branding.

Stats for the last 12 months

I love number so here they are:

About 15.000 unique visitors
About 20.000 pageviews

Traffic

20.64 % Direct Traffic
36.34 % Referring Sites
42.44 % Search Engines

Highest page views on one day: the Selenium 2 post, 620 pageviews (ok, this was big link of the day at dzone.com).

Countries

I had visitors from 120 countries.

3362 visitors from United States
2090 visitors from Germany
776 visitors from United Kingdom

Top posts

GeoLocation with HTML5 2670 pageviews
JSF 2 and maven 2607 pageviews
Selenium 2 and Concordion vs. Cucumber each 1566 pageviews

I have 142 RSS subscribed readers.

All in all, not too shaby .

Thanks

Thanks to everybody for reading my thoughts. Thanks for the comments and hints.

I’m looking forward to the next year. It is going to be a great one.

What’s your preferred development infrastructure stack?

Oliver Wehrens — Wed, 13 Jan 2010 14:25:42 +0000

In Response to Matt Raible’s question about my preferred development stack.

Source control

In my own development project I switched to Git some time ago. I was using svn and before that cvs for a couple of years. Git just makes it easy to try out small ideas very quickly without reverting the code. We will introduce Git at work pretty soon (I hope).

The Atlassian cloud

I was using Confluence as a Wiki in my open source project and my current employer Hypoport uses it as well. Bug tracking is pretty much a task of Jira. Those two integrate very nicely. You can have ping backs in your Jira Ticket from Confluence, so you see all related files. I would love to use FishEye but I’m not sure how to justify the costs and what the added value is in our case.

The Code

I’m pretty much sold to Jetbrains IntelliJ Idea. I’m using it for 5 years now. With it comes Teamcity. It’s a very nice continuous integration tool where the biggest plus (among other things) is the delayed (and pre tested) checkin. No more late night checkins which break the master. We just rolled out the latest version which has a much nicer Git integration (so we can make the switch).

So it comes down to:

The List

Source control: Git
Wiki: Atlassian Confluence
Continuous Integration: Jetbrains Teamcity
Bugtracker: Atlassian Jira

We are about to use Sonar for code analysis and development over time, but this is just in the beginning.

What’s yours ?

Using Selenium2 for web testing (and not Selenium IDE)

Oliver Wehrens — Mon, 04 Jan 2010 05:38:15 +0000

Selenium IDE

Selenium is well know for automatic testing web pages. It does support many browsers, operating systems and languages . A Selenium IDE exists to aid you creating automated tests.

Selenium IDE

It is possible to write extensions in JavaScript to have data driven tests. If you organize your selenium tests in a way that you split the pages and forms in components, you can load up new data for the tests (written in xml) to fill out forms differently for each use case. The Selenium IDE will be of a great help here since you start develop the tests in the IDE and later ‘just’ parametrize the pages. With a couple of more javascript magic you can run these as well in Selenium Remote Control (Selenium RC for short). This even works for running the tests in continuous integration systems like Hudson or Teamcity.

Great Stuff.

The problem.

The drawback coding up your tests with the Selenium IDE is: HTML.

You will end up with some test suites including many test scenarios. It will be one big ball of


  type
  accountnumber:Value
  82892892811


  type
  accountAmount:Value
  2345.33

You will build components and you will end up with GotoIf and Label statements. Back to Basic programming from the 80ties. Without more javascript extensions you also can’t reuse combinations of scenarios.

While this works pretty ok: I’m a programmer and do have a problem with the quality of the produced code. It’s easy to mess up. It’s not safe for refactoring. To extend functionality you need to have javascript knowledge. Depending on your company profile (e.g. java shop) , this might be a problem. Having a dedicated tester on the team certainly helps to overcome these obstacles, but if everybody in the team just once in a while looks into the Selenium IDE tests, the quality and the reliability of the code will not improve. Not to mention all the copy and paste. Been there, done that.

Selenium 2

A much nicer approach for me would be something like this:

WebDriver driver  = new FirefoxDriver();
AppWebTest test = new AppWebTest(driver, "http://myapp.com/login");
LoggedInUser user = test.login("user", "password");
Account account = user.createNewAccount("DemoAccount");
account.addPerson(PersonFactory.createPersonWithNoIncome());
...
account.verify();

This would log in a user, creates an account and assigns a person to it. Everybody could read and understand it. Furthermore you can easily reuse components and logic. I would imagine that creating a DSL, matchers and finders is everything one would need to have a very nice test scenario.

All that is already possible with Selenium 1 and the language bindings (more or less).

Just with the release of the first alpha of Selenium 2 mid december 2009 it became just a little bit easier.

Selenium 2 is the combined effort of Google’s Webdriver and Selenium. Webdriver tries to tackle Seleniums problems with Javascript and the security model as well as the complex Selenium RC API.

Selenium is written in JavaScript which causes a significant weakness: browsers impose a pretty strict security model on any JavaScript that they execute in order to protect a user from malicious scripts.
…
Additionally, being a mature product, the API for Selenium RC has grown over time, and as it has done so it has become harder to understand how best to use it. For example, it’s not immediately obvious whether you should be using “type” instead of “typeKeys” to enter text into a form control. Although it’s a question of aesthetics, some find the large API intimidating and difficult to navigate.

Webdriver does not use JavaScript to control the web browser but uses native controls, e.g. an extension for Firefox or the native automation extensions of IE. Furthermore it introduces an object based API instead of following Seleniums directory based approach.

So given the above example the login method would look something like this:

 public LoggedInUser login(String userName, String password) {
    driver.get(url);
    driver.findElement(By.id("user")).sendKeys(userName);
    driver.findElement(By.id("password")).sendKeys(password);
    driver.findElement(By.id("login")).click();

    LoggedInUser user = new LoggedInUser(driver);

    WebElement startPage = driver.findElement(By.id("startPage"));

    assertThat(startPage().getText()).isEqualTo("Start");
    return user;
  }

You can take this to any level. It took me just a few hours to model the above use case with componentized input elements.

With a bit more abstraction addPerson looks something like the following code. Whatever is needed to add a person to an account will be replayed. This is what Selenium IDE would normally do.

public void addPerson(Person person) {
    jumpToAccountOverView();
    clickOnLink("menu:Overview");
    clickOnLink("table_personTable:link_newPerson");

    inputGuiElement(person.getTitle());
    inputGuiElement(person.getLastName());
...
    clickSave();

And now for the best part. You don’t really need a real web browser. Selenium 2 supports 4 WebDriver:

Firefox
Chrome
Internet Explorer (on Windows)
HtmlUnit

HtmlUnit

With enabled JavaScript on HtmlUnit (it uses Rhino, so not all JavaScript tricks might work, could be a drawback depending on your scenario) I can run my test as TestNG or JUnit test case. No need for a Selenium RC anymore. No browsers running locally or on remote machine listing to ports to execute tests and transmitting results back.

It is very useful to have the Selenium RC take screen shots during it’s run. Selenium 2 can’t do this right now (and with HtmlUnit never can). But by simply integrating some logging in the components and elements and you know right away where things went wrong.
Developing with the Selenium IDE might seem like a must, but during the work on my prototype all I needed was Firebug and a XPath Searcher. I did not miss it at all. To do integration tests you could test all components independently and one at a time. Once these work, chain them together and let them run as unit tests. Did I mention HtmlUnit is fast ?

Conclusion

I barely dug into the webdriver code, I played around with it for a couple of hours and I’m sure there more is stuff (and bugs) to find. Given that Selenium 2 is in alpha 1 stage right now I expect very nice things coming out of it. It certainly looks like the way to go.

Another strong contender is Canoo WebTest. I will have a look at this one in another post.

Update Ajax and HtmlUnit 1/5/2010

It does not seem to work. You need a real browser to get dynamically content re-rendered through Ajax.

A method waiting for an id to be rendered (or timeout after x seconds) could look like this:

  public void waitForElementOrTimeout(String idToWaitFor, int timeout) {
    long end = System.currentTimeMillis() + timeout * 1000;
    RenderedWebElement resultsDiv = null;
    while (System.currentTimeMillis() < end) {
      try {
        resultsDiv = (RenderedWebElement) driver.findElement(By.id(idToWaitFor));
      }
      catch (NoSuchElementException e) {
        //
      }
      if (resultsDiv != null && resultsDiv.isDisplayed()) {
        break;
      }
    }
    assertThat(resultsDiv).isNotNull();
  }

This will either find the element specified or throw an assertion (updated example from the selenium 2 page).