Functional testing for web applications: Selenium IDE for firefox

In a previous post I wrote about PHP Unit testing.

In software science, the levels above Unit testing are Integration, System and System integration testing.

For a standard web application I suggest to use only Selenium [official site], a powerful complete framework , distributed with apache licence 2.0 (a free-software, GPL compatible).

Selenium includes many components. In my opinion the most useful is Selenium IDE [page], a firefox plugin to create action tests, play and check results.

It's very easy to use the IDE [official manual], but to write good tests it needs some practice.

Basically, a test case is a sequence of commands, and a test suite is a cluster of test cases.

To create actions the tool allows to record user actions (clicks, page opening...) or manually insert/edit (mainly to insert verify-actions) and play the test case (or test suite), then check results.

It's possible to export the test cases in many formats (html table, o export (html table format, PHPunit selenium extension, etc...) and to import (only html table).

Every command has only one or two arguments. The command reference is present in selenium IDE. Here are the commands I mainly use and I suggest:

• open dir/page.html
  open the url specified
• type id=phone 123456
  fill in field with id=phone with the text "123456"
• clickAndWait id=elementID
  click on the link with ID equal to "elementID" .
  
• clickAndWait link=text
  click on the link with "text" as internal text (a "text-dependent" approach is plainly not recommended)
• verifyTextPresent done
  Verify the page contains the text "done". If not, the test will fail at runtime. (be careful: "text-dependent").
• verifyElementPresent id=elementID
  Verify the page contains the element with ID equal to "elementID". If not, the test will fail at runtime.
• assertConfirmation
  assert a javascript confirmation appear

Instead of use the ID to locate an element (example: "id=linkA") it's possibile to use XPath expressions [syntax by w3c school] as locators. Example: "//div//a[2]" is the second link inside the "div" tag. I don't suggest to use XPath: if you (or the designer) change the template (position, or text inside links, or change teh text) the test will not work !

To write solid reliable tests, remember to use a univocal ID for elements to test (message confirmation, links, form fields..), and write the test as soon as the application is working (you will easily and quickly test the correct application behaviour after adding new features).

To test CRUD forms, I suggest to write the html code (template) using a different ID for confirmation messages and error messages

[?php if ($result ): ?]

[div id="postok"]submit ok[/div]

[?php else: ?]

[div id="posterr"][?php echo $messageError ?][/div]

[?php endif; ?]

To test the result of this form:

verifyElementPresent postok

or

verifyTextNotPresent posterr

Selenium IDE screenshot