Written by John DeVight on 2011-May-11
Overview
One of the challenges of developing applications is testing the user interface. Fortunately, for web applications, there are some tools out there that make this a lot easier to do. The tool that I have worked with is Selenium. It is easy to use and works really well.
To be able to create some decent user interface tests, you need to have a stable user interface. Before writing any user interface tests, make sure that the initial development of the interface being tested as atleast completed the initial development phase.
Getting Started
Go to Selenium and download the following:
- Selenium IDE (Firefox plugin)
- Selenium Server (you will need to install the Java Runtime Environment)
- Selenium Client Driver for "C# (Selenium WebDriver)"
Using the Selenium IDE
Selenium has excellent documentation for installing and using the Selenium IDE. Go to Selenium, select the Documentation tab, and select "Selenium-IDE" from the Contents tree.
Tips to using the Selenium IDE
Many applications today use AJAX calls to impove application usability and performance. In the Selenium IDE documentation, there is some documentation on "The waitFor Commands in AJAX applications".
waitForXpathCount Command
Since I am comfortable with XPath, I typically use the "waitForXpathCount" command. To use this, you will need to have an understanding of how to write XPath queries. In my application I have a Telerik MVC TreeView extension for navigation. The tree can get really big, so I only load the first 2 levels in the tree when the page is rendered. When a treenode is expanded that needs to get it's child treenodes, I make an AJAX call. Therefore, in the Selenium test, I wait for the child node to appear before continuing with the test.
Here is a condensed version of the html that is rendered:
<body>
<div id="NavigationTreeView" class="t-widget t-treeview t-reset">
<ul class="t-group t-treeview-lines" style="">
<li class="t-item t-first t-last">
<div class="t-top t-bot">
<span class="t-in"><img src="/RootImage.ico" alt="" class="t-image">Root</span>
</div>
<ul class="t-group">
<li class="t-item t-last">
<div class="t-bot">
<span class="t-in"><img src="/ChildImage.ico" alt="" class="t-image">Child Node</span>
</div>
</li>
</ul>
</li>
</ul>
</div>
</body>
Assuming that exanding the node called "Child Node" makes an AJAX call to get it's child items and the html that will appear after the AJAX call is complete is:
<div class="t-bot">
<span class="t-in"><img src="/ChildImage.ico" alt="" class="t-image">Child Node</span>
</div>
<ul class="t-group">
<li class="t-item t-first t-last">
<div class="t-bot">
<span class="t-in"><img src="/ChildImage.ico" alt="" class="t-image">Child Node of the Child Node</span>
</div>
</li>
</ul>
The command to appear after the "click" command on the "Child Node" would be:
Command: waitForXpathCount
Target: //div[@id='NavigationTreeView']/ul/li/ul/li/ul/li/div/span/img[1]
Value: 1
This will look wait until the "<img>" tag for the "Child Node of the Child Node" is rendered before moving to the next command to "click" on the "<img>" tag for the "Child Node of the Child Node".
Generating C# Code for the User Interface Test
After you have created a user interface test, the user interface test can be exported to C# and included in a Visual Studio Test Project or Visual Studio Class Library Project that references NUnit. To do this from the Selenium IDE interface:
- Select the "File" -> "Export Test Case As…" -> "C# (Remote Control)".
- Give the file a name and save the file.
The default "C# (Remote Control)" format exports the Selenium test to C# with the expectation that the user will be using NUnit to do the testing. The format can be altered to allow the test to run in a Visual Studio Test Project. To do this from the Selenium IDE interface:
- Select the "Options" -> "Options…" menu.
- Select the Formats tab.
- Click the Add button.
- In the "Name of the format:" input text field, give your format a name such as "C# (Visual Studio Test Project)".
- Click the Save button.
- Select the "C# (Remote Control)" format and click the "Source" button.
- Copy the contents from the source window.
- Select the new format you created and click on the "Source" button.
- Overwrite the contents of the source with the source copied from the "C# (Remote Control)" source window.
- Make the necessary changes to support a Visual Studio Test Project.
Creating a Test Project for the Selenium User Interface Test.
Assuming that you are using NUnit, The steps to creating a NUnit test project are:
- Download the NUnit assembly from NUnit.
- Create a Visual Studio Class Library project.
- Add a reference to the NUnit assembly: nunit.framework.dll
- Add references to the Selenium Client Driver assemblies:
- Castle.Core.dll
- Ionic.Zip.Reduced.dll
- Newtonsoft.Json.dll
- Selenium.WebDriverBackedSelenium.dll
- ThoughtWorks.Selenium.Core.dll
- WebDriver.Firefox.dll
- [Optional] WebDriver.[Browser].dll, where [Browser] is the browser you want to test with.
- WebDriver.Remote.Common.dll
- WebDriver.Remote.dll
- WebDriver.Support.dll
- Add the class file to your project that was exported from the Selenium IDE.
- Compile your Test Project.
Running the Test Project with NUnit
Once your test project compiles, you will need startup the the Selenium Server before running your tests. The download for the Selenium Server is a jar file. You will need to make sure you have the Java Runtime Environment intalled.
To startup the Selenium Server, execute the following from a DOS window:
java -jar selenium-server-standalone-2.0b2.jar
Next startup the NUnit IDE. In the NUnit IDE, select "File" -> "Open Project…" and select the assembly for the Visual Studio Class Project. You can now run your Selenium tests!
Running Selenium Server as a Windows Service
I wanted to run the Selenium Server as a Windows Service on my build sever. To do this, I used the Non-Sucking Service Manager to register the Selenium Server as Windows Service.
Assuming that the jre is installed at "C:\Program Files\Java\jre6" and the Selenium Server has been put into the "C:\Program Files\Selenium" folder, to install the Selenium Server as a Windows Service with NSSM, execute the following from a DOS window:
nssm install SeleniumRC "C:\Program Files\Java\jre6\bin\java.exe" -jar "C:\Program Files\Selenium\selenium-server-standalone-2.0b2.jar"
References
- Selenium: http://seleniumhq.org/
- NUnit: http://www.nunit.org/
- Non-Sucking Service Manager: https://iain.cx/src/nssm/
Support ASP.NET Wiki
If you like this page, click on the "Share on" links in the wikidot toolbar at the top of the page to share it with your friends.
