• Tweet
• Share

• Tweet
• Share

Ever setup a demo for a client, only to find you had a syntax error in one of the key files? Or maybe you’ve forgotten to setup the database on the staging server and your boss is staring at a screen of MySQL errors. In this tutorial, I’ll show you how to put together a simple frontend-based test suite using Selenium, to help identify these issues sooner than later.

The Selenium project provides a set of tools to handle the testing of web applications. Selenium itself is simply a portable software testing framework, where the tests can be written in HTML or a programming/scripting language. The difference with Selenium is that tests are run directly within a web browser, “just like real users do.”

As a result, Selenium are very much oriented towards client-side results. For example, one of the simplest tests you can run in Selenium is loading a URL and checking if a certain snippet of text is or isn’t on the page. Selenium offers a number of applications built around the same standard, but we’re interested in Selenium IDE, a Firefox extension that allows tests to be developed and run from within Firefox with no additional software installation.

To get started with Selenium, just head over to the addon page to download Selenium IDE. Once you’ve installed it, restart Firefox and find Selenium in your Tools menu. Load it up, and find an application you want to practice on – one of your pet projects, maybe, or a website you frequently visit. Because Selenium runs on top of a standard web browser, it doesn’t care what you test, as long as it has HTML to work with.

The moment you start Selenium IDE, it starts recording commands. Selenium testing is composed of “test suites”, of which you may have one per application. Each suite includes cases, one of which has been created already and helpfully titled “Untitled”, and each cases consists of a series of commands to be executed in succession. When you start navigating around the current page, Selenium IDE will add those navigation procedures to the current test case, so that they can be replayed at a later stage. Start by clicking on a link; you’ll see a “clickAndWait” appear in the table panel of your Selenium window.

To create your Selenium tests, you can simply navigate around your website while recording. Selenium records everything from clicking links to entering data in input fields and submitting forms. To stop recording, hit the red circle in the top-right. At a basic level, this tests that your pages are being served correctly. You can then add in commands within the table – I suggest starting with “verifyTextPresent” to check if a snippet of text is found within the page (expressions allowed).

Once you’re finished, your test window might look something like this:

To run your tests, just hit the green play buttons – you may need to slow down Selenium to wait for pages to load if you’re running tests over the internet. Remember that some of Selenium’s tests are based on the DOM, and will fail if the DOM hasn’t loaded yet even if the application is running fine.

To save your tests to run them later, just use the File menu. In future posts, we’ll look at more complex use of Selenium and the multitude of custom commands available. In the meantime, why not subscribe to our RSS feed?