Web development arguably has two distinct eras: BFB -- the (prehistoric) time before Firebug when we learned the limits of alerts -- and the modern AFB (after Firebug) when we found that we can once again spend quality time with our families. Firebug truly is Web development evolved. Developing a Web application without using Firebug is like coding Java in vi -- it can be done, but it's just not worth the pain.
Firebug is a free, open source Firefox plugin that wraps a number of helpful tools into one incredibly useful package. In addition to a DOM explorer, a CSS tweaker and a network monitor, Firebug gives you:
- The ability to log information to the console
- Error messages that leave "Object not found" in the dust
Figure 2 shows Firebug in script mode.
XMLHttpRequest (XHR) viewer.
Although it's no substitute for the real thing, Firebug Lite can be a life saver. You can add it to any page in need of some debugging love, and it's also available as a handy bookmarklet.
Are you wondering why your page isn't as snappy as it could be? YSlow to the rescue! A Firebug extension, YSlow gives your page a letter grade based on how well it conforms to a set of performance rules developed by Yahoo!'s Exceptional Performance team. If your page doesn't quite measure up, help is only a click away. YSlow even includes an option to get a printable view of YSlow's data so you can post that coveted A grade on the fridge in the break room. Figure 3 shows a YSlow performance report.
equals, and so on. Just like JUnit, JsUnit provides a setup and a tear-down concept (including a page setup) and you can run a group of related test pages together via a test suite.
JsUnit includes a test runner that gives you the familiar red or green bar. Errors and failures are displayed in a list box -- double clicking reveals the details including the browser's error message. The test runner accepts a number of standard query strings that can change how the runner acts, and you can also pass in your own criteria if you wish. Figure 4 shows the JsUnit TestRunner in action.
The test runner is great, but how do you incorporate JsUnit tests into your continuous-integration (CI) server? Enter the JsUnit Server, which serves three purposes:
- Results logging
- Executing JsUnit tests from Ant or JUnit
- Executing JsUnit tests on multiple machines (across operating systems and browsers)
Using standard Ant build files, you configure the server with the list of browsers to use, the URL to your test suite, as well as the URLs of the remote machines. Invoking the tests is a simple as calling the appropriate Ant task.
assertEquals, you'd write
should_be. JSSpec includes a
before_each and an
Though JSSpec is designed to run in a browser, you can run it headless, thanks to some hard work from John Resig and the fine folks at Relevance.
tearDown methods, and you can easily skip tests by using
the _should.ignore property.
Unlike the JsUnit and JSSpec, YUI Test allows you to simulate basic user actions such as mouse clicks and key events, and it gives you the ability to pause a test to allow for asynchronous calls to the server. Tests can be grouped using test suites and are run via a basic test runner. Don't judge the runner too harshly -- it's new, and as the tool evolves, it's expected that additional visualizations of the test results will become available.
Crosscheck is a bit out of date, but if you're struggling with the multi-OS/browser issue, you owe it a chance.
Testing the UI
Selenium is a Web testing tool from the good people at ThoughtWorks. The Selenium project is broken up into the IDE (a Firefox add-on), Remote Control, and Grid. The IDE, shown in Figure 6, allows you to record an interaction and then either play it back in the default runner or export the test to any of six languages, where you can add them to your preferred testing tool.
Remote Control is a simple server that can launch and kill browsers, allowing you to easily incorporate Selenium tests into your CI server. Grid takes Remote Control to the next level by distributing tests to multiple machines, thus speeding up your test runs.
Watir is another Web testing tool from ThoughtWorks. This one was written by and for quality-assurance (QA) people. Watir -- short for Web App Testing in Ruby -- allows you to create tests simply and easily using the Ruby language for scripting. Originally it only supported Internet Explorer, but there are now plugins and ports for other browsers and OSs.