javascript - 元素当前不可见，因此单击按钮时可能无法与之交互

Question

我的 Protractor 代码是

element(by.dataHook("delete-button")).click();

获取:

Element is not currently visible and so may not be interacted with

HTML 源代码:

<button class="md-icon-but" type="button" ng-transclude="" ng-click="g" translate="loc" aria-label="Delete" title="Delete">
    <md-icon md-svg-icon="ass" data-hook="delete-button" class="ng-scope" aria-hidden="true"><svg xmlns="ht" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg></md-icon>
    <div class="md"></div></b>

如何解决并成功点击？

Answer 1

通常，您只需要 maximize the browser window :

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

请注意，在 Chrome+Mac 上，当前您 have to do it differently 。

<小时/>

以下是对其他人也有帮助的其他事情:

• 验证没有其他元素与定位器匹配。如果有另一个与定位器匹配但实际上不可见的元素，您可能会收到此错误。

• 等待element to be clickable:

  var EC = protractor.ExpectedConditions,
      elm = $("button[title=Delete]");
  
  browser.wait(EC.elementToBeClickable(elm), 5000);
  

• 元素的 scroll into view:

  var elm = $("button[title=Delete]");
  browser.executeScript("arguments[0].scrollIntoView();", elm);
  

• 点击via javascript:

  var elm = $("button[title=Delete]");
  browser.executeScript("arguments[0].click();", elm);
  

• 移动到元素并通过“浏览器操作”点击:

  var elm = $("button[title=Delete]");
  browser.actions()
      .mouseMove(elm)
      .click()
      .perform();