How to select an option from the auto suggestions using Selenium and Python

Question

I'm trying to select an option from the auto-suggestions after sending a text within the search field of the Selenium documentation website. But I'm unable to find any of those suggestions.

Code trials:

driver.get('https://www.selenium.dev/documentation/en/')
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "#search-by"))).send_keys("selenium")

Snapshot of the auto-suggestions:

Can anyone help me out please to select any of the auto-suggestions?

You can send the complete text option and then send an enter or you can run javascript with selenium. For these cases, I prefer to inject javascript — Danilo Toro, Dec 27 '20 at 00:03
I got the source of the auto-suggestions in Chrome by typing something into the search box and hitting `Ctrl-Shift-I` to open up Inspect in the Dev Tools. You can then expand that div to find the divs for each auto-suggestion. — MattDMo, Dec 27 '20 at 00:21
Would you be able to map it to python if I give it to you in java ? — Wilfred Clement, Dec 27 '20 at 16:36
@WilfredClement Sure, I will take that even. Feel free to answer. — undetected Selenium, Dec 27 '20 at 18:45

score 3 · Accepted Answer · answered Dec 27 '20 at 17:11

The autocomplete-suggestions is the div that holds all the autocomplete-suggestion's.

Here is a snip of the elements

To capture the elements I used the f8 button when searching for selenium, that way the elements don't disappear.

Here is a code snip for visualization:

def highlight_element(element):
    driver_elem = element.parent

    def apply_style(s):
        driver_elem.execute_script("arguments[0].setAttribute('style', arguments[1]);",
                                   element, s)

    original_style = element.get_attribute('style')
    apply_style("background: yellow; border: 2px solid red;")
    sleep(0.5)
    apply_style(original_style)

driver.get("https://www.selenium.dev/documentation/en/")
WebDriverWait(driver,30).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "#search-by")))
driver.find_element_by_css_selector("#search-by").send_keys("selenium")
WebDriverWait(driver,30).until(EC.presence_of_all_elements_located((By.CSS_SELECTOR, ".autocomplete-suggestions  .autocomplete-suggestion")))
for ele in driver.find_elements_by_css_selector(".autocomplete-suggestions  .autocomplete-suggestion"):
    highlight_element(ele)

score 3 · Answer 2 · answered Dec 28 '20 at 02:48

+1 for @Moshe Slavin's answer. The autocomplete-suggestions is the div that holds all the autocomplete-suggestion's

In order to capture the elements, I used the getPageSource() to print out the elements in the page.

And once I figured out the element the rest of the code below is self explanatory

wait.until(ExpectedConditions.elementToBeClickable(By.className("autocomplete-suggestion")));

List<WebElement> abc = driver.findElements(By.className("autocomplete-suggestion"));

String value = "Remote WebDriver client";

List<String> def = new ArrayList<String>();

    for (int i = 0; i < abc.size(); i++) {

            //Get the values and store it in a list
            def.add(abc.get(i).getAttribute("data-title"));

        }

        if (def.contains(value))

            abc.get(def.indexOf(value)).click();

        else
            System.out.println("Value not present");

How to select an option from the auto suggestions using Selenium and Python

2 Answers2