量角器无法在我的 Angular 应用程序中打开手风琴下拉菜单

Question

我从昨晚开始就一直在对此进行故障排除，但我不明白为什么它不起作用。

这是元素选项卡中 Chrome 捕获的代码 - https://gist.github.com/c0debreaker/2b0de5179710b9c236c3

// I added name="classPrinterAnalytics" to it hoping Protractor would find it
<div class="panel panel-default ng-isolate-scope" name="classPrinterAnalytics" ng-repeat="menu in leftNavMenusUIv2 track by menu.class" is-disabled="menu.disabled" is-open="isopenModel.opened[menu.class]" ng-class="{ 'classPrinterAnalytics' : isopenModel.opened[menu.class] }">
<div class="panel-heading" ng-click="toggleOpen()">
    <h4 class="panel-title">
        <a class="accordion-toggle" accordion-transclude="heading">
            <div ng-switch="" on="menu.glyphiconShow" class="ng-scope">
                <!-- ngSwitchWhen: hide -->
                <!-- ngSwitchWhen: show --><div ng-switch-when="show" class="ng-scope">
                    <div><i class="fa fa-print" style="font-size : 1.3em"></i><span class="hidden-xs ng-binding">&nbsp;&nbsp;&nbsp;Printer Analytics<i class="pull-right glyphicon submenu glyphicon-chevron-right" ng-class="{'glyphicon-chevron-down': isopenModel.opened[menu.class], 'glyphicon-chevron-right': !isopenModel.opened[menu.class] }"></i></span></div>
                </div>
            </div>
        </a>
    </h4>
</div>
<div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;">
    <div class="panel-body" ng-transclude="">
        <div class="ng-scope"><accordion-heading></accordion-heading></div>
        <!-- ngRepeat: submenus in menu.submenus -->
        <div ng-repeat="submenus in menu.submenus" class="ng-scope">
            <div ng-switch="" on="submenus.linktype">
                <!-- ngSwitchWhen: ui-router --><div ng-switch-when="ui-router" class="ng-scope">
                    <span class="dottedbar"></span>
                    <div id="subMenuOdometers" class="submenu ng-binding highlight" ng-class="{highlight: isOneHighlight(submenus), unhighlight : isGlobalDashboardActive}" ng-click="updateOneSpan(submenus)">Odometers
                        <i ng-hide="isGlobalDashboardActive" class="pull-right fa faCaretColor fa-caret-left" ng-class="{'fa-caret-left': isOneHighlight(submenus)}"></i>
                    </div>
                </div>
                <!-- ngSwitchWhen: static -->
            </div>
        </div><!-- end ngRepeat: submenus in menu.submenus -->
        <div ng-repeat="submenus in menu.submenus" class="ng-scope">
            <div ng-switch="" on="submenus.linktype">
                <!-- ngSwitchWhen: ui-router --><div ng-switch-when="ui-router" class="ng-scope">
                    <span class="dottedbar"></span>
                    <div id="subMenuPrinthead" class="submenu ng-binding" ng-class="{highlight: isOneHighlight(submenus), unhighlight : isGlobalDashboardActive}" ng-click="updateOneSpan(submenus)">Real Time Print Job
                        <i ng-hide="isGlobalDashboardActive" class="pull-right fa faCaretColor" ng-class="{'fa-caret-left': isOneHighlight(submenus)}"></i>
                    </div>
                </div>
                <!-- ngSwitchWhen: static -->
            </div>
        </div><!-- end ngRepeat: submenus in menu.submenus -->
        <div ng-repeat="submenus in menu.submenus" class="ng-scope">
            <div ng-switch="" on="submenus.linktype">
                <!-- ngSwitchWhen: ui-router --><div ng-switch-when="ui-router" class="ng-scope">
                    <span class="dottedbar"></span>
                    <div id="subMenuPrinthead" class="submenu ng-binding" ng-class="{highlight: isOneHighlight(submenus), unhighlight : isGlobalDashboardActive}" ng-click="updateOneSpan(submenus)">Battery
                        <i ng-hide="isGlobalDashboardActive" class="pull-right fa faCaretColor" ng-class="{'fa-caret-left': isOneHighlight(submenus)}"></i>
                    </div>
                </div>
                <!-- ngSwitchWhen: static -->
            </div>
        </div><!-- end ngRepeat: submenus in menu.submenus -->
        <div ng-repeat="submenus in menu.submenus" class="ng-scope">
            <div ng-switch="" on="submenus.linktype">
                <!-- ngSwitchWhen: ui-router --><div ng-switch-when="ui-router" class="ng-scope">
                    <span class="dottedbar"></span>
                    <div id="subMenuPrinthead" class="submenu ng-binding" ng-class="{highlight: isOneHighlight(submenus), unhighlight : isGlobalDashboardActive}" ng-click="updateOneSpan(submenus)">Printhead
                        <i ng-hide="isGlobalDashboardActive" class="pull-right fa faCaretColor" ng-class="{'fa-caret-left': isOneHighlight(submenus)}"></i>
                    </div>
                </div>
                <!-- ngSwitchWhen: static -->
            </div>
        </div><!-- end ngRepeat: submenus in menu.submenus -->
    </div>
</div>
</div>

这是我的规范文件

describe('UI End2End Testing', function() {

it('should authenticate', function() {
    browser.get('http://localhost:9000/#/login');
    element(by.model('username')).sendKeys('demouser1');
    element(by.model('password')).sendKeys('secret');
    element(by.id('circleLogin')).click();

    expect(element(by.binding('userData.username')).getText()).
        toEqual('demouser1');

});

it('should open accordion dropdown', function() {

    var hasClass = function (element, cls) {
        return element.getAttribute('class').then(function (classes) {
            return classes.split(' ').indexOf(cls) !== -1;
        });
    };

    element(by.name('classPrinterAnalytics')).click();

    //  hasClass(element(by.name('classPrinterAnalytics')), 'classPrinterAnalytics').then(function(d) {
    //    console.log('result', d); // d is false
    //    element(by.name('classPrinterAnalytics')).click();
    //  });

})

});

这是我的配置文件 - https://gist.github.com/c0debreaker/94d7b0744f7a83c6efd0

Protractor 可以登录，但无法打开左侧导航栏的手风琴下拉菜单。我得到的错误是

$ protractor conf.js
Using the selenium server at http://127.0.0.1:4444/wd/hub
.F

Failures:

  1) UI End2End Testing should open accordion dropdown
   Message:
     NoSuchElementError: No element found using locator: By.name("classPrinterAnalytics")
   Stacktrace:
     NoSuchElementError: No element found using locator: By.name("classPrinterAnalytics")
==== async task ====
Asynchronous test function: it()
Error
    at [object Object].<anonymous> (/Users/xxxx/repos/ui/test/spec/protractor/ui-spec.js:15:5)
    at Object.<anonymous> (/Users/xxxx/repos/ui/test/spec/protractor/ui-spec.js:1:63)

Finished in 8.485 seconds
2 tests, 2 assertions, 1 failure

然后我尝试了一个不同的解决方案，将 id="classPrinterAnalytics" 添加到我的 html 模板中，并将代码 changed/used 添加到

element(by.id('classPrinterAnalytics')).click();

我只注意到它突出显示了该菜单，但从未 clicked/open 手风琴下拉菜单。

Answer 1

您似乎需要点击手风琴内部的开关 link：

element(by.css('div#classPrinterAnalytics a.accordion-toggle')).click();

量角器无法在我的 Angular 应用程序中打开手风琴下拉菜单

Protractor unable to open accordion dropdown on my Angular application

angularjs

angularjs-e2e

protractor