1

How can I test extjs application when there are pregerated ids for components or compoent parts like in a grid.

I can add ids to each component but what if I miss one or more, and the application is big and complex?

Is there a function or some module in ExtJS/Siesta which allows you to locate components/elements in the application without beign dependent on predefined ids for each component

Vlad
  • 2,739
  • 7
  • 49
  • 100
  • you can explicitly set ID's for an element and use Ext.get or Ext.getCmp – Freddie Dec 05 '12 at 16:24
  • 1
    the general consensus seems to be: be caredul with cmp.id, use itemId and 'this.down('#' + theItemId);' (or 'this.up()') instead. Here we're talking ExtJS.ComponentQuery which gives you other things to play with such as class names, xtypes and css classes a la jQuery selectors – jenson-button-event Dec 05 '12 at 18:13

3 Answers3

6

First of all be very careful using IDs on the components. I have seen my fair share of problems with them.

Second, ExtJS provides several ways of targeting Components and Elements. Don't mix the two.

For Components:

plus various find.. methods

For Elements:

more on DOM Query http://docs.sencha.com/core/manual/content/domquery.html

Community
  • 1
  • 1
dbrin
  • 15,525
  • 4
  • 56
  • 83
1

With Siesta you have loads of options when targeting a place to click etc:

  • Dom node id (same as Ext Component id)
  • Any component query
  • Any CSS query
  • A coordinate
  • Real Ext Component JS instance
  • Real DOM node instance
  • Composite Query (combination of Component Query and CSS query, '.x-grid => .x-grid-cell'
  • A function, returning any of the above.

More info in my slides here: https://speakerdeck.com/mats/testing-sencha-touch

Mats Bryntse
  • 564
  • 3
  • 12
1

You may want to look at the automated functional GUI testing tool RIATest.

RIATest knows how to ignore ids dynamically generated by ExtJS, yet if you manually assign ids to the components the tool will use them for identification (see e.g. #tree2 in the sample below).

The tests in RIATest operate in terms of ExtJS UI widgets.

Examples of RIATest scripts that work with ExtJS widgets:

The following clicks on an ExtJS button with label "Next Page":

ExtButton("Next Page")=>click();

And the following does drag-n-drop of a row from one ExtJS tree to another:

ExtRow("Controller.js")=>dragAndDropTo(
    ExtTreePanel("#tree2")->ExtRow("Custom Ext JS"));

And this collapses the header of an ExtJS box:

ExtBox("Feeds")->ExtHeader("FeedsВ")->ExtCollapser()=>click();

(All sample code above is from real test scripts that run on ExtJS sample applications).

(Disclaimer: I am a RIATest team member).

TN.
  • 611
  • 1
  • 4
  • 9