Thursday, September 26, 2013

Locate ExtJS Component (Selenium Web Driver + JUnit + ExtJS)

Selenium WebDriver offers many ways to find an element. You can find it by class, name, partial link text, xpath, css selector, ... However, when it comes to ExtJS component, none of them works very well, because ExtJS page elements tend to be generated dynamically, their xpath/id/... are all moving target. Trying to figure out a repeatable way to locate any of them can be very time consuming and the result is fragile.

Fortunately, as all ExtJS developers should know, Ext.ComponentQuery provides a powerful and very reliable way to find your component. So, the idea is to use Ext ComponentQuery to find the component of interest, then pass it along to WebDriver. Along this line, below is my approach to locate components:
  • PageObject owns all the top level components, and specify a ComponentQuery that can uniquely identify them;
  • All views or components of interest have their hierarchy represented in the test code, and at each level, they should have a ComponentQuery that can unique identify each of them within the container;
  • When it's time to get the element, we should traverse up from element to page, rebuild the fully qualified component query

Ok, some sample code might explain the idea better:


Anonymous said...

what does 'cmp' mean, could you show the complete java code? Thanks!

Guogang Hu said...

The "complete code" has to be built against a real web page. 'cmp' is a PageObject. And I assume their is a "parent" member which points to its container's PageObject. Also there should be a "componentQuery" member which should be a ExtJS component query string that can uniquely identify this component in its container.

Anonymous said...

Excellent article + blog. Thanks a lot - there are a lot of articles on other websites that only cover the topic of testing extjs with selenium superficially. This was the missing piece of the puzzle for me.


Guogang Hu said...

You are welcome. Glad it helped someone.