如何使用动态ID查找ExtJS元素

Question

我正在使用Selenium，需要获取控件的ID，但是ID是动态的，我无法获取。

<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是动态的，并且其他按钮的开头相同button-###+btnWrap。

Answer 1

我已经多次回答类似的问题，您可能想看看。

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')。

• 利用按钮的文本。

例如，这个
ExtJS示例：您可以使用XPath .//span[contains(@class, 'x-btn-inner') and text()='Send']。但是，此方法不适用于CSS选择器或多语言应用程序。

• 最好的测试方法是在源代码中创建有意义的类名。如果您无权访问源代码，请与您的经理联系，针对ExtJS应用程序使用Selenium应该确实是开发人员的工作。ExtJS提供cls并提供tdCls了自定义类名，因此您可以添加cls:'testing-btn-foo'源代码，而Selenium可以通过获取它(:css, '.x-panel .testing-btn-foo')。

注意： sircapsalot的答案不适用于ExtJS，因为大多数按钮都具有CSS Selector
em[id^='button-'][id$='-btnWrap']，（但不能怪他，因为这是ExtJS特有的，有些人可能并不熟悉）。