WEB Advent 2011 / Don’t Forget the Front

Everyone talks about automated testing for your code, but that’s only half of the testing I need. What about the front end? Forms need some testing love, too, and SimpleTest is how I get it.

SimpleTest is very easy to install. Just download the latest version, upload it to your server, then unzip it. That’s it! Now you can get started writing tests.

SimpleTest can handle all of the unit testing for your normal behind-the-scenes code, but it also has an internal web browser, so it can also test the front end, too. To get started, create a PHP file for your tests. Include autorun.php from SimpleTest. For tests that will use the internal web browser, you also need to include web_tester.php. Then, create a class for your tests that extends the WebTestCase class.

require_once 'simpleTestDir/autorun.php';
require_once 'simpleTestDir/web_tester.php';

class contactForm extends WebTestCase {

}

It’s now time to get down to the actual tests. SimpleTest offers a lot of options for ways to test. You can check the page title, whether specific text is present on a certain page, whether a certain cookie exists, and so much more. See the SimpleTest documentation for a complete list of options.

One of the things that I like to test is to make sure that a specific error message displays when bad data is sent in a form. With SimpleTest, this is easy. Load a form using $this->get() and provide the URL of the page you want to test. Enter data into a field using $this->setField() and provide the name of the field as the first argument and the value of the field as the second argument. Commit an error, such as leaving one of the required fields empty, then submit the form with $this->clickSubmit() and provide the title of the submit button. Finally, you can check that the error message is displaying on the resulting page by running $this->assertText() and providing the text of the error message. The code would look something like this:

require_once 'simpleTestDir/autorun.php';
require_once 'simpleTestDir/web_tester.php';

class contactForm extends WebTestCase {
   function testUsernameField() {
      $this->assertTrue($this->get('http://myWebsite.com/myForm/'));
      $this->setField('username', 'bad username');
      $this->clickSubmit('Send');
      $this->assertText('Please enter a username with no spaces.');
   }
}

Now, when you view your test file in a browser, you will get a report telling you your test case is complete and that — hopefully — you have two passes, one for your assertTrue and one for your assertText. You did it; you are testing your form! SimpleTest also integrates with many of the continuous integration platforms, so you can incorporate front-end testing into the rest of your testing toolbox.

Developer Gift

I have two gift suggestions.

What do you get for the developer who has everything? How about a motorcycle repair shop in Honduras? Kiva lets you become a microfinancer, lending money to small, locally-owned businesses around the world. Kiva handles everything for you and sends you updates on the status of your loans. It’s a great way to take a small amount of money and make a big difference in someone’s life.

Love to play guitar, but don’t want to deal with the bulk of carrying one around all the time? Get the Electronic Rock Guitar Shirt! You can keep coding, but your guitar is ready for rocking at a moment’s notice. (And yes, it really plays!)

Other posts