Overview
As developers we can create great software. Unfortunately, we usually introduce a few bugs along the way. Using a testing tool can ensure we catch the bugs and resolve them quickly.
There are many different approaches to testing. Some advocate writing the tests within the application, others suggest a separate testing environment entirely. There are merits to both these approaches. For this blog post, I’ve focused our attention on Selenium as both Ext JS and Ext GWT and benifit from this “black box” testing methodology.
Selenium provides a powerful mechanism to test your Ext applications. Selenium works by executing tests against your running application within the browser of your choice. Selenium tests emulate the way a user would interact with your application by executing JavaScript to simulate user actions. Selenium tests run as a form of “integration” tests as they execute against your running application.
Both Ext JS and Ext GWT applications can benefit from Selenium tests. In fact, with few exceptions, the tests created for one product should be interchangeable as both products produce the same DOM structure.
With GXT applications, GWT provides built in JUnit support. This provides a great way to test your application. However, these tests run only in host mode. Being able to test your compiled application in multiple browsers is important as some issues only appear within your compiled application.
In general, you create Selenium tests and then execute them in a variety of ways. This tutorial will demonstrate creating tests with Selenium IDE, a Firefox plugin, and creating tests within Java. Tests will be loaded and executed within the Selenium IDE, and Java JUnit tests will be executed using Selenium Remote Control.
Selenium IDE
Selenium IDE is a Firefox extension that allows you to create, edit, and execute your tests. Tests can either be created manually, or by “recording” your actions. Recording can help you get a feel on how the Selenium commands are generated, but in most cases you will want to tweak the generated commands.
A Selenium test is a list of commands. Commands can be seen as actions, such as “click this element”, “type into this field”, and “assert an element exists”.
Install Selenium IDE
First, you will need to install the plugin which can be found here. Once installed you can choose or from the Firefox application menu.
Spend some time playing around with Selenium IDE. You can use the record button (red circle) to have the tool record your actions or you can enter commands manually. Most commands require a locator string. The locater string is repsonsible for identifying elements. There are various “types” of locator strings which are covered later.
Using Selenium IDE you can save and load tests. Also, notice the source tab. This tab allows you to view the test source. Selenium tests are saved as HTML files and can be exported to multiple server-side languages PHP, Ruby, Java, C#, Perl, and Python.
Creating a new Selenium Test
In this example, we will be testing both an Ext JS and Ext GWT form and it’s fields. First, let us take a look at the example code we will be testing. You can find the source code here:
Rather than creating a test from scratch, we will load an existing test file (listed above). Download this either the Ext JS or Ext GWT file to your file system. Then open the test in the Selenium IDE by selecting . Once loaded, Selenium IDE should look this this:
Notice the list of commands. Take a look at each command to get a feel of what the test is doing. If you opened Selenium IDE as seperate window, close it. Then open Selenium IDE using . This will place selenium in the sidebar making it easier to run and monitor tests.
You can execute the test by clicking the first icon with the green arrow in the tool bar. Notice that you can control execution speed, use break points, execute individual commands, etc. After running your test, you screen should look like this:
Notice the form fields have been filled out. Examine the commands closely to see what actions were taken and what assertions where made. This test only touches the surface of things you can accomplish with commands. Note: When running the Ext JS test file, the radios and check boxes will not show the checked state, however, the true state will be correct, and the tests will run successfully.
Selenium Locators
Many Selenium commands require a locator to be specified. A locator is a way to identify an element in the page (the DOM to be specific). There are various types of locators including id, name, dom, xpath, link, and css. For this tutorial, XPath expressions where used. XPath expressions provide a powerful mechanism to identify elements. Example expressions look like this:
//input[@name='name'] |
//input[@name='name' and contains(@class, 'x-form-invalid')] |
//input[@name='company']/following-sibling::img |
//div[@id='Apple'] |
//div[@class='x-combo-list-item'][3] |
Here are a few examples using CSS selectors:
css=html:root |
css=div#structuralPseudo :nth-last-child(2) |
css=a[class~="class2"] |
extjs
No comments:
Post a Comment