Selenium testing

Last updated on
15 October 2016

Selenium is a tool which automates browser testing, and so can be used to test your Drupal website.

Selenium has two very different ways of creating and running tests:

  • Selenium IDE - a Firefox add-on that will do simple record-and-playback of interactions with the browser. You cannot install it from the usual web site, you must get it from the Selenium downloads page. Release 2.9.0 can be installed from here. The record function saves the history of your clicks in an HTML file containing a table with three columns and a row for each click. The language of the recording is referred to as "selenese". You can edit the recording in the Selenium IDE or with your favorite text editor. If the page you are recording has AJAX functions, you may need to edit the file to insert waits for the data returned by the AJAX call. There is detailed documentation available.
  • Selenium WebDriver - a program driven method of testing

Selenium IDE

Download and Install

Download and install the Selenium IDE driver for Firefox. Once Selenium is installed, choose Options > Options when the Selenium IDE window is open and set:

  • Select Remember Base URL, so you don't have to enter the URL of the website each time.
  • Deselect Start recording immediately on opening, because that's annoying.

Creating and Saving a Test Case

  • Launch Firefox.
  • Browse to the site you want to test. If you have a dev or stage server, run the tests there so your tests can make a mess (edit or delete pages) without disturbing your live site.
  • Click the Selenium IDE button near the right end of the Firefox toolbar to open the Selenium window.
  • Press the red Record button.
  • Do the actions you’d like automated.
  • Press Record again to stop recording.
  • Once you’ve completed your test, save it to the appropriate folder in your Git repository.

Tests are saved as XHTML files so you can view, edit, rename, and copy them in a text editor (or bulk edit them). Each step in the test appears as a row in a table.

Playing a Test Case

  • Launch Firefox.
  • Click the Selenium IDE button to open the Selenium window.
  • Load a test case by choosing File > Add a Test Case.
  • Select the test you want from the list on the left.
  • Press the Play Test Button (or the Play All Tests button).
  • You should see your test taking place in Firefox.

Note: You can also increase or decrease the speed of playback with the slider in the top left of Selenium IDE.

Creating and Playing a Test Suite

You can save a group of test cases together as a test suite.

  • Create and save all the test cases.
  • Load them up in Selenium in the order you’d like them to run, by right-clicking in the listing area and choosing Add Test Case. (It's possible to load the same test case multiple times.)
  • Choose File > Save Test Suite from the menu and save the test suite file.

Play a test suite -- that is, play all the test cases in the order in which they are listed:

  • Choose File > Open Test Suite from the menu and chose the test suite. The test suite name and the listing of test cases appear in the Selenium window.
  • Click the Play Entire Test Suite button on the toolbar to play them all in order.
    Or, double-click a specific test case to select it (so it's boldface) and click the Play Test Case button on the toolbar.

The test suite stores the path of the test cases, so moving individual test cases will break the test suite. You can fix by editing the test suite file in a text editor.

Adding Text to the CKEditor WYSIWYG

Selenium can't natively handle javascript elements like the WYSIWYG we're using. Fortunately it can pass Javascript through via the runScript command. If you wish to test adding text try the following command sequence, which replaces the current value of the text field with what you type:

Command: pause Value: 2000

Command: runScript Target: CKEDITOR.instances["edit-body-und-0-value"].setData('Some boring test text here.');

Command: pause Value: 2000

Pausing playback briefly before and after the JavaScript Command seems to be important; otherwise the editor may not finish loading or saving the text.

Selecting an Option That Uses Chosen

Command: clickAt Target: id=edit_field_whatever_und_chosen

Command: clickAt Target: //li[@data-option-array-index='1']

It doesn't always work. Replace the 1 with the index number of the option you want.

Outstanding Questions

  • How to record a test that selects an image using the media browser
  • How to record a test that adds multiple field collections or Paragraphs to a node

More Information

There are a number of videos on using the Selenium IDE with Drupal.

From NodeOne (now Wonderkraut Sweden): Selenium tests and Drupal development.

Selenium WebDriver

Drupal contains a number of contributed modules to enable you to use the Selenium WebDriver with Drupal: