Element Not Visible Error (Not Able to Click an Element)

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

Element not visible error

If your element is not visible, then you can probably try scrolling to that element and then click on it. If its visible on the page then wait until it loads and then click on it by chaining it to the wait() function. Here's a sample of that -

var EC = protractor.ExpectedConditions;
var uploadLink = element(by.model('roomPlanCtrl.mm2010File'));
browser.wait(EC.elementToBeClickable(uploadLink), 10000).then(function(){
    uploadLink.click();
});

Hope it helps.

VBA button not clicking - element not visible error

To click on the element you can use either of the following locator strategies:

Using FindElementByCss:

MyBrowser.FindElementByCss("button.base-button#primary-button[title='Continue']").Click

Using FindElementByXPath:

MyBrowser.FindElementByXPath("//button[@class='base-button' and @id='primary-button'][@title='Continue' and text()='Continue']").Click

ElementNotVisibleException: Message: element not interactable error while trying to click a button through Selenium and Python

The element with text as Close is a dynamic element so to locate the element you have to induce WebDriverWait for the element to be clickable and you can use either of the following solutions:

Using CSS_SELECTOR:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.action-bar button.c-button.c-button--blue"))).click()

Using XPATH:

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[contains(@class, 'action-bar')]//button[@class='c-button c-button--blue' and normalize-space()='Close']"))).click()

Note : You have to add the following imports :

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

selenium error ElementNotVisibleException: element not visible

Find different examples below how you can locate ul element.

Get ul element by css selector:

browser.find_element_css_selector('#App-content .mid-content ul')

Get ul element that contains "Private" and "3" texts:

browser.find_element_by_xpath('//*[@id="App-content"]//ul[contains(.,"Private") and contains(.,"3")]')

Get ul element that contains li with "Request to View" text and has child img tag:

browser.find_element_by_xpath('//*[@id="App-content"]//ul[./li[.="Request to View"] and .//img]')

element not visible when click to link in the cycle

expected_conditions.visibility_of() receive WebElement as parameter

from selenium.webdriver.support import expected_conditions as ec
from selenium.webdriver.common.by import By

wait = WebDriverWait(driver, 10)
rows = driver.find_elements_by_css_selector('.odds-co')
for row in rows:
    wait.until(ec.visibility_of(row)).click()

You can also wait for all the rows to be presence

rows = WebDriverWait(driver, 10).until(EC.presence_of_all_elements_located((By.CSS_SELECTOR, '.table-container:not([style="display: none;"]) .odds-co')))
for row in rows:
    row.click()

How to click an element that is not visible in cypress

You have information on how you can workaround this problem.
Add optional 'option' param.

Element.click({force: true});

There you can find more information: https://docs.cypress.io/api/commands/click#Usage