如何使用动态ID查找ExtJS元素 [英] How to find ExtJS elements with dynamic id
问题描述
我正在与Selenium合作，需要获取控件的ID，但ID是动态的，我无法获取。
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>
数字1122是动态的，还有其他按钮具有相同的开始按钮 - ### + btnWrap 。
The number 1122 is dynamic and there are other buttons that has same beginning button-###+btnWrap.
推荐答案
我已经回答了很多次的问题，你可能想看看。
I have been answering questions like for many times, you might want to have a look.
ExtJS页面很难测试，特别是查找元素。
ExtJS pages are hard to test, especially on finding elements.
这里是我认为有用的一些提示：
Here are some of the tips I consider useful:
- 不要使用动态生成的ID。像
（：id，'button-1122-btnEl'） -
不要使用绝对/无意义的XPath，像
// div [4] / div [3] / div [4] / div / div / div / em / button
利用有意义的自动生成的部分ids和类名。 （所以你需要在你的例子中显示更多的HTML，我可以提出建议。）
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.)
例如，此 ExtJS网格示例： （：css，'.x-grid-view .x-grid-table'）将会很方便。如果有多个网格，请尝试对它们进行索引或找到可识别的祖先，例如（：css，'＃something-interesting .x-grid-view .x-grid-table'）。
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').
利用按钮的文字。
例如，这个 ExtJS示例：您可以使用XPath 。// span [contains（@class，'x-btn-inner'）和text（）='Send'] 。但是，这种方法不适用于CSS选择器或多语言应用程序。
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.
最好的测试方法是在源代码中创建有意义的类名。如果您无法访问源代码，请与您的经理联系，使用Selenium对ExtJS应用程序应该是开发人员的工作。 ExtJS为自定义类名提供 cls 和 tdCls ，因此您可以添加 cls：'testing您的源代码中的-btn-foo'，Selenium可以通过（：css，'.x-panel .testing-btn-foo'）获取它。
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
注意： sircapsalot的答案对于ExtJS不起作用，因为大多数按钮都有CSS选择器 em [id ^ ='button - '] [id $ =' - btnWrap'] ，（但不能怪他，因为这是相当ExtJS具体的，有些人可能不会很熟悉with）。
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).
这篇关于如何使用动态ID查找ExtJS元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
