Проталкиватель, щелкнув на выпадающем переключателе

Question

Я запускаю E2E в своем угловом приложении с помощью Транспортера. Я сталкиваюсь с очень странной проблемой. Я использую Dropstrap Dropdown, у которого есть некоторые опции. Мне нужно нажать на один из вариантов. я передал этот ответ, который пытается сделать что-то подобное, но не работает для меня: Protractor - how to select heavily nested dropdown element?

Моя структура выглядит следующим образом:

<div id="fc-more-btn" class="btn-group btn-group-sm dropdown" role="group" dropdown="" is-open="ctrl.fcDropdown"> 
    <button type="button" class="btn btn-default dropdown-toggle filetree-btn" tooltip="More Actions" tooltip-trigger="mouseenter" tooltip-placement="bottom" ng-disabled="ctrl.sd.noSelections" dropdown-toggle="" aria-haspopup="true" aria-expanded="false"> 
     <span class="fa fa-caret-down"></span> 
    </button> 
    <ul class="dropdown-menu filetree-dropdown" role="menu"> 
     <li> 
     <a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewFile()"> 
      New File 
     </a> 
     </li> 
     <li> 
     <a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.createNewDir()"> 
      New Folder 
     </a> 
     </li> 
     <li> 
     <a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections" ng-click="ctrl.copyFiles()"> 
      Copy 
     </a> 
     </li> 
     <li> 
     <a class="btn fc-dropdown-link" ng-disabled="ctrl.clipboardEmpty||ctrl.sd.noSelections||(ctrl.sd.multipleSelections||!ctrl.sd.dirSelected)" ng-click="ctrl.pasteFiles()" disabled="disabled"> 
      Paste 
     </a> 
     </li> 
     <li> 
     <a class="btn fc-dropdown-link" ng-disabled="ctrl.sd.noSelections||ctrl.sd.multipleSelections" ng-click="ctrl.renameFile()"> 
      Rename 
     </a> 
     </li> 
    </ul> 
    </div> 

В моем тесте, я пытаюсь нажать на Rename ссылка.

Кода я написал:

element(by.css('.dropdown-toggle')).click().then(function(){ 
    //click on rename 
}); 

На выполнении теста, есть небольшое мерцание над кнопкой выпадающего тумблера, и кажется, что кнопка нажата. Однако выпадающее меню, которое должно отображаться, не отображается.

В результате этого я не могу имитировать щелчок, чтобы переименовать. Я делаю что-то неправильно?

Answer 1

Попробуйте выбрать cssContainingText, очень полезно с выпадающими списками и вложенными элементами!

element(by.cssContainingText('option', 'Rename')).click();