selenium.common.exceptions.ElementNotVisibleException: Message: element not visible while trying to access an element with Python + Selenium

Question

I am trying to enter username and password in the following website: https://www.thegreatcoursesplus.com/sign-in

driver = webdriver.Chrome()
driver.get('https://www.TheGreatCoursesPlus.com/sign-in')
driver.find_element_by_xpath('//h1[@class="sign-in-input"]').click()

This gave following exception:

selenium.common.exceptions.ElementNotVisibleException: Message: element not visible

Then I tried to use java script:

driver.execute_script("document.getElementsByClassName('sign-in-input')[0].click()")
cmd = "document.getElementsByClassName('label-focus')[0].value = '[email protected]'"
driver.execute_script(cmd)

There are no errors but no text is sent to "Email Address" field.

Can someone please guide me on the correct way to enter email address, password and then click "Sign-in".

Answer 1

This error message...

selenium.common.exceptions.ElementNotVisibleException: Message: element not visible

...implies that the desired element was not visible within the HTML DOM while the WebDriver instance was trying to find it.

---

ElementNotVisibleException

ElementNotVisibleException is thrown when an element is present on the DOM Tree, but it is not visible, and so is not able to be interacted with.

---

Reason

One possitive take away from ElementNotVisibleException is the fact that the WebElement is present within the HTML and this exception is commonly encountered when trying to click() or read an attribute of an element that is hidden from view.

---

Solution

As ElementNotVisibleException ensures that the WebElement is present within the HTML so the solution ahead would be two folds as per the next steps as detailed below:

• If you next step is to read any attribute of the desired element, then you need to induce WebDriverWait in-conjunction with expected_conditions clause set to visibility_of_element_located as follows:

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC
  
  my_value = WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, "element_xpath"))).get_attribute("innerHTML")
  

• If you next step is to invoke click() on the desired element, then you need to induce WebDriverWait in-conjunction with expected_conditions clause set to element_to_be_clickable as follows:

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC
  
  WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "element_xpath"))).click()
  

---

This usecase

The xpath you constructed as //h1[@class="sign-in-input"] doesn't match any node. We need to create unique xpath to locate the elements representing Email Address, Password and Sign In button inducing WebDriverWait. The below code block will help you to achieve the same:

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

options = Options()
options.add_argument("start-maximized")
options.add_argument("disable-infobars")
options.add_argument("--disable-extensions")
driver = webdriver.Chrome(chrome_options=options, executable_path="C:\Utility\BrowserDrivers\chromedriver.exe")
driver.get('https://www.TheGreatCoursesPlus.com/sign-in')
WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//div[@id='modal']//input[@name='email']"))).send_keys("[email protected]")
driver.find_element_by_xpath("//div[@id='modal']//input[@name='password']").send_keys("password")
driver.find_element_by_xpath("//div[@id='modal']//button[@class='color-site sign-in-button']").click()