Click not working on side menus using protractor

ionic-v1
1

element(by.css(’#menu > ion-content > ion-list > div > ion-item:nth-child(1) > a’)).click();

or

element(by.css(’#menu > ion-content > ion-list > div > ion-item:nth-child(1)’)).click();

is not working. Any ideas?

1 Like
2

this may be a css selection issue. But I recommend you to use directives “menu-toggle” in specific divs to make it happen because this is a more angular way.

3

I can click on the menu-toggle element, but lists inside it was the issue. Specifically on the ion-item element … items. I can’t even trigger it using chrome’s console and send a click event.

4

Are you sure ion-list is directly followed by ion-content (ion-content > ion-list)?

I have also tried it with

element(by.css('ion-side-menu ion-list ion-item:nth-child(3) a')).click();

and I get the following error:

UnknownError: unknown error: Element is not clickable at point (137, 177). Other element would receive the click: <ion-nav-view name="menuContent" class="view-container" nav-view-transition="ios" nav-view-direction="back" nav-swipe="">...</ion-nav-view>

Any further suggestions?

5

I finally found the solution. It is important to wait until the element in the sidebar is clickable!

var EC = protractor.ExpectedConditions;

// open sidebar menu
var menuToggleButton = element(by.css('ion-side-menus [nav-bar="active"] [menu-toggle="left"]'));
menuToggleButton.click();

var settingsLink = element(by.css('ion-side-menu ion-list ion-item:nth-child(3) a'));

var isSettingsLinkClickable = EC.elementToBeClickable(settingsLink);

browser.wait(isSettingsLinkClickable, 5000); //wait for the element to become clickable

settingsLink.click();