如何查找具有动态 id 的 ExtJS 元素

本文关键字：id 动态 ExtJS 元素 何查找 查找 | 更新日期: 2023-09-27 18:36:34

>我正在使用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 .

如何查找具有动态 id 的 ExtJS 元素

我已经回答了很多次这样的问题，你可能想看看。

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选择器或多语言应用程序。

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

我就这个话题做了其他回答：

  • 如何在带有 ExtJS 的页面上找到与 Selenium 一起使用的元素的唯一选择器？
  • 如何使用Selenium点击ExtJS中的元素？
  • 在瓦蒂尔中使用类名
  • 如何单击没有名称，标签的弹出窗口上的复选框

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

Simple with CSS selector。

您的选择器将是，

em[id^='button-'][id$='-btnWrap']

或者如果你想点击那里的按钮——

em[id^='button-'][id$='-btnWrap'] > button
相关文章：