How to click on an autocomplete after filling partial text?

Question

I am testing a form, it has a categories field, it\'s an input-based drop-down menu. After add some text with .send_keys(\'text\') it shows a list of categories. Take a look

Answer 1

this is not an elegant solution but I'd go about coding something like below to select the item from the dropdown.

import time
from selenium.webdriver import Chrome

driver = Chrome()
driver.get('https://biz.yelp.com/signup_business/new')
categories_input = driver.find_element_by_id('categories')
categories_input.send_keys('Professional')

time.sleep(5) # replace with webdrive wait
categories_container = categories_input.find_element_by_xpath('..')
categories = categories_container.find_elements_by_css_selector('li[class*="suggestion-list-item"]')

for category in categories:
    if category.text == 'Professional Services':
        category.click()
        break

Answer 2

To click on the option with text as Professional Services > Software Development you have to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following Locator Strategies:

• Code Block:

  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
  
  driver.get("https://biz.yelp.com/signup_business/new")
  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@id='categories']"))).send_keys("Software Development")
  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[@id='categories']//following::div[1]/ul/li"))).click()
  

• Browser Snapshot: