Element not visible error (not able to click an element)

This is a rather common problem in test automation with selenium.

Here are the common solutions:

• make sure the element you want to click is actually visible. Sometimes you need to make extra actions on a page to make the element visible. For example, open up a dropdown for an option to appear or open menu for submenu to appear

• wait for the visibility of the element:

  var EC = protractor.ExpectedConditions;var mumbaiCity = element(by.id('mumbaiCity'));browser.wait(EC.visibilityOf(mumbaiCity), 5000);mumbaiCity.click();

• there is an another element with the same id that is actually invisible. In this case, you need to improve your locator to match this specific element. For instance:

  element(by.css(".city-checkbox #mumbaiCity")).click();element(by.css(".city-checkbox input[ng-click*=Mumbai]")).click();

• Or, if you got multiple elements matching the same locator - you can "filter" out a visible element:

  var mumbaiCity = element.all(by.id('mumbaiCity')).filter(function (elm) {    return elm.isDisplayed().then(function (isDisplayed) {        return isDisplayed;    });}).first();mumbaiCity.click();

• move to element and then click via browser.actions():

  var mumbaiCity = element(by.id('mumbaiCity'));browser.actions().mouseMove(mumbaiCity).click().perform();

• scroll into view of the element and then click:

  var mumbaiCity = element(by.id('mumbaiCity'));browser.executeScript("arguments[0].scrollIntoView();", mumbaiCity.getWebElement());mumbaiCity.click();

• click via javascript (beware of the differences though):

  var mumbaiCity = element(by.id('mumbaiCity'));browser.executeScript("arguments[0].click();", mumbaiCity.getWebElement());

• sometimes, you just need to maximize the browser window:

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