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?
Try selecting by cssContainingText, very helpful with dropdowns and nested elements!
element(by.cssContainingText('option', 'Rename')).click();
Related
We populating our dropdowns from a JSON file, but for some reason, it's not working on mobile. Except for the li anchors, I'm following the guidelines from the Bootstrap 3.3.7 documentation: https://getbootstrap.com/docs/3.3/components/#dropdowns.
I also added this, but the issue persists on mobile devices:
$('.dropdown-backdrop').css({display: 'none'});
What could be causing this? Here's my dropdown code.
<div class="dropdown w-100 open" id="attrib">
<button data-device="Umbra 501" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Economy
<span class="glyphicon glyphicon-menu-down"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a data-filter-dropdown="Small">Small</a></li>
<li><a data-filter-dropdown="Medium">Medium</a></li>
<li><a data-filter-dropdown="Large">Large</a></li>
<li><a data-filter-dropdown="Xlarge">Xlarge</a></li>
</ul>
</div>
UPDATES
This site is AEM 6.5. Also I noticed that all the dropdowns have the same id ("attrib").
I'm using bootstrap (I have bootstrap and jquery included and dropdowns working elsewhere) and tryingo to use my profile icon as a trigger for a dropdown with an option to logout.
My profile icon is showing the downward caret like it's a dropdown, but when I click there is no dropdown triggered.
I can't use a button here, it needs to be tied to the icon.
What exactly am I doing wrong?
<div class="dropdown">
<div class="menu-button profile dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="far fa-user-circle fa-2x"></i>
</div>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</div>
I'm trying to create a language bar with the jQuery bootstrap plugin, but it seems there is no option to append any action to anchor tags in drop down menu at all. They are just un-clickable.
Initialization of plugin:
<div class="bfh-selectbox bfh-languages" data-language="pl_PL" data-available="en_US,pl_PL" data-flags="true" data-blank="false">
<input type="hidden" value="">
<a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
<span class="bfh-selectbox-option input-medium" data-option=""></span>
<b class="caret"></b>
</a>
<div class="bfh-selectbox-options">
<div role="listbox">
<ul role="option">
<li>
<a href="/index.php?lang=pl_PL" data-option="pl_PL">
<i class="glyphicon bfh-flag-PL"></i>
</a>
</li>
<li>
<a href="/index.php?lang=en_US" data-option="en_US">
<i class="glyphicon bfh-flag-US"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
Commenting or uncommenting doesn't make any difference.
Another possibly related issue:
When I'm stretching out my web page, with the container overflowing the language bar completely, it becomes completely un-clickable. I don't want to change this plugin on something else in case someone will offer.
The address of the website is here.
I need to stop event propagation on the main DIV and I set a flag on the original event object whether event occurred on the "more_vert" button. This works fine, but after to enable ngTouch the next code no work in OS: Android / Browser: Google Chrome.
<div ng-click="$event.originalEvent.dropdown || model.option()">
<div>Name of item.</div>
<span>Value of item.</span>
<div class="dropdown" ng-click="$event.originalEvent.dropdown = true">
<a id="menuActions" aria-expanded="false" aria-haspopup="true" data-target="#" data-toggle="dropdown" role="button">
<i class="material-icons md-24">more_vert</i>
</a>
<ul class="dropdown-menu" aria-labelledby="menuActions">
<li>
Option1
</li>
<li>
Option2
</li>
<li>
Option3
</li>
</ul>
</div>
</div>
I use Angular 1.4.7.
This works fine. Actually work with ngTouch and Angular 1.5.5
I'm trying to stick a dropdown inside a popover (both bootstrap), and it 'sort of' works. The first popover I open works fine, but as soon as I open another one (from a different image) it stops working (take a look at this video to see what I mean).
In my HTML I'm making sure every dropdown has a different IDs (by binding my object ID, which is always different) since apparently that's what Bootstrap uses:
<div class="dropdown collection-selection-view">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-<%- id %>" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-<%- id %>"></ul>
</div>
And they render with unique IDs alright.
Example #1:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-40261" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-40261">
<li>
Happy collection
</li>
<li>
Sad collection
</li>
</ul>
</div>
Example #2:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle collection-dropdown" type="button" id="collection-dropdown-39935" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose or Create Collection
<span class="caret"></span>
</button>
<ul class="dropdown-menu user-collection-list" aria-labelledby="collection-dropdown-39935">
<li>
Happy collection
</li>
<li>
Sad collection
</li>
</ul>
</div>
But for some reason it still doesn't work... any ideas of what could be going on?