In this post I will give a quick head first introduction into WebDriver. At the time of writing the WebDriver project is in the process of being moved into the Selenium.

Testing web pages can be difficult especially if the code is under development. An excuse commonly used is “We cant test while everything is changing”, fair enough but the basic functionality of the page probably wont change . For example allowing users to sign up, login or change their password.

This is where WebDriver can help. Interacting with a web page with WebDriver is straight forward. Get an element on the page and either read or write to it. In the “everything is changing” environment its unlikely that the CSS id of the username field or the password field will change very frequently if ever during normal development. You did give your all your fields CSS ids didnt you? If not the second test below will show you how to find your required field.

Below I give two examples using Twitter. The code below is setup to run in Python’s UnitTest using the Firefox browser. To run the code below, download WebDriver from Python Release and follow the instructions. Make sure you add

export WEBDRIVER=/home/channam/Code/python/webdriver

to your ~/.bashrc file under Linux to ensure no errors when running.

test_login_twitter_by_css_id fetches the username and password fields by their CSS ids. To find these I used Firebug for Firefox and the inspect element function.

test_login_twitter_by_xpath fetches the username and password fields by their position in an XPath query. To save writing the XPath myself I used a Firefox plugin called XPather which will display the XPath for a required element on a page.

Below gives you two separate ways for you to test logging into Twitter. The test is successful if we get back the correct title for the page once logged in. Both methods have the weaknesses, more so the XPath method where a small layout change will break the XPath location and so make the test fail. Given the choice, using the CSS id is usually a better choice.

#!/usr/bin/env python

import unittest

from webdriver_firefox.webdriver import FirefoxLauncher
from webdriver_firefox.webdriver import WebDriver

class TwitterTests (unittest.TestCase):

    def setUp(self):
        # setup web driver
        self.driver = WebDriver()

    def tearDown(self):
        # close the window, if you want to see the
        # finished page comment this out
        self.driver.quit()

    def test_login_twitter_by_css_id(self):
        # page we are testing
        self.driver.get("http://twitter.com/login")

        # find our elements
        # the html on the page with same ids
        username_element = self.driver.find_element_by_id(
                               'username_or_email')
        password_element = self.driver.find_element_by_id(
                               'session[password]')

        # use this to toggle the remember me box
        remember_me_element = self.driver.find_element_by_id(
                                  'remember_me')

        # type into the boxes
        username_element.send_keys('username')
        password_element.send_keys('password')

        # set the remember me box
        remember_me_element.toggle()

        # click Sign In and we should be logged in
        self.driver.find_element_by_id(
            'signin_submit').click()

        # check that the title of the page is
        # correct to see if we logged in
        self.assertEqual(self.driver.get_title(),
                             'Twitter / Home')

    def test_login_twitter_by_xpath(self):

        self.driver.get("http://twitter.com/login")

        # find our elements
        # the html on the page with same ids
        username_element = self.driver.find_elements_by_xpath(
                "/html/body[@id='new']/div[@id='container']/table/tbody/tr/td[@id='content']/div/form/fieldset/table/tbody/tr[1]/td/input[@id='username_or_email']")[0]
        password_element = self.driver.find_elements_by_xpath(
                "/html/body[@id='new']/div[@id='container']/table/tbody/tr/td[@id='content']/div/form/fieldset/table/tbody/tr[2]/td/input[@id='session[password]']")[0]

        # use this to toggle the remember me box
        remember_me_element = self.driver.find_element_by_id(
                                  'remember_me')

        # type into the boxes
        username_element.send_keys('username')
        password_element.send_keys('password')

        # set the remember checkbox
        remember_me_element.toggle()

        # click Sign In and we should be logged in
        self.driver.find_element_by_id(
            'signin_submit').click()

        # check that the title of the page is
        # correct to see if we logged in
        self.assertEqual(self.driver.get_title(),
                             'Twitter / Home')

if __name__ == "__main__":
    unittest.main()

I recently expanded the above to test for a sign up email for a project I was working on. When a user signed up for an account a confirmation email was sent to their email address with a link to validate their sign up. To test this I wrote a WebDriver test to sign up in a similar fashion to the ones above. The test instance on the site was configured to send all emails to a local IMAP server. Using Python’s IMAP libraries I was able to login and retrieve the confirmation URL contained in the email. I then visited the URL in the WebDriver code to test that the account creation had been successful.

WebDriver is a great tool for testing your websites so your users don’t have to.