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:

Answer 1

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();
});

Answer 2

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();