无法在黑猩猩验收测试中单击离子侧菜单按钮

Question

我正在尝试编写一个验收测试，通过打开侧边菜单并单击Logout按钮来登录用户。黑猩猩在抱怨，Uncaught Error: element not visible。下面是我的测试:

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

对我来说很奇怪的是，如果我取出browser.click行，它会成功，因为这意味着它是可见的，但下面的行抱怨它不可见。

其他一些见解:

• 如果我把侧边菜单按钮放在前景内容中，在侧边菜单的外面，我可以让它是可点击的
• 侧边菜单外的前景内容是ion-pane。使用translate3d样式显示侧边菜单

我怎样才能克服这个错误并点击登出(或任何侧菜单)按钮?

Answer 1

事实证明，尽管我只打算在选择器中使用一个元素，但实际上有两个。在运行时，Ionic框架似乎做了一些与离子侧菜单有关的复制，可能是出于动画目的，我不确定。在所有重复的元素中，有一个永远不可见或不被填充(angular模板不被填充)。当您在控制台中执行$('.mes-chimp-logout')时，您会看到出现两个元素。当你将鼠标悬停在好的按钮上时，它会突出显示UI中的按钮。当你悬停在另一个，没有突出显示，所以它要么脱离DOM或离开屏幕/不可见的地方(这就是为什么WebDriverIO认为它是不可见的-一个是，一个不是)。最后我这样做了:

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