selecting element in uib-dropdown menu

Question

I Have a HTML code like this.

<div ng-if="!hide" class="dropdown pull-right" uib-dropdown>
    <a uib-dropdown-toggle href="" >
    <div class="btn btn-primary-outline btn-circle btn-xs pull-right comment-button"> 
        <span class="icon icon-chevron-down"></span>
    </div>
    </a>
    <ul class="dropdown-menu " style="text-align: center;" role="menu" uib-dropdown-menu>
        <li role="divider" ng-if="showDelete"><a href="" ng-click="deleteItem($index)">delete </a></li>
        <li role="divider"><a href="" ng-click="Report()"> report</a></li>
    </ul>
</div>

When using in protractor facing an issue with uib-dropdown selection. I written code like this:

var dropDown = element(by.css("div[uib-dropdown]"));
dropDown.element(by.css("a[uib-dropdown-toggle]"));
dropDown.element(by.css("a[ng-click=deleteItem($index)]")).click(); 
browser.sleep(5000);

Failed: invalid selector: An invalid or illegal selector was specified.Thanks @Danny.this error getting in second line i think — Shiva, Nov 26 '16 at 10:32

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

The a[ng-click=deleteItem($index)] is actually an invalid CSS selector, you needed to put the attribute value into quotes:

dropDown.element(by.css('a[ng-click="deleteItem($index)"]')).click();

Though, I'd go for a partial match that appears to be more readable:

dropDown.element(by.css('a[ng-click*=deleteItem]')).click();

where *= means "contains".

Or, you can even go for a "link text" locator:

dropDown.element(by.linkText('delete')).click(); 
dropDown.element(by.partialLinkText('delete')).click();

edited May 23 '17 at 12:01

Community

1
1

answered Nov 27 '16 at 03:12

alecxe

462,703
120
1,088
1,195

tried above all the ways,still facing the same issue. @alecxe.please help me to solve – Shiva Nov 28 '16 at 05:42
@Shiva okay. You should not be getting the same error though. What error(s) do you see? Thanks – alecxe Nov 28 '16 at 07:37
still facing the same issue.the page contains two dropdown's it is unable to locate the second element @alecxe – Shiva Nov 28 '16 at 09:05

score 0 · Accepted Answer · answered Nov 28 '16 at 06:22

0

 this.selectMenuOption = function (option) {  //menu item to click
    var dropdown = element(by.className('dropdown pull-right'));        
    dropdown.click();
    dropdown.element(by.tagName('ul')).all(by.tagName('li')).filter(function (elem) {
         return elem.getText().then(function (val) {
             return val.toUpperCase() === option.toUpperCase();
      })
   }).first().click();
}

answered Nov 28 '16 at 06:22

radio_head

1,306
4
13
28

throwing an error @Danny : Failed: Cannot read property 'toUpperCase' of undefined Stack: TypeError: Cannot read property 'toUpperCase' of undefined – Shiva Nov 28 '16 at 09:14
if it the correct response, can you mark it as the correct answer.So that others can get it easy – radio_head Nov 28 '16 at 11:58

selecting element in uib-dropdown menu

2 Answers2