UI 自动化 - 我的 UI 上的元素有 ember id，随着新的 UI 元素的添加，它们经常变化。如何使用id进行自动化？

Question

下拉元素的 HTML 示例：

    <div aria-owns="ember-basic-dropdown-content-ember1234" tabindex="0" data-ebd-id="ember1234-trigger" role="button" id="ember1235" class="ember-power-select-trigger ember-basic-dropdown-trigger ember-view">  <!---->
    <span class="ember-power-select-status-icon"></span>
    </div>

xpath 和 CSS 选择器也包含相同的 ember id。 xpath : //*[@id="ember1235"] css 选择器：#ember1235

当 UI 发生变化时，ember id 将从 id="ember1235" 变为 id="ember1265"。

我正在使用 id 来定位元素。但是每次它改变我都需要修改代码。 Ember JS UI 元素还有其他属性吗？

Answer 1

你的问题有很多要讨论的，但希望我们能为你提供一个好的答案@PriyaK

首先要提到的是 Ember ID 可能不是 select DOM 中元素的最佳方法。正如您已经提到的，它们可能会不时发生变化，而且在您的 selenium 测试中它并没有真正给您 select 一个很好的语义，所以回头看时它可能看起来有点断章取意。

您可以尝试的一件事是将 class 传递给 ember-power-select 组件（提供您在示例中使用的 HTML 的组件）并使用它select 元素，类似于：

<PowerSelect
  @class="my-fancy-class"
  as |name|
>
  {{name}}
</PowerSelect>

那么您应该能够 select 使用 CSS select 或 .my-fancy-class span 编辑的 select 值（因为组件输出 select跨度内的值）

我们只是在一个示例应用程序中尝试了这个，但它实际上并没有起作用别担心，你也可以做这样的事情，它应该可以像以前一样工作select或：

<div class="my-fancy-class">
  <PowerSelect as |name|>
    {{name}}
  </PowerSelect>
</div>

这很好，但是在测试中使用 classes 作为 selectors 也存在一些问题。可能会出现的一个问题示例是，如果您进行了样式重构并更改或删除了元素上的某些 classes，您的测试可能会突然停止工作。在 Ember 社区中流行的一种技术是在 DOM 节点上使用 data-test- 属性，如下所示：

<div data-test-my-fancy-select>
  <PowerSelect
    @class="my-fancy-class"
    as |name|
  >
    {{name}}
  </PowerSelect>
</div>

然后可以通过以下 select 或：[data-test-my-fancy-select] span 访问。这很棒有几个原因！首先，它将应用程序的实现和测试与样式分开，避免了我上面描述的问题。这种方法的第二个好处是，使用@Gokul 在评论中建议的 ember-test-selectors 包，您可以在开发和测试环境中使用这些 data-test- select 或，但它们将自动从您的生产版本中删除。这对于让您的 DOM 在生产环境中保持清洁非常有用，而且根据您的应用程序的大小，总体上可以为您节省模板中合理的大小。

我知道你说你正在使用 selenium 进行测试，但同样值得一提的是，如果你正在使用 built-in Ember testing system you will be able to make use of some testing helpers that addons may provide you. ember-power-select is one of those addons that provides specific testing helpers and you can read more about it in their documentation: https://ember-power-select.com/docs/test-helpers

我希望这能回答您的任何问题！

此问题已作为 "May I Ask a Question" 第 3 季第 1 集的一部分得到解答。如果您希望看到我们完整讨论此答案，您可以在此处观看视频：https://www.youtube.com/watch?v=1DAJXUucnQU

UI 自动化 - 我的 UI 上的元素有 ember id，随着新的 UI 元素的添加，它们经常变化。如何使用id进行自动化？

UI Automation - Elements on my UI have ember ids , which change frequently with addition of new UI elements. How to use the id for automation?

selenium

ui-automation

ember.js