Introduction (How can testing make our lives easier)
Testing is important, saves time, and makes our life easier. Imagine a world where you can easily identify when changing code breaks existing functionality. With Selenium we can write test suites for projects that can be automatically executed prior to code pushes, in this way we can have a high level of confidence that changes to a code base don’t have any unintentional consequences.
Functional testing of web applications isn’t easy, different browser/OS combinations all react differently, and now with the proliferation of Ajax, traditional testing methods no longer apply. Selenium is great because it allows you to wait for and verify that certain Ajaxy conditions are met. Additionally you can write one test script and run it on all browser/OS combinations.
This document is not intended to be a complete reference guide or tutorial (since there are many already available on the web including: http://www.devchix.com/2007/02/19/an-introduction-to-selenium-ide/, http://selenium-rc.openqa.org/tutorial.html, http://www.infoq.com/articles/testing-ajax-selenium). Instead, the goal is to introduce Selenium, discuss the importance of testing, and provide some information specific to our process to help us improve the quality of the sites we develop.
What is Selenium?
“Selenium is a test tool for web applications. Selenium tests run directly in a browser, just as real users do. And they run in Internet Explorer, Mozilla and Firefox on Windows, Linux, and Macintosh. (http://selenium.openqa.org/)” Selenium comes in a few different flavors: the Firefox IDE (integrated development environment), Selenium Core, Selenium RC, Selenium Grid and Selenium on Rails. Selenium IDE and RC are discussed below.
Selenium IDE
“Selenium IDE is an integrated development environment for Selenium tests. It is implemented as a Firefox extension, and allows you to record, edit, and debug tests. Selenium IDE … allow[s] you to easily and quickly record and play back tests in the actual environment that
they will run. (http://selenium-ide.openqa.org/)” Selenium IDE is written entirely in Javascript and has hooks for exporting test cases in your favorite language (Java, Ruby, Python, Perl, and PHP).
Clicking the record button (top right corner) allows you to execute commands in your browser to create a Selenium test. When you have executed all the commands in your browser, you can use an assert command to verify that a certain condition has been met.
Although the IDE does not compare Visual Studio or Eclipse, you are still able to step through commands, set breakpoints, view debug output, and double click commands to see them execute in the browser.
A Trivial Example
- Download the Selenium IDE (http://selenium-ide.openqa.org/)
- Launch the IDE from the Firefox Toolbar:
- Click record:
- In Firefox, go through the series of steps you need to accomplish to verify that a condition has been met:
- Walking through each of the commands in the test above:
- Open: Opens the base URL above (www.google.com) with the extention /ig?hl=en (the default when I go to Google):
- Type: target=q, value=mets best in NL. In this step, the value of the search bar has an html id of “q” (you can verify this using firebug, see the image below). By selecting target=q, it selects the search bar, and types in the value “mets best in nl.”
- clickAndWait: target=btnG. Click on Google Search. Using firebug you can also verify that the Google Search button has the id=”btnG” Wait till the resulting page is loaded.
- clickAndWait: target(link=ABC News: Santana Deal Makes Mets…) So not only can you target elements by their ID, you can also reference links by their display text:
- assertTextPresent: Santana Makes Mets NL Favorite. This final step creates a true/false condition at the end of the test. If that link is clicked and the text is present on the following page, then the test case passes with a value of True, otherwise False.
A Less Trivial Test Case (and some useful commands)
The following test case goes to the Shop Dev environment, adds a few products to the cart, goes through the checkout process, and asserts that checkout has successfully completed. In order to run this test you must be connected to the Shop VPN. Please note that I have removed the aforementioned example because of security issues. I plan to include another one soon.
Let’s review some of the more useful commands used in this test case:
- waitForElementPresent – Verifies that the specified element is somewhere on the page. If you try using the recorder to generate test cases, you will find that in most cases, it executes them too quickly. waitForElementPresent allows you to use an id, name, javascript expression, xpath or link as an input. For more info see: http://release.openqa.org/selenium-core/0.8.0/reference.html. This is especially useful when waiting for certain conditions to be met, like waiting for a layer to pop-up (shopping cart), or waiting for the content on screen to change (like checkout).
- assertVisable – Determines if the specified element is visible. An element can be rendered invisible by setting the CSS “visibility” property to “hidden”, or the “display” property to “none”, either for the element itself or one if its ancestors. This method will fail if the element is not present. In this particular case we end our test with asserting that id=successResponse is visable and failureResponse is not.
Selenium RC
While the IDE is great for writing test cases, you can only write test cases in Selenese (the HTML table format), tests can only be executed in Firefox, and you don’t have the ability to kick off a series of tests. Enter Selenium RC.
“Selenium Remote Control provides a Selenium Server, which can automatically start/stop/control any supported browser. It works by using Selenium Core a pure-HTML+JS library that performs automated tasks in JavaScript.
The Selenium Server communicates directly with the browser using AJAX (XmlHttpRequest). You can send commands directly to the Server using simple HTTP GET/POST requests; that means that you can use any programming language that can make HTTP requests to automate Selenium tests on the browser. To further ease this process, we provide wrapper objects for a number of mainstream programming languages (Java, .NET, Perl, Python, and Ruby).
Finally, the Selenium Server acts as a client-configured HTTP proxy, to stand in between the browser and your website. This allows a Selenium-enabled browser to run JavaScript on arbitrary websites. (http://selenium-rc.openqa.org/)
Setup
- Download Selenium RC (http://selenium-rc.openqa.org/download.jsp)
- We made a modification to the Selenium Server Jar file to allow us to verify text is present in XML (thanks Nicholas and Sudhakar!) Download the updated jar file here: http://extranet.ipartners.com/selenium/selenium-server.jar
- Start the Selenium Server:
java -jar selenium-server.jar -interactive
Test it out by trying to open Google in Firefox:
cmd=getNewBrowserSession&1=*firefox&2=http://www.google.com
An example using Python
- If you don’t have it already download Python http://www.python.org/)
- Download the following files into the selenium-python-client folder:
selenium-python-client folder: Again because of security reasons I had to remove this example, I will post a new one soon.
The Future
Eventually we hope to integrate testing more deeply in our process. One day as part of any code push automated test scripts will run and code will only get pushed if these tests pass in the target environment. Once we have a core framework in place, we can automate the process of nightly builds and testing. See tools like http://cruisecontrol.sourceforge.net/http://www.jsunit.net/
In the near future we will need to centralize test machines. For now having one test machine with virtual instances with different browser combinations will work. In the long term Selenium Grid will work till we get into Cloud Computing
A few more long term goals:
- Continuous Integration:http://www.martinfowler.com/articles/continuousIntegration.html
- Test Drive Deployment:http://www.martinfowler.com/bliki/TestDrivenDevelopment.html
- XP:http://www.extremeprogramming.org/
Additional Resources
Reference
- http://release.openqa.org/selenium-core/0.8.0/reference.html
- http://agiletesting.blogspot.com/2006/01/useful-tools-for-writing-selenium.html
- http://ttwhy.org/home/blog/2007/05/12/selenium-ui-element-locator/
Tutorials
- http://www.devchix.com/2007/02/19/an-introduction-to-selenium-ide/http://selenium-rc.openqa.org/tutorial.html
- http://www.infoq.com/articles/testing-ajax-selenium
Testivus
Related posts: