Question

我正在尝试编写验收测试，通过打开侧面菜单并单击“注销”按钮来记录用户。黑猩猩抱怨，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 Framework似乎对离子侧菜单做了一些重复，可能是出于动画目的，我不确定。在所有重复的元素中，一个永远不可见或填充（角度模板未填充）。在控制台中执行$('.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);

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

1 个答案: