c# - How to find ExtJS elements with dynamic id

Question

I am working with Selenium and need to get the ID of a control but the ID is dynamic and I can't get it.

<em id="button-1122-btnWrap">
<button id="button-1122-btnEl" class="x-btn-center" autocomplete="off" role="button" disabled="disabled" hidefocus="true" type="button" style="width: 21px; height: 21px;">
         <span id="button-1122-btnInnerEl" class="x-btn-inner" style="width: 21px; height: 21px; line-height: 21px;"> </span>
         <span id="button-1122-btnIconEl" class="x-btn-icon icon-save-invoice"></span>
</button>

The number 1122 is dynamic and there are other buttons that has same beginning button-###+btnWrap.

Answer 1

I have been answering questions like for many times, you might want to have a look.

ExtJS pages are hard to test, especially on finding elements.

Here are some of the tips I consider useful:

• Don't ever use dynamically generated IDs. like (:id, 'button-1122-btnEl')

• Don't ever use absolute/meaningless XPath, like //div[4]/div[3]/div[4]/div/div/div/em/button

• Take advantage of meaningful auto-generated partial ids and class names. (So you need show more HTML in your example, as I can make suggestions.)

  For example, this ExtJS grid example: (:css, '.x-grid-view .x-grid-table') would be handy. If there are multiple of grids, try index them or locate the identifiable ancestor, like (:css, '#something-meaningful .x-grid-view .x-grid-table').

• Take advantage of button's text.

  For example, this ExtJS example: you can use XPath .//span[contains(@class, 'x-btn-inner') and text()='Send']. However, this method is not suitable for CSS Selector or multi-language applications.

• The best way to test is to create meaningful class names in the source code. If you don't have the access to the source code, please talk to your manager, using Selenium against ExtJS application should really be a developer's job. ExtJS provides cls and tdCls for custom class names, so you can add cls:'testing-btn-foo' in your source code, and Selenium can get it by (:css, '.x-panel .testing-btn-foo').

Other answers I made on this topic:

• How to find unique selectors for elements on pages with ExtJS for use with Selenium?
• How to click on elements in ExtJS using Selenium?
• Using class names in Watir
• how to click on checkboxes on a pop-up window which doesn't have name, label

Note: sircapsalot's answer doesn't work for ExtJS, because most of buttons have CSS Selector em[id^='button-'][id$='-btnWrap'], (but can't blame him, as this is quite ExtJS specific, some people might not be familiar with).