Can't click an ion-side-menu button in Chimp acceptance test

Question

I'm trying to write an acceptance test that logs the user out by opening the side menu and clicking on the Logout button. Chimp is complaining, Uncaught Error: element not visible . Here's my test:

it('user can log out @watch', function() {
    //navigates to login form, fills in the form and submits, verifies that we see the hamburger (sidemenu) button.
    loginUser(ROLE_TYPE_ADMIN);

    //click the hamburger menu to slide open (reveal) the side menu
    browser.click("button.ion-navicon");

    //wait for animation to finish
    browser.pause(500);

    //wait for my login button to be recognized
    browser.waitForVisible('.mes-chimp-logout');

    //click the logout button (never gets this far – Uncaught Error: element not visible)
    browser.click('.mes-chimp-logout');
});

It's strange to me that if I take out the browser.click line that it succeeds because that would imply that it IS visible, yet the following line complains that it isn't visible.

Some other insights:

• If I take the side menu button and stick it in the foreground content, outside of the side menu, I can get it to be clickable
• the foreground content outside of the side menu is an ion-pane . It slides to reveal the side menu using a translate3d style

How can I overcome this error and click on the logout (or any side menu) button?

Answer 1

It turns out that even though I only intended to have one element with my selector, there are actually two. At runtime Ionic Framework seems to do some duplication of everything to do with the ion-side-menu, maybe for animation purposes, I'm not sure. Of all the duplicated elements, one is never visible or populated (angular templates not populated). When you do $('.mes-chimp-logout') in the console, you see two elements come up. When you hover over the good one, it highlights the button in the UI. When you hover over the other one, nothing highlights so it's either detached from the DOM or off screen/invisible somewhere (which is why WebDriverIO thinks it's not visible – one is, one isn't). I ended up doing this:

//get access to the element id of the second (index 1) copy of the element, the one I know is the visible, populated one.
const logoutBtnElementID = browser.elements('.mes-chimp-logout').value[1].ELEMENT;

//click it, using the target ID
browser.elementIdClick(logoutBtnElementID);