Element is not currently visible and so may not be interacted with when clicking a button

Question

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:

<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>

How to resolve it and and make a successful click?

Answer 1

Usually, it is just that you need to maximize the browser window:

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

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

Answer 2

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