Search code examples
domextjsautomationwebautomation

Tracing DOM element id back to its ExtJs component

We are develpoing a web-based automation solution for a web application that is built using ExtJs.

Currently i am testing various different object identification techniques that identify web elements in the best way.

We'd like to use the IE developer tools (F12) to highlight and select DOM objects on the page, and (somehow) get their corresponding ExtJs component (along with its corresponding properties, such as itemId).

Is this possible to do through code or through some other technique?

Solution

  • I am unfamiliar with IE Dev tools for such things, however I can attempt to answer targeting specific components and their elements.

    You can target Ext components via several ways:

    1. Ext.ComponentQuery.query(CQselector) method (see docs for examples)
    2. Ext.getCmp(componentID) if you know component ID
    3. up() and down() methods from any container/component. these also take CQselector expressions

    Any of these methods are accessible from the page since Ext library is loaded. In browsers like FF and Chrome you can execute these methods directly from the console. I am guessing similarly they should be available in IE Dev tools.

    Once you have reference to the Ext component you can get HTML elements through .dom or .el or similar properties. Or you could use Dom query directly.