0

I am running E2E on my angular application using Protractor. I am running into a very weird problem. I am using the Bootstrap Dropdown which has some options. I need to click on one of the options. I referred this answer which tries to do something similar, but doesn't work for me: Protractor - how to select heavily nested dropdown element?

My structure looks like:

<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>

In my test, I am trying to click on the Rename link.

The code I have written is:

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

On running the test, there is a small flicker over the dropdown toggle button, and it seems that the button is clicked. However, the dropdown that should be shown is not shown.

As a result of this, I am not able to simulate a click to rename. Am I doing something wrong?

Community
  • 1
  • 1
Saurabh Sood
  • 213
  • 1
  • 2
  • 9

1 Answers1

0

Try selecting by cssContainingText, very helpful with dropdowns and nested elements!

element(by.cssContainingText('option', 'Rename')).click();
nagrom97
  • 494
  • 1
  • 6
  • 23