如何查找具有动态 ID 的 ExtJS 元素 [英] How to find ExtJS elements with dynamic id
问题描述
我正在使用 Selenium，需要获取控件的 ID，但 ID 是动态的，我无法获取.
<button id="button-1122-btnEl" class="x-btn-center" autocomplete="off" role="button" disabled="disabled" hidefocus="true" type="button" style="width: 21px; 高度: 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>数字1122是动态的，还有其他按钮的开头相同button-###+btnWrap.
我已经回答了很多次这样的问题，你可能想看看.
ExtJS 页面很难测试，尤其是在查找元素方面.
以下是我认为有用的一些提示:
- 永远不要使用动态生成的 ID.像
(:id, 'button-1122-btnEl') 永远不要使用绝对/无意义的XPath，比如
//div[4]/div[3]/div[4]/div/div/div/em/button利用有意义的自动生成的部分 ID 和类名.(因此您需要在示例中显示更多 HTML，因为我可以提出建议.)
例如，这个 ExtJS 网格示例:
(:css, '.x-grid-view .x-grid-table')会很方便.如果有多个网格，请尝试索引它们或定位可识别的祖先，例如(:css, '#something-meaningful .x-grid-view .x-grid-table').p>利用按钮的文本.
例如，this ExtJS 示例:您可以使用 XPath
.//span[contains(@class, 'x-btn-inner') 和 text()='Send'].但是，这种方法不适用于 CSS Selector 或多语言应用程序.最好的测试方法是在源代码中创建有意义的类名.如果您无权访问源代码，请与您的经理交谈，对 ExtJS 应用程序使用 Selenium 确实应该是开发人员的工作.ExtJS 为自定义类名提供了
cls和tdCls，所以你可以在你的源代码中添加cls:'testing-btn-foo'，并且Selenium 可以通过(:css, '.x-panel .testing-btn-foo')获取.
我对这个主题的其他回答:
- 如何为带有 ExtJS 的页面上的元素找到唯一的选择器以与 Selenium 一起使用?
- 如何使用 Selenium 在 ExtJS 中点击元素?
- 在 Watir 中使用类名
- 如何在没有名称、标签的弹出窗口中点击复选框
注意: sircapsalot 的答案不适用于 ExtJS，因为大多数按钮都有 CSS 选择器 em[id^='button-'][id$='-btnWrap']，(但不能怪他，因为这是 ExtJS 特有的，有些人可能不熟悉).
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.
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/buttonTake 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
clsandtdClsfor custom class names, so you can addcls:'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).
这篇关于如何查找具有动态 ID 的 ExtJS 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
