How to locate the input element within nested divs using Selenium

Question

I'm having trouble locating element <input class='search-text'...> and would like to place the text 'hello' into the text box.

Trying to locate the input class='search-text'

My webdriver code is the following

driver.find_element(By.XPATH, "//ul[@class='filter-panel']//li[@class='filter-selection']//filter-selector//div[@class=filter-component]//div//div[@class='search-box-wrapper']/input[@class='search-text']").send_keys("hello")

That results in:

Exception has occurred: NoSuchElementException
Message: no such element: Unable to locate element: {"method":"xpath","selector":"//ul[@class='filter-panel']//li[@class='filter-selection']//filter-selector//div[@class=filter-component]//div//div[@class='search-box-wrapper']/input[@class='search-text']"}

I was hoping the word "hello" would be placed in the Search... box.

HTML snapshot of the Search... input box:

Does anyone have any ideas? Thanks!

Answer 1

Given the html:

the desired element is a dynamic element.

---

Solution

Ideally to send a character sequence to the element you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following locator strategies:

• Using CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input.search-text[aria-label='Enter text for search by keyword']"))).send_keys("yummybagels")
  

• Using XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@class='search-text' and @aria-label='Enter text for search by keyword']"))).send_keys("yummybagels")
  

• 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