How to interact with deeply nested 'input' html object using Python and Selenium library

Question

I'm trying to interact with a username and password html input object using selenium web driver python library. And while I can interact with most html tags the code I have will not work on a deeply nested 'input' tag to key in the username and password. See attached image for

I've tried using the xpath module by itself and i have also tried using WebDriverWait in case elements needed to load up before being able to access. When I've tried WebDriverWait the code never reaches the timeoutException it just freezes in the runtime terminal and I have to manually kill it.

chrome_options = Options()
#chrome_options.add_argument("--headless")
recollect_url = r"https://manage.recollect.net/admin"
driver = webdriver.Chrome("C:\Users\Jlong\Downloads\chromedriver_win32\chromedriver.exe",chrome_options=chrome_options)
driver.get(recollect_url)
pagesource = driver.page_source


try:
    myElem = WebDriverWait(driver, 5).until(EC.presence_of_element_located((By.XPATH, "//input[@name='email']")))
    myElem2 = WebDriverWait(driver, 5).until(EC.presence_of_element_located((By.CLASS_NAME, 'auth0-lock-input-block '
                                                                                            'auth0-lock-input-email')))

    print "Page is ready!"

except TimeoutException:

    print "Loading took too much time!"

I would expect to be able to use send_keys() method for username and password and then use click method on submit to enter credentials

KunduK · Answer 1 · 2019-06-05T16:01:11.417

Use WebdriverWait and following xpath.

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

WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='auth0-lock-input'][@name='email']"))).send_keys('xyz@gmail.com')
WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='auth0-lock-input'][@name='password']"))).send_keys('testuser')

WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH,"//button[@class='auth0-lock-submit']//span[@class='auth0-label-submit'][contains(.,'Log In')]"))).click()

Output:

Thank you this worked for me! What is it about adding additional attribute identifiers in the xpath code that correclty grabs the object? i.e "//input[@class='auth0-lock-input'][@name='email']" adding '@name' along with '@class' is what did the trick. I just don't fully understand why — Jeff Long, Jun 10 '19 at 14:47

score 1 · Answer 2 · answered Jun 05 '19 at 21:31

To invoke send_keys() method for username and password and then use click() method on LOG IN button to login through a set a set of valid credentials you have to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

Using CSS_SELECTOR:

driver.get('https://manage.recollect.net/admin')
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input.auth0-lock-input[name='email']"))).send_keys("Jeff_Long@stackoverflow.com")
driver.find_element_by_css_selector("input.auth0-lock-input[name='password']").send_keys("JeffLong")
driver.find_element_by_css_selector("button.auth0-lock-submit span.auth0-label-submit").click()

Using XPATH:

driver.get('https://manage.recollect.net/admin')
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='auth0-lock-input' and @name='email']"))).send_keys("Jeff_Long@stackoverflow.com")
driver.find_element_by_xpath("//input[@class='auth0-lock-input' and @name='password']").send_keys("JeffLong")
driver.find_element_by_xpath("//button[@class='auth0-lock-submit']//span[@class='auth0-label-submit']").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

Browser Snapshot:

How to interact with deeply nested 'input' html object using Python and Selenium library

2 Answers2