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 at its HTML:

<input type="text" aria-required="true" id="categories" maxlength="64" value="" autocomplete="off" class="input__69f5f__1POmY" placeholder="Pizza (Be specific)">

I am doing this to find and submit input text:

categories = browser.find_element_by_id('categories').send_keys('Software Development')

after that, it shows a list like:

click here to check image

Please someone can help me, how can I click on an option in the drop-down menu?

I am using the Firefox webdriver.

Thanks.

Please add URL of the site that you are testing. To help people reproduce the problem that you are facing or try and find solution. — Tek Nath, Feb 05 '20 at 10:59
I am trying to make a citation submission system :/ here is the url: https://biz.yelp.com/signup_business/new — usman, Feb 05 '20 at 11:14

score 2 · Answer 1 · answered Feb 05 '20 at 12:11

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

score 2 · Answer 2 · answered Feb 05 '20 at 14:47

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:

How to click on an autocomplete after filling partial text?

2 Answers2