Automation testing of UI is essential in any big project, but it is difficult to achieve this for user interfaces built with ExtJS. Selenium records user actions, by clicks on elements, and memorizes the ids of the selected elements. Yet since ExtJS auto-generates ids which are not guaranteed to stay the same, you cannot rely on this. The same problem is when you simply add a small change (add a label, etc), so the generation (if you relied on it to be the same) will totally change and the automated tests will be ruined.
Instead, Selenium tests for ExtJS should rely on CSS selectors. For every button, grid, label, tab or any significant UI element, I simply chose to use the cls attribute and specify a CSS class.
new Ext.Button({
text: 'Ok',
cls: 'seleniumOkButton', //can have more classes, separated by space
scope: this,
handler: function(){ ... }
})
This is how a basic button that is used in automation testing looks like. And I use the following XPath selector in Selenium:
//table[contains(@class,'seleniumOkButton')]
Happy automated testing!
[...] ExtJS? According to Testing ExtJS with Selenium Automating UI Tests the trick is to use CSS as your location [...]
[...] useful tip that I found was by radu that solved the issues caused by auto-generated id by ExtJS. Selenium tests for ExtJS should rely [...]
Why use a XPATH selector?
With Selenium css-Selectors it’s as easy as this:
css=.seleniumOkButton
Or, equivalent to your above XPATH expression:
css=table .seleniumOkButton
Both should work, but the first expression is probably the mose convenient and sufficient one.
Testing ExtJS with Selenium – Automating UI Tests…
Automation testing of UI is essential in any big project, but it is difficult to achieve this for user interfaces built with ExtJS. Selenium records user actions, by clicks on elements, and memorizes the ids of the selected elements. Yet since ExtJS au…
Yes…. why can’t we use css-Selectors as Dirk said