UI自动化-我的UI上的元素有剩余ids，随着新UI元素的添加，ids会频繁变化。如何使用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。xpath : //*@id="ember1235“css选择器：#ember1235

当用户界面发生变化时，余烬id将从id="ember1235“更改为id="ember1265”。

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

Answer 1

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

首先要提到的是，Ember in可能不是在DOM中选择元素的最佳方法。正如您已经提到的，它们有时会发生变化，而且在selenium测试中并没有给您提供一个很好的语义选择，因此在回顾时，它可能看起来有点脱离上下文。

您可以尝试的一件事是将类传递给余烬-功率-选择组件(提供示例中使用的HTML的类)，并使用该类来选择元素，如下所示：

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

然后，您应该能够使用CSS选择器.my-fancy-class span来选择选定的值(因为组件在span中输出所选的值)。

我们只是在一个示例应用程序中尝试了这一点，但是它实际上没有工作--永远不要害怕，您也可以这样做，它应该与前面相同的选择器一起工作：

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

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

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

然后，可以通过以下选择器访问它：[data-test-my-fancy-select] span。这很好，有几个原因！首先，它将应用程序和测试的实现与样式分离开来，避免了我前面描述的问题。该方法的第二个好处是，使用@Gokul在注释中建议的余烬-测试-选择器包，您可以在您的开发和测试环境中使用这些data-test-选择器，但是它们将自动从生产构建中删除。这对于保持DOM在生产中的清洁是很好的，但也可以根据应用程序的大小，在聚合模板中为您节省合理的大小。

我知道您说您正在使用selenium进行测试，但也值得一提的是，如果您使用的是内置Ember测试系统，您将能够使用外接程序可能提供的一些测试帮助。成员-power-select是提供特定测试帮助的插件之一，您可以在它们的文档：https://ember-power-select.com/docs/test-helpers中了解更多有关它的内容。

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

这个问题作为“我可以问一个问题”第三季第一集的一部分被回答了。如果你想看我们详细讨论这个答案，你可以在这里查看视频：https://www.youtube.com/watch?v=1DAJXUucnQU。