Javascript 使用量角器测试AngularJS应用程序-如何在不使用ID的情况下获取HTML元素？

我最近的任务是为我的公司开发的AngularJS应用程序实现一些自动化测试。在对可用的不同测试框架进行了一些研究之后，我决定使用它，因为它似乎提供了我们需要的所有功能，并且似乎有很好的文档记录和维护

当我开始设计和编写测试时，我注意到代码中的大多数HTML元素都没有ID属性——因此我开始为测试中使用的各种元素分配ID属性，以便我可以使用

element（by.ID（'abc'））等函数访问它们

将它们分配给变量，以便在测试脚本中使用

然而，我刚刚被告知，不提供HTML元素ID属性是一种深思熟虑的设计选择，目的是为了使源代码更容易压缩以分发给我们的客户。所以这意味着我现在需要重新编写我的测试，这样他们就不再使用ID属性来获取元素，但我不确定如何做到这一点

当我在浏览器中检查这些菜单项时，它显示以下HTML结构：

<ul id="nav" class="nav" data-slim-scroll ... >
    <li data-ng-mouseenter="setMenuTop($event)" ...
        <a href="#/pages" id="pagesMenuBtn" ... >
            ...
        <a href="#/alarms" id="alarmsMenuBtn" ... >
            ...
        ...
    </li>
    ...
</ul>

我现在有：

describe('myApp', function() {
    var menuItems = $(".slimScrollDiv").$(".nav").$$("li");
    var alarmsMenuBtn = menuItems.get(1).$("a");
    var chartsMenuBtn = menuItems.get(2).$("a");

但是，当我使用相同的测试运行此程序时，我的测试现在失败，给我以下消息：

失败： 1） 应用程序应导航到报警页面 信息： 错误：超时-在jasmine.DEFAULT\u Timeout\u INTERVAL指定的超时内未调用异步回调。 堆栈： 错误：超时-在jasmine.DEFAULT\u Timeout\u INTERVAL指定的超时内未调用异步回调。 在ontimeout（timers.js:386:11） 在tryOnTimeout（timers.js:250:5） 在Timer.listOnTimeout（timers.js:214:5） 信息： 失败：元素不可见 （会话信息：chrome=61.0.3163.100） （驱动程序信息：chromedriver=2.33.506120（E3E534376286C0BC2D2DC9AA4915BA81D9023F），平台=Windows NT 10.0.15063 x8664） 堆栈：

以及：

2） 应用程序应导航到图表页面 信息： 失败：元素不可见 （会话信息：chrome=61.0.3163.100） （驱动程序信息：chromedriver=2.33.506120（E3E534376286C0BC2D2DC9AA4915BA81D9023F），平台=Windows NT 10.0.15063 x8664）

这些元素的HTML为：

<li><a href="#/alarms" id="alarmsMenuBtn" target="_self"><i class="ti-alert"></i><span data-i18n="Alarms"></span></a></li>
<li><a href="#/charts" id="chartsMenuBtn" target="_self"><i class="ti-bar-chart"></i><span data-i18n="Charts"></span></a></li>

因此，我的问题是，如何使用ID属性以外的内容访问这些（或任何其他）HTML元素以获取它们？

提供了一个完整的定位器列表，除了ID之外，您还可以使用这些定位器来定位DOM元素。该文档还提供了示例代码，以演示如何在实践中实现每个定位器

以下是从量角器版本5.2.0起的完整列表：

量角器定位器。这些提供了通过绑定、模型等在角度应用程序中查找元素的方法

-将定位器添加到此量角器实例

-通过文本绑定查找元素

-通过精确绑定查找元素

-通过ng模型表达式查找元素

-按文本查找按钮

-通过部分文本查找按钮

-查找ng repeat中的元素

-通过精确的中继器查找元素

-通过CSS查找包含特定字符串的元素

-通过ng选项表达式查找元素

-在阴影DOM中通过css选择器查找元素

扩展webdriver.By

-查找具有特定类名的元素

-使用CSS选择器查找元素

-根据元素的ID定位元素

-查找其可见文本与给定字符串匹配的链接元素

-通过计算JavaScript表达式（可以是函数或字符串）来定位元素

-查找名称属性具有给定值的元素

-查找其可见文本包含给定子字符串的链接元素

-查找具有给定标记名的元素

-查找与XPath选择器匹配的元素

---

后面跟着id是个坏主意。。请使用

数据测试挂钩

。。。你们已经有了关于量角器的文档。

---

首先，代码中可能有语法错误：

browser.actions（）.mouseMove（chartsMenuBtn.perform（）（
mouse
！）。这就是说，要么使用.xpath的
by
（一些浏览器，如chrome，支持通过右键单击元素来获取查询选择器），要么只是在量角器中更深入一些。我可以在那里继续一段时间，但有两个伟大的来源帮助了我：和。在任何情况下，元素是否意味着某种程度上是静态的，还是意味着随着时间的推移而改变？关于chrome->上的xpath（示例）。在本例中，结果是
/*[@id=“comment-81014907”]/td[2]/div/span[1]
（但这在本例中是唯一的）。关于元素不可见，请检查以下内容：。此外，我建议您在一些特定的环境中运行量角器，yeoman上有一些很棒的初学者，可以为您提供初学者工具包，并在VisualStudio代码中进行调试。有时候，这很有帮助。抱歉，这是一个复制粘贴错误……您遇到的问题是元素的可见性。可见性意味着不仅显示图元，而且其高度和宽度都大于0。是否有任何菜单项显示在DOM中但不可见？否，所有菜单项都是可视的
<li><a href="#/alarms" id="alarmsMenuBtn" target="_self"><i class="ti-alert"></i><span data-i18n="Alarms"></span></a></li>
<li><a href="#/charts" id="chartsMenuBtn" target="_self"><i class="ti-bar-chart"></i><span data-i18n="Charts"></span></a></li>