下拉式项目的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元素上?
1条答案
按热度按时间xtupzzrd1#
您的问题中有很多内容需要讨论,但希望我们能在PriyaK为您提供一个好的答案
首先要提到的是Ember ID可能不是在DOM中选择元素的最佳方法。正如您已经提到的,它们可能会不时地发生变化,而且它并没有真正为您提供一个很好的语义选择,因此当回顾时,它可能会显得有点脱离上下文。
您可以尝试将一个类传递给ember-power-select组件(提供示例中使用的HTML的组件),并使用它来选择元素,如下所示:
然后您应该能够使用CSS选择器
.my-fancy-class span
来选择选定的值(因为组件在span中输出选定的值)我们刚刚在一个示例应用程序中尝试了这个方法,但实际上并没有成功🤔。别担心,你也可以这样做,它应该和以前一样使用相同的选择器:
这很好,但是在测试中使用类作为选择器也有一些问题。一个可能出现的问题是,如果你进行了样式重构,并且更改或删除了元素上的一些类,那么你的测试可能会突然停止工作。在Ember社区中流行的一种技术是在DOM节点上使用
data-test-
属性,如下所示:然后可以通过以下选择器访问该文件:
[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