The intention of the component helpers is to provide a standard way of accessing HTML and HTML5 components (specifically ExtJS), in a way that understandable, easy to write, easy to maintain, easy to change, and not prone to failing whenever a minor change is made to the application which is being tested.

The preferred method for component look-up is XPath, which is a way of querying the HTML DOM for something matching the given description. For example “Give me the button that has the text Click Me! in it.”

The resulting XPath would look be //button[contains(.,’Click Me!’)]

The issue with some of the more complex components is that the HTML from which they are rendered is generated, which makes component identification sometimes involve complicated XPath. It is for this reason XPathUtils provides a common way of asking the question:

“I want thing thing identified in this way.”

For example:

“I want the button by the text of Click Me”

For more complicated scenarios though, there can be cases where two things exist on the same page that also look the same, for example two buttons with the text “OK”. It is for this reason we need to sometimes ask the question:

“I want thing thing identified in this way, that is inside this other thing.

For example:

“I want the button by the text of Click Me, that is inside the mainBody div”

XPathUtils also handles these cases, and in this case would generate the following XPath for you:

//div[@id=’mainBody’]/descendant::button[contains(.,’Click Me’)]

More Information

Locating General HTML Components

Locating Ext JS 4 Components

Locating Ext JS 5 Components

Locating Sencha Touch 2 Components

Testing Enterprise Applications with Selenium and HTML5 Robot (sencha.com)