按钮在 e2e 中不可点击

button is not clickable in e2e

我的应用程序中有一个 id="logout" 的按钮,当我使用此 id 在量角器中单击时出现错误

it('4 should click Log out', () => {    
         element.all(by.id('logOut')).click();
        browser.driver.sleep(5000);        
    });

我的html是

<ion-buttons end>
        <button (click)='signOut()'>
            <ion-icon id="logOut"name="log-out"></ion-icon>
        </button>
    </ion-buttons>

我在终端的错误是

should click Log out
      - Failed: unknown error: Element is not clickable at point (1028, 28). Other element would receive the click: <button class="bar-button bar-button-default bar-button-icon-only">...</button>
  (Session info: chrome=50.0.2661.94)
  (Driver info: chromedriver=2.21.371459 (36d3d07f660ff2bc1bf28a75d1cdabed0983e7c4),platform=Mac OS X 10.11.2 x86_64)
F

Protractor 说它找到了带有 id="logOut" 的元素,但如果它试图点击该元素,则会点击该屏幕位置的其他元素 (button class="bar-button")。

目视查看您的页面并确认没有与您的注销按钮重叠的内容。或者您可能需要将 id 放在 <button> 元素上,而不是图标上,这样量角器才能点击正确的东西。

请注意,此行为在 chrome 和 Firefox 中可能有所不同(对于不能点击重叠元素似乎更加严格)和 Firefox(有时可以点击其他元素下方的元素)。

要添加到 @martin770 的精彩解释中,有一个元素 "hovers" 您想要单击的所需元素。我怀疑这是因为您的应用程序的 broken/resized 布局。尝试 最大化浏览器 window,将其放入配置中的 onPrepare()

browser.driver.manage().window().maximize();

所以我最近 运行 遇到了类似的问题,window 大小不是问题,而是 overlay/backdrop 问题。不确定这是否是您的问题,但我想我会把它扔掉。这里附上一篇link的文章供参考。

在搜索之前添加睡眠(在 Protractor API docs 中列出)让我在旋转车轮后移动。走完流程终于得到了browser.wait

it('4 should click Log out', () => {
    browser.sleep(1000);
    element(by.id('logOut')).click();        
});

-or-

var EC = protractor.ExpectedConditions;
var logoutButton = element(by.id('logOut'));
browser.wait(EC.elementToBeClickable(logoutButton), 5000);
logoutButton.click();

祝你好运!