Element Is Not Currently Visible And So May Not Be Interacted With When Clicking A Button

My Protrator code is element(by.dataHook('delete-button')).click(); Getting: Element is not currently visible and so may not be interacted with HTML source:

Note that on Chrome+Mac, currently you have to do it differently.

---

Here is the set of other things that also helped others:

• verify that there are no other elements matching the locator. You can get this error if there is an another element matching the locator that is actually invisible.

• wait for the element to be clickable:

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

• scroll into view of the element:

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

• click via javascript:

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

• move to element and click via "browser actions":

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

Solution 2:

var EC = protractor.ExpectedConditions;
// Waits for the element with id 'abc' to be clickable.
browser.wait(EC.elementToBeClickable($('#abc')), 5000);