ember.js UI自动化-我的UI上的元素都有成员id,随着新的UI元素的添加,这些id会经常改变,如何使用id进行自动化?

vawmfj5a  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(140)

下拉式项目的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选择器也包含相同的成员ID。xpath://*[@id=“ember 1235”] CSS选择器:编号:1235
当UI发生更改时,成员ID将从id=“ember 1235”更改为id=“ember 1265”。
我使用id来定位元素。但是每次它改变的时候我都需要修改代码。有没有其他的属性我可以用在Ember JS UI元素上?

xtupzzrd

xtupzzrd1#

您的问题中有很多内容需要讨论,但希望我们能在PriyaK为您提供一个好的答案
首先要提到的是Ember ID可能不是在DOM中选择元素的最佳方法。正如您已经提到的,它们可能会不时地发生变化,而且它并没有真正为您提供一个很好的语义选择,因此当回顾时,它可能会显得有点脱离上下文。
您可以尝试将一个类传递给ember-power-select组件(提供示例中使用的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在注解中建议的ember-test-selectors包,您可以在您的开发和测试环境中使用这些data-test-选择器,但是它们将自动从您的生产构建中删除。这对于在生产中保持DOM的整洁非常有用,而且根据应用程序的大小,还可以在聚合模板中为您节省合理的大小。
我知道你说你正在使用selenium进行测试,但同样值得一提的是,如果你使用built-in Ember testing system,你将能够利用一些插件可能提供给你的测试助手。ember-power-select是提供特定测试助手的插件之一,你可以在他们的文档中阅读更多关于它的信息:https://ember-power-select.com/docs/test-helpers
我希望这能回答你的任何问题!
这个问题是作为“我可以问一个问题吗”第三季第一集的一部分回答的。如果你想看到我们完整地讨论这个问题,你可以在这里查看视频:https://www.youtube.com/watch?v=1DAJXUucnQU

相关问题