Ext JS

Testing Ext JS & Ext GWT Applications With Selenium

November 3, 2008 by Darrell Meyer

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 Tools / Selenium IDE or View / Sidebar / Selenium IDE 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:

Test Source Code (Ext JS, Ext GWT)
Test URLs (Ext JS, Ext GWT)
Selenium Tests (Ext JS, Ext GWT)

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 File / Open. 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 View / Sidebar / Selenium IDE. 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"]

Executing Tests with Selenium Remote Control (RC)

Selenium IDE provides a great way to create your tests and execute them in Firefox. Tests can only be run by manually opening Firefox and executing tests. What if you want to run you want to automate your tests and run them in other browsers? This is where Selenium Remote Control comes into play.

From the Selenium website: “Selenium Remote Control (RC) is a test tool that allows you to write automated web application UI tests in any programming language against any HTTP website using any mainstream JavaScript-enabled browser. Selenium RC comes in two parts. 1. A server which automatically launches and kills browsers, and acts as a HTTP proxy for web requests from them. 2. Client libraries for your favorite computer language.”

Download Selenium RC

In addition to Selenium IDE, Selenium RC must be downloaded and can be found here. After downloading, unzip the file to your file system.

Starting the Server

The first step in using Selenium is to start the server. The server is responsible for executing your tests. The server will open browser instances, run tests, and close browsers. The server is written in Java and can be started by executing this command:

java -jar selenium-server.jar

The command should be executed from the folder where the selenium-server.jar is located.

To run your tests in Java, you must reference the Java client library. See selenium-java-client-driver.jar in the Selenium RC download.

Creating a test in Java

Selenium RC supports various languages, we will focus on Java. Rather than creating the Java test from scratch, Selenium IDE can be used to create the base Java code needed to create the test. From Selenium IDE, select the source tab, then choose Options / Format / Java. You will see the test is converted form HTML to Java. You can then copy and past the Java code to be used in your Java test. You can use the same steps to create code in other languages such as PHP and Ruby.

Here is the Java code that was created using the template code from Selenium IDE:

public class SeleniumTestCase extends SeleneseTestCase  {
 
  private Selenium selenium;
 
  public void setUp() {
    selenium = new DefaultSelenium("localhost", 4444, "*iexplore", "http://extjs.com");
    selenium.start();
  }
 
  public void testForm() {
    selenium.open("http://extjs.com/playpen/gxt/selenium/");
    pause(500);
    selenium.type("//input[@name='name']", "John");
    selenium.fireEvent("//input[@name='name']", "blur");
    assertTrue(selenium.isElementPresent("//input[@name='name' and contains(@class, 'x-form-invalid')]"));
    selenium.type("//input[@name='name']", "Darrell");
    selenium.fireEvent("//input[@name='name']", "blur");
    assertFalse(selenium.isElementPresent("//input[@name='name' and contains(@class, 'x-form-invalid')]"));
    selenium.type("//input[@name='email']", "darrell@foo.com");
    assertEquals("Darrell", selenium.getValue("//input[@name='name']"));
    assertEquals("darrell@foo.com", selenium.getValue("//input[@name='email']"));
    selenium.focus("//input[@name='company']");
    selenium.click("//input[@name='company']/following-sibling::img");
    assertEquals("43", selenium.getXpathCount("//div[@class='x-combo-list-item']"));
    selenium.click("//div[@id='Apple']");
    assertEquals("Apple Inc.", selenium.getValue("//input[@name='company']"));
    selenium.click("//input[@name='birthday']/following-sibling::img");
    selenium.click("//button[contains(text(), \"Today\")]");
    assertTrue(selenium.getValue("//input[@name='birthday']").matches("^[\\s\\S]*$"));
    selenium.check("//input[@value='Classical']");
    assertEquals("on", selenium.getValue("//input[@value='Classical']"));
    selenium.check("//input[@value='Blue']");
    assertEquals("on", selenium.getValue("//input[@value='Blue']"));
  }
 
  public void tearDown() {
    selenium.stop();
  }
 
}

Notice the use of “pause” after opening the application. This is needed to allow the GWT application to load. Other than that, the test code is a direct paste from the code generated in Selenium IDE. Notice that the test is using “*explorer” to execute the test. Firefox, Opera, Safari, Chrome are also supported. Keep in mind that the browser must be installed on the same maching where the Selnium server is running.

The new JUnit test can be executed just like any other JUnit test. The test can be executed with Eclipse.

Selenium Grid

Although it is not used in the tutorial, Selenium Grid is worth mentioning. From the website: “Based on the excellent Selenium web testing tool, Selenium Grid allows you to run multiple instances of Selenium Remote Control in parallel. Even better, it makes all these Selenium Remote Controls appear as a single one, so your tests do not have to worry about the actual infrastructure. Selenium Grid cuts down on the time required to run a Selenium test suite to a fraction of the time that a single instance of Selenium instance would take to run.”

Summary

The tutorial demonstrated how load and run tests within Selenium IDE. The test code was ported to Java where it was run using Selenium Remote Control in a JUnit. This tutorial demonstrated the major moving parts involved in Selenium tests. It is recommended to take a look at the Selenium documentation and tutorials for more information.

Many thanks go out to the Selenium Team. There is a slight learning curve getting familiar with the product but I found it straightforward. The time was well spent as it opens up a new approach to testing web applications.

This entry was posted on Monday, November 3rd, 2008 at 2:21 pm and is filed under Ext GWT, Ext JS, Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Cornelius Weiss
Posted on November 3rd, 2008 at 2:45 pm

Great Post,

you saved my x-mas time!

cu
Cornelius

Americo Savinon
Posted on November 3rd, 2008 at 6:24 pm

Good post. You are right.. there is a slight learning curve, but this is a really good start for automated UI testing using Ext Js + Selenium IDE.

MT22のメモ帳 » Ext JS - Blog ～ Selenium によるテストの照会
Posted on November 3rd, 2008 at 10:59 pm

[...] Testing Ext JS & Ext GWT Applications With Selenium [...]

Chris Khoo
Posted on November 3rd, 2008 at 11:46 pm

I’m sorry, but whatever happened to using good ol’ Javascript, especially if the webapp is primarily driven by one or a few HTML/JS pages - which ExtJS is very much designed for?

It’s not exactly the same in terms of interacting directly with the UI, but running the events themselves (click, change, etc.) in code and disabling modal dialog boxes (alert, confirm, etc.) for tests should be sufficient.

Then you eliminate a learning curve, don’t have to write your tests in another language, plus you can test on more browsers.

Ajaxian » Testing Ext Applications With Selenium
Posted on November 4th, 2008 at 8:15 am

[...] Meyer has written a detail article on testing Ext applications, both Ext JS and GXT versions: Both Ext JS and Ext GWT applications can benefit from Selenium [...]

Testing ExtJS Applications With Selenium | Neurosoftware web dev
Posted on November 4th, 2008 at 8:42 am

Ajax Girl » Blog Archive » Testing Ext Applications With Selenium
Posted on November 4th, 2008 at 9:23 am

matthew
Posted on November 4th, 2008 at 9:34 am

thank u r information

it very useful

u r blog Is very nice

Thomas Broyer
Posted on November 4th, 2008 at 10:25 am

You’re wrong about JUnit and GWT: you can actually run JUnit tests in “web mode” (that’s what the GWT team is using BTW, have a look at the Ant build files from GWT), either using RMI to a set of BrowserManagerServers (what’s called remote-web tests), “hybrid” mode (compiled app within the GWTShell/JUnitShell; what they call “local web” mode) or… Selenium RC !
There’s also a “manual” mode where you launch the browser(s) yourself and give it/them the JUnitShell URL, and an experimental “external browser” mode (you give the JUnitShell a list of executables that’ll be launched, passed the JUnitShell URL as a command-line argument).

This however doesn’t execise your *application*, as the compiled code is a set of GWTTestCases, not your real, production-ready application.

Well, GWT/JUnit integration is for unit-testing, while you’re proposing doing UI testing or integration testing, which is not the same thing.

Darrell Meyer
Posted on November 4th, 2008 at 11:54 am

Thomas, thanks for information and correction about GWT and JUnit (web mode). It makes sense that the tests run compiled test code. I am not suggesting that Selenium tests should replace any JUnit unit tests, rather to use both as they complement each other (unit test vs. integration).

Chinmay
Posted on November 4th, 2008 at 1:34 pm

Thanks for this blog post. This does cover the simplest of applications, but does not appear to cover the issue of locator stability when using Ext-JS in non-trivial applications. We’ve explored using IDs and CSS selectors when constructing our locators. Unfortunately, in Ext-JS it is not possible to uniquely identify UI objects using ID. Even minor changes in the UI will change the ID of the previous UI widgets. The order in which UI widgets get rendered also affects IDs and breaks the selenium tests.

There are similar issues when using CSS selectors to uniquely identify UI components, but this appears to be a promising approach. Does the Ext-JS team have any recommendations on how to address this issue?

Thanks in advance for your reply.

smarek
Posted on November 4th, 2008 at 3:59 pm

We started to use Selenium couple of months ago. Now I’m co-developing simple framework for testing web application. Especially for testing ExtJS application but not only.

Our testing framework uses Selenium and TestNG. 4 days ago the project was published on Google Code
KDEV-WTF
http://code.google.com/p/kdev-wtf/

To make manipulation easier the concept of adapters were used. So far the frame work is used for 3 projects and it seems to work fine (for our purposes)

If someone is interested please take a look at project page. The more information will be addad asap.

Javascript News » Blog Archive » Testing Ext Applications With Selenium
Posted on November 5th, 2008 at 6:49 am

Matthew
Posted on November 5th, 2008 at 2:35 pm

How do you set the name field of an ext component?

Testing Javascript User Interfaces with Selenium | ExtJS | Fritz Thomas
Posted on November 5th, 2008 at 5:11 pm

[...] Meyer wrote an interesting Article on ExtJS Blog how to test JavaScript generated User Interfaces with Selenium. Selenium is tool to [...]

Alexander
Posted on November 6th, 2008 at 8:35 pm

Refactoring is the key. If you wire all your tests with capture and play you will end up with an ugly and unwieldy suit of trash.

Starting selenium and stopping it at each test case is also lame.

You should separate your test cases from your test harness. Thus if your change from GWT to Yahoo tool kit or Dojo you do the change in only one place.

Not to mention that capture and play approach will not handle an asynchronous web application because the UI will change underneath your tests without your interaction. Consider a web application that display a grid that is updated by the server in real time with the new bids posted by other users on the system.

If you capture and play you will never be sure what row in the grid your data supposed to be in. So you have to write some code to do that for you.

With that in mind the approach for testing any Ajax app with selenium requires development of Test Harness, Declaring your locators in a class of its own, and writing some parsers that can grab the HTML from selenium and interrogate it OUTSIDE if the browser session because in the browser the DOM could be changed by the asynchronous process.

This sounds like extra work. But in the end you end up with a flexible and stable suite that is easy to maintain and write test cases against. As a bonus you can use it for load and stress test as well (See Selenium Grid)

All in all, good. But do not use capture and play. It generates UGLY and UNWIELDY code.

Mechanism of testing Ext JS Applications with Selenium | developersnippets.com
Posted on November 8th, 2008 at 11:53 am

[...] Ext JS has written a detailed brief description about the tool in the respective blog titled “Testing Ext JS & Ext GWT Applications With Selenium“. He explained about how we can create Selenium tests and execute them in a variety of ways. [...]

Vivekanand
Posted on November 8th, 2008 at 12:14 pm

This is awesome, and I would like to thank “Darrell Meyer” on briefing about the tool… really I will have a look at it

Thanks,
Vivek
[http://www.developersnippets.com]

David
Posted on November 9th, 2008 at 7:54 pm

Anybody got the dragAndDrop command working for extjs? It looks like the ‘drop’ is ignored, possibly due to a missing mouse over on the target zone.

Tony OHagan
Posted on November 10th, 2008 at 7:41 am

Currently ExtJS generates unique but meaningless id’s on DOM elements. By default, Selenium IDE uses these id’s when auto recording events on HTML control elements (buttons, fields etc). Add a new widget on the page and the test script recordings all break.

Some time ago I proposed that ExtJS support an additional config property on all widgets so that a meaningful prefix can be applied to all HTML control DOM elements that are generated by the widget. Generated ids would then be stable and meaningful so that recorded tested are readable and maintainable. Yes, you can painfully rewrite each recorded rule to use an xpath or CSS selector but this costs valuable time. It would be so much simpler and quicker to use Selenium if it’s recorded coded that uses ids *just worked*.

Онлайн PHP-редактор - PHPanywhere.com | Веб 2.0 вещи от Bubble Babe. Все для веб-мастера и блогера
Posted on November 10th, 2008 at 2:31 pm

[...] сервис, как онлайн PHP-редактор - PHPanywhere.com. Работает на Ext JS. Совершенно все нужные фунции присутствуют - [...]

陆阳
Posted on November 11th, 2008 at 4:18 am

很高，真的很高

chandan
Posted on November 11th, 2008 at 8:04 am

Hello,
Please help me to automate selenium testcases.I have to change Java script file prsent in selenimu.How to do that?If anuone has any idea please inform me.

Nitin Gautam
Posted on November 12th, 2008 at 9:35 pm

Really a helpful article. Thanks!!

Condor
Posted on November 14th, 2008 at 8:51 am

[QUOTE]Notice the use of “pause” after opening the application. This is needed to allow the GWT application to load.[/QUOTE]

I would strongly recommend using ‘waitForCondition’ instead of ‘pause’!

Gopalan
Posted on December 10th, 2008 at 3:11 am

Hi,

I am using firefox version 3 and started trying this exercise. But selenium IDE is recording the scripts differently than what is get posted.
The following are the recorded scripts
package com.example.tests;

import com.thoughtworks.selenium.*;
import java.util.regex.Pattern;

public class NewTest extends SeleneseTestCase {
public void setUp() throws Exception {
setUp(”http://change-this-to-the-site-you-are-testing/”, “*chrome”);
}
public void testNew() throws Exception {
selenium.open(”/playpen/gxt/selenium/”);
selenium.type(”x-auto-4″, “Gopalan”);
selenium.type(”x-auto-5″, “test@test.com”);
selenium.click(”//img[contains(@src,'http://extjs.com/playpen/gxt/selenium/images/default/shared/clear.gif')]“);
selenium.click(”//div[@id='x-auto-9']/img”);
selenium.click(”//div[@id='x-auto-29']/table[3]/tbody/tr[3]/td[4]“);
selenium.click(”//div[@id='x-auto-29']/table[3]/tbody/tr[4]/td[4]/a/span”);
selenium.click(”//div[@id='x-auto-10']/img”);
selenium.click(”//input[@value='Classical']“);
selenium.type(”x-auto-22″, “test”);
}
}

When i run this test in RC with *iehta(internet explorer(both v 6 & 7)), selenium is not recognising the objects.

The following error is thrown

om.thoughtworks.selenium.SeleniumException: ERROR: Element x-auto-4 not found
at com.thoughtworks.selenium.HttpCommandProcessor.doCommand(HttpCommandProcessor.java:73)
at com.thoughtworks.selenium.DefaultSelenium.type(DefaultSelenium.java:190)
at com.testscripts.GoogleTest.test7(GoogleTest.java:84)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at com.thoughtworks.selenium.SeleneseTestCase.runBare(SeleneseTestCase.java:71)
at com.intellij.rt.execution.junit.JUnitStarter.main(JUnitStarter.java:40)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at com.intellij.rt.execution.application.AppMain.main(AppMain.java:90)

Gopalan
Posted on December 12th, 2008 at 2:51 am

The above problem got solved by uninstalling firefox 3 and installing the version3. Now i am getting differnt issue.
I ran the test sucessfully in firefox using the Selenium RC. But when i change this to internet explorer, one of the save button is recognised differently. I Viewed DOM Object and it is giving different name(ie ext-gen-84 for IE and ext-gen-85 for firefox). At the code level, even the DOM object is not giving the ID or name for button, even at the code level it is given. The same is working fine for textfields and others.

Any workaround for this?

One more problem: My Tests are not running in normal mode for internet explorer. It is working only in proxyinjection mode.

Taxaw
Posted on December 14th, 2008 at 10:36 am

Smarek post is very interresting.
I think that a lot of people pass through it but should take a look at the framework proposed by him.
If you want to test in a professionnal way, his framework is a key.

”
smarek
Posted on November 4th, 2008 at 3:59 pm
We started to use Selenium couple of months ago. Now I’m co-developing simple framework for testing web application. Especially for testing ExtJS application but not only.

If someone is interested please take a look at project page. The more information will be addad asap.
“

alikos
Posted on December 26th, 2008 at 7:23 am

Точно Хорошую информацию трудно добыть. (А сделать с ней что-нибудь – ещё труднее)

söve
Posted on December 26th, 2008 at 7:41 am

thanks.

Богдан
Posted on January 5th, 2009 at 5:13 pm

Прикольно! Спасибо за материал.

Ext

Testing Ext JS & Ext GWT Applications With Selenium

November 3, 2008 by Darrell Meyer

Overview

Selenium IDE

Install Selenium IDE

Creating a new Selenium Test

Selenium Locators

Executing Tests with Selenium Remote Control (RC)

Download Selenium RC

Starting the Server

Creating a test in Java

Selenium Grid

Summary

31 Responses to “Testing Ext JS & Ext GWT Applications With Selenium”

Leave a Reply

Archives

Categories

Ext GWT

Support Subscriptions

Training

Community

Ext Solutions

Ext JS

Ext GWT

Help