Take the 2-minute tour ×
Software Quality Assurance & Testing Stack Exchange is a question and answer site for software quality control experts, automation engineers, and software testers. It's 100% free, no registration required.

Our Web app is using ExtJS framework for rendering UI.

However, ExtJS-rendered UI is hard to test automatically because:

  • For most clickable elements, ExtJS uses generated ids like "ext-gen-345" which are likely to change on a subsequent visit to the same page.
  • Some elements require more than simple mouse/keyboard interactions due to the complex rendering carried out by ExtJS, e.g., JavaScript calls to ExtJS script must be done.
  • Testing complex components like data grids/tables requires cryptic and unreliable CSS locators; for instance there is no easy way to access "zip code" cell of a row for user with X in column "name".

Is there a open source Java framework that simplifies that?

Possible solution: I started to design a set of classes wrapped around WebElement instances from Selenium 2, e.g., I would have:

class ExtJsGrid {

    ExtJsGrid(WebElement element) { ... }

    List<String> getColumnNames() { ... }
    List<ExtJsRow> getRows()      { ... }
    void selectRow(int n)         { ... }
    ...
}

I'm pretty sure someone else have already solved that. I have even seen InfoStretch released a library that provides such wrappers for a whole hierarchy of ExtJS components. Unfortunately, the library is based on Selenium 1 and I cannot modify that, as it is not open source: they provide only compiled classes.

share|improve this question

1 Answer 1

You want to use component query. From Webdriver you can execute arbitrary javascript - that means you can use ComponentQuery to get things from a high level and then drill down with (maybe) xpath to get more specific things.

This article helped me figure it out.

for example you'd probably use component query to get hold of a control and a button in that control (using itemId which you can set and are probably already using)

Ext.ComponentQuery.query('SomeNameSpace_MyControl_ItsName #saveButton');

from there you'd then use the click on the webelement retrieved.

For things like text boxes you'd follow up with some xpath:

Ext.ComponentQuery.query('SomeNameSpace_MyControl_ItsName #saveNameField');

then:

saveNameElement.FindElement(By.Xpath("/input");

Im sort of paraphrasing there. Let me know if it doesn't make sense. Its also worth noting that you shouldn't actually try and haul back the objects themselves from the javascript execution - it doesnt work as those calls are pretty limited. You should just return the Id and then use a Driver.FindElement(By.Id(id)); call to get your hands on the actual WebElement it represents.

I ended up having to write quite a lot of code as a mini framework around selenium to get going with this but that should get you started.

I think thats the nice thing about selenium though - it gives you the bare elements to work with and then lets you build your own stuff around that.

You'll also want to architect things as that guy suggest by putting things into 'pages'

share|improve this answer
    
personally I've actually found client side javascript acceptance tests are nicer to work with as they are much faster to execute but thats a whole other story (and actually involves using selenium anyway) see my post here –  Jonny Leeds Sep 11 at 9:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.