AngularJs Protractor: Element in slide out menu not visible

Question

I'm back with more Protractor Q&A. So, I am coming across an issue when trying for find an element that is inside a slide out menu.

Snippet of html:

<div class="ng-scope" ui-view="navmenu">
<nav class="menu slide-menu-left ng-scope">
  <md-content class="md-default-theme" style="display: table" ng-click="slideMenuLeft()" tabindex="0">
    <button class="md-button md-default-theme" ng-transclude="" 
            style="width:50%;height:72px;border-right:1px solid #ddd;border-bottom:1px solid #ddd" 
            ng-click="checkmap()" tabindex="0">

Here are the ways I have tried to grab the the button out of this menu:

element(by.css('Button[ng-click="logoff()"]'));
element(by.xpath('/html/body/section/div[@class="ng-scope"]/nav[@class="menu slide-menu-left ng-scope"]/md-content/button[@ng-click="logoff()"]'));

Protractor does not like and proceeds to tell me this:

Stacktrace:
  ElementNotVisibleError: element not visible
  (Session info: chrome=40.0.2214.115)
  (Driver info: chromedriver=2.14.313457 (3d645c400edf2e2c500566c9aa096063e707c9cf),platform=Windows NT 6.3 x86_64) (WARNING: The server did not provide any stacktrace information)
Command duration or timeout: 31 milliseconds
Build info: version: '2.45.0', revision: '5017cb8', time: '2015-02-26 23:59:50'

Can anyone throw me suggestions as to what I may be doing wrong?

It's the exact same as the checkmap() button, there is literally no difference besides the click event method. I am having the issue with both buttons. — Joseph Freeman, Mar 13 '15 at 15:34
Hmmm I wasn't aware you could do something like that. I'll give that a shot. — Joseph Freeman, Mar 13 '15 at 15:37
No go my man, Protractor is still telling me that the "element is not visible". — Joseph Freeman, Mar 13 '15 at 15:40

score 5 · Accepted Answer · edited May 23 '17 at 11:53

5

You need to open up the menu before locating and clicking the submenu:

element(by.css('nav.menu > md-content')).click();
element(by.css('nav.menu > md-content > button[ng-click="logoff()"]')).click();

You may also need to use a elementToBeClickable expected condition to wait for the submenu to become clickable (needs protractor 1.7 or above):

var EC = protractor.ExpectedConditions;
var logoff = element(by.css('nav.menu > md-content > button[ng-click="logoff()"]'));

browser.wait(EC.elementToBeClickable(logoff), 10000);
logoff.click();

edited May 23 '17 at 11:53

Community

1
1

answered Mar 13 '15 at 15:42

alecxe

462,703
120
1,088
1,195

1

I have Protractor clicking the menu button to open it which is working. Your suggestion gave me an idea and it seemed to work. So, what appears to be happening is that Protractor, the speedy bastard, is just running to fast for the menu to completely open up, thus still hiding the button. I added a browser.sleep(2000) <--- wait 2 seconds, after the menu button is clicked to allow the menu to completely open. That seemed to work. I've got to run a couple more test to make sure this is in fact the issue though. Thanks for jogging my brain!!! – Joseph Freeman Mar 13 '15 at 15:49
@JosephFreeman thanks for trying this out right away. FYI, I've made an update that should be a better way to wait for the submenu to become clickable. – alecxe Mar 13 '15 at 15:53
Ok that, in fact, was the issue! Protractor is just too fast for its own good lol :) Is there anyway to slow it down by chance? That probably sounds stupid right. – Joseph Freeman Mar 13 '15 at 15:53
Oh ok excellent! I've never seen that before. I'll add that my txt file full of lines of awesome code lol :) Thanks for all of your help! – Joseph Freeman Mar 13 '15 at 15:55

score 3 · Answer 2 · answered Aug 27 '15 at 14:27

3

You can also use a promise to wait for the action to complete

element(by.id('menu')).click().then(function(){
    element(by.id('link')).click();
});

answered Aug 27 '15 at 14:27

Mangopop

329
2
12

AngularJs Protractor: Element in slide out menu not visible

2 Answers2

Linked

Related