Angularjs 角度JS-使用量角器测试：当元素没有标记名时，如何获取元素？

我正在为我的AngularJS应用程序开发一个测试套件，用作我的测试框架

应用程序的菜单显示在网站所有页面的固定位置上-当用户将光标悬停在菜单上的任何按钮上时，光标将变为指针，以指示可以单击该按钮。菜单中的每个按钮代表应用程序的一个特定页面-如果当用户将光标悬停在该页面的菜单按钮上时，有属于该页面的子页面，则会显示一个子菜单，其中每个子页面都有文本按钮

我目前正在进行一项测试，该测试将测试菜单的功能-将光标悬停在菜单上的一个按钮上，检查子菜单是否显示，然后在光标不再悬停在该菜单按钮上时再次隐藏，检查单击任何菜单按钮/子菜单按钮是否可进入右侧页面等

菜单的HTML编写如下：

<ul id="nav"
    class="nav"
    data-slim-scroll
    data-collapse-nav
    data-highlight-active>
    <li data-ng-mouseenter="setMenuTop($event)" ng-show="menu.pages.length > 0 || menu.upages.length > 0 || canCreatePage">
        <a href="#/pages" id="pagesMenuBtn" target="_self"><i class="ti-layers"></i><span data-i18n="Pages"></span></a>
        <ul class="text-capitalize">
            <li ng-repeat="page in menu.pages"><a href="#/{{page.location}}" target="_self"><i class="ti-angle-right"></i><span data-i18n="{{page.title}}"></span></a></li>
            <li ng-repeat="upage in menu.upages">
                <div class="nav-menu-divider" data-ng-if="$index === 0"></div>
                <a href="#/{{upage.location}}" target="_self">
                    <i class="ti-angle-right"></i><span data-i18n="{{upage.title}}"></span>
                </a>
            </li>
            <li data-ng-show="canCreatePage">
                <div class="nav-menu-divider"></div>
                <a href="#/pages/create" target="_self">
                    <i class="ti-angle-right"></i><span data-i18n="Create Page"></span>
                </a>
            </li>
        </ul>
    </li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li data-ng-mouseenter="setMenuTop($event)">
        <a href="#/config" target="_self"><i class="ti-settings"></i><span data-i18n="Config"></span></a>
        <ul>
            <li ng-repeat="page in menu.config"><a href="#/{{page.location}}" target="_self"><i class="ti-angle-right"></i><span data-i18n="{{page.title}}"></span></a></li>
            <li ng-show="platform._id"><a ng-href="#/config/platform/{{platform._id}}" target="_self"><i class="ti-angle-right"></i><span data-i18n="Platform"></span></a></li>
            <li ng-show="system._id"><a ng-href="#/config/system/{{system._id}}" target="_self"><i class="ti-angle-right"></i><span data-i18n="System"></span></a></li>
            <li><a href="#/config/user" target="_self"><i class="ti-angle-right"></i><span data-i18n="Users"></span></a></li>
            <li><a href="#/config/backup" target="_self"><i class="ti-angle-right"></i><span data-i18n="Backup / Restore"></span></a></li>
            <li ng-show="systemActions.dateTime"><a href="#/config/systemtime" target="_self"><i class="ti-angle-right"></i><span data-i18n="Date / Time"></span></a></li>
        </ul>
    </li>
    <li class="nav-footer">
        <span>{{currentTime.localTDZFormat}}</span>
    </li>
</ul>

本测试中使用的变量定义如下：

var pagesMenuBtn = element(by.id('pagesMenuBtn'));
var pageVarBrowserBtn = element.all(by.id('menu.pages')).get(0);
var userCircle = element(by.id('icon-user-circle'));

pageVarBrowserBtn是当用户将光标悬停在pagesMenuBtn上时显示的子菜单中的第一个菜单项

当前，当我运行测试时，浏览器将打开，导航到我的应用程序的根页面，并将光标悬停在PagesMinubtn元素上，以便显示子菜单。我可以在测试打开的浏览器窗口中看到它的显示

但是，我在控制台中得到一个错误，它说：

失败：索引超出范围。正在尝试访问索引为0的元素，但只有0个元素与定位器ByCSS选择器*[id=menu.pages]匹配

---

我不明白为什么我会犯这个错误。。。？如何从正在显示的子菜单中获取单个元素，以检查它是否是正确的项目，以及单击它是否会将用户带到正确的位置？我无法指定确切元素的ID，因为它是由ng repeat创建的，所以我尝试通过其位置/数组索引-0获取它。

您是否尝试使用从选择器获取第一个元素？

首先，可能有两个原因导致上述错误

1. Either the locator you are using is wrong.
2. Your script is not waiting until the element is displayed in DOM.

在您的例子中，您提到了一个错误的定位器作为element.allby.id'menu.pages'，因为HTML中没有id为menu.pages的元素

不要使用element.allby.id'menu.pages'，而是将其更改为element.allby.repeater'page in menu.pages'。get0从菜单列表中获取第一个元素。另外，请参考“量角器”支持的所有可用定位策略列表

希望这有助于解决您的问题

出色，使用element.allby.repeater'page in menu.pages.get0；工作-了解by.repeater是如何访问ng repeat创建的元素非常有用。

1. Either the locator you are using is wrong.
2. Your script is not waiting until the element is displayed in DOM.