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:

14 comments:

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.

Cheers

Guogang Hu said...

You are welcome. Glad it helped someone.

Bilgevs said...

Hello Guogang, Could you provide a simple code sample that is working? I'm trying to do same thing using nunit & C#. For instance http://examples.ext.net site. I tried to write "test" in Form Field Note Overview simple note inputbox but I couldn't manage to. Thanks with best regards. bilgevscodesearch@gmail.com

Guogang Hu said...

Bilgesv, thank you for reading my blog. I finally go around to put together the core code segments into a complete project. It's on github: https://github.com/huguogang/SJTXE

Anonymous said...

how can i retrieve text on the text field, i see that you have a method to send text but not a ,method to retrieve the text. When i use get text, it is getting me the text of the label

gary said...

How can I see the full original post? For me, the last line of the original post is:

Ok, some sample code might explain the idea better:

Guogang Hu said...

gary, you can try this link to see the code snippet: https://gist.github.com/huguogang/6723159#file-extcomponentquery-java

Unknown said...

Hello sir,
Nice post
can anyone help me what configurations or any other things are required in eclipse to run this code and this comple project??

Unknown said...
This comment has been removed by the author.
Unknown said...

Hello Guogang Hu ,
Can u please provide Full example of how to find component query and how to locate Extjs component .
Thanks

Unknown said...

Hi Guogang Hu,

As of my understanding you are using name of the component to get the components (executing javascript from java using javascript executor ). instead of running javascript from java to get the id of the component can we use By.name() which is already provided by selenium webdriver.

Thanks.

Guogang Hu said...

At time of my writing, ExtJS may scramble the id for generated DOM. So there is no way to reliable predict the name of component in Java code.

Notice, this is ExtJS specific test setup.