This recipe creates tests for Galleria customizations that can be run across many browsers. This will allow you to ensure the quality of your customizations via automated testing.
In the tests we're going to write, we'll be using the Selenium test framework with the Firefox web browser. The advantage of Selenium is that it comes with an IDE plugin so novices can even write tests. The difficultly level is ideal to cover in this book.
We'll be using Selenium to record user interactions with our Galleria customizations. Once these interactions are recorded, they can then be tested against any additional functionality or changes to ensure that everything is still working as expected.
Before we get started, please download the Firefox web browser if you have not already done so, available at http://www.mozilla.org/firefox. Follow the instructions to download and install.
Then, open Firefox and visit http://seleniumhq.org/download/ and follow the instructions to download and install the Firefox Selenium IDE plugin. Make sure to restart Firefox after the plugin is installed.
Finally, open up Selenium IDE by clicking on Tools in the menu bar and then selecting the Selenium IDE
item in the menu. There should be a Selenium IDE window like the one in the following screenshot:
Once Selenium is set up, locate the myfirstgallery.html
file that we created in the Setting up the development environment recipe. We'll be creating tests for that gallery.
First, open the
myfirstgallery.html
file in Firefox.Then, click on the record button (red button in the upper right-hand corner) and then start using the gallery as the user would. Selenium will be recording all the actions that we perform.
Once all the functionality is tested, click on the record button once more to stop recording.
Now, before we run the test just created, reduce the speed all the way down. It should look like the following screenshot:
Modifying this prevents Selenium from running the test action too quickly. If it ran too quickly, Galleria wouldn't finish the transitions before the next action is performed.
Finally, click the play button to run the test we just recorded. The whole test suite should run without failure if it was done correctly.
Inspect the source tab of the recorded test. It should contain something similar to the following code snippet:
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head profile="http://selenium-ide.openqa.org/profiles/test-case"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="selenium.base" href="http://change-this-to-the-site-you-are-testing/" /> <title>New Test</title> </head> <body> <!-- Each test is specified in table format. Each row specifies an action the Selenium is automating --> <table cellpadding="1" cellspacing="1" border="1"> <thead> <tr><td rowspan="1" colspan="3">New Test</td></tr> </thead> <tbody> <tr> <td>open</td> <td>file:///path/to/galleria/development/myfirstgallery.html</td> <td></td> </tr> <tr> <td>click</td> <td>css=div.galleria-image-nav-right</td> <td></td> </tr> <tr> <td>click</td> <td>css=div.galleria-image-nav-right</td> <td></td> </tr> <tr> <td>click</td> <td>css=div.galleria-image-nav-right</td> <td></td> </tr> <!-- more tests would follow → </tbody></table> </body> </html>
The test code is actually just simple HTML table markup with events and element selectors, so from here it's possible to save these tests as files to version control and run them on different machines and browsers.
In addition to the actions that were recorded, it would be beneficial to also include assert statements to make sure certain elements are present in the DOM as each action is performed. Inspect Selenium IDE for details on using more commands and tests.
Selenium IDE allows us to record all the actions being performed in the browser. Then the Selenium test driver plays the tests defined against a web browser, in our case Firefox.
Those tests can be run against a Selenium server that is set up to test against multiple browsers and operating systems.
Selenium has a vast API and documentation area on its website. Anyone who is interested in learning more about it should read it, available at http://seleniumhq.org/.