Проталкиватель не может открыть раскрытие аккордеона на моем угловом приложении

Question

Я искал это с прошлой ночи, и я не могу понять, почему он не работает.

Вот код захваченный Chrome на вкладке Elements - 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 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, а также изменен/использовал код в

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

, что я только заметил, что он выделил это меню, но не нажал/не открыл выпадающий аккордеон.

Answer 1

Похоже, вам нужно нажать на ссылку тумблер внутри аккордеона:

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