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