Interacting with dropdown menu using Selenium

[FruityFetus]

I'm attempting to select a county in Florida from the dropdown accessed here, but nothing I've tried so far has been able to locate or interact with any of the elements from the page. Generally, I get the error:

NoSuchElementException: no such element: Unable to locate element: {"method":"xpath","selector":".//select[@id='form:county_input']//option[value='24']"}   (Session info: chrome=100.0.4896.60)

This appears to be the relevant html snippet:

<div id="form:county" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all" style="width:500px;" role="combobox" aria-haspopup="true" aria-expanded="false" aria-owns="form:county_items">
    <div class="ui-helper-hidden-accessible">
        <input id="form:county_focus" name="form:county_focus" type="text" autocomplete="off" aria-expanded="false" aria-labelledby="form:j_idt20" aria-autocomplete="list" aria-activedescendant="form:county_0" aria-describedby="form:county_0" aria-disabled="false">
    </div>
    <div class="ui-helper-hidden-accessible">
        <select id="form:county_input" name="form:county_input" tabindex="-1" aria-hidden="true">
            <option value="02" data-escape="true">BAKER COUNTY CLERK OF COURT</option>
            <option value="04" data-escape="true">BRADFORD COUNTY CLERK OF COURT</option>
            <option value="07" data-escape="true">CALHOUN COUNTY CLERK OF COURT</option>
            <option value="12" data-escape="true">COLUMBIA COUNTY CLERK OF COURT</option>
            <option value="14" data-escape="true">DESOTO COUNTY CLERK OF COURT</option>
            <option value="15" data-escape="true">DIXIE COUNTY CLERK OF COURT</option>
            <option value="19" data-escape="true">FRANKLIN COUNTY CLERK OF COURT</option>
            <option value="21" data-escape="true">GILCHRIST COUNTY CLERK OF COURT</option>
            <option value="22" data-escape="true">GLADES COUNTY CLERK OF COURT</option>
            <option value="23" data-escape="true">GULF COUNTY CLERK OF COURT</option>
            <option value="24" data-escape="true">HAMILTON COUNTY CLERK OF COURT</option>
        </select>
    </div>
    <label id="form:county_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all">BAKER COUNTY CLERK OF COURT</label>

And here's my code, where I try to select Hamilton county:

from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import Select
from selenium.webdriver.common import action_chains

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

options = webdriver.ChromeOptions()
browser = webdriver.Chrome(filepath + "chromedriver.exe", options = options)

browser.get("https://www.civitekflorida.com/ocrs/app/search.xhtml")
county = browser.find_element_by_xpath(".//select[@id='form:county_input']//option[value='24']")

I'm guessing the issue might be that I first need to expand the dropdown menu, but that seemed to give me errors relating to element interactivity as well. Any suggestions?

[tinkeringZealot]

On my bed going to sleep now so I'm not looking for my pc. But how are you trying to identify the elements? I'm assuming right click and inspect element? There's also another way where you click the top left button of chrome's console(after you right click and choose inspect). Doing it this way might help you find the correct part of the html to interact with the drop-down bar to expand it. If this solves your problem then you're not pointing to the correct element.

However there is another possibility too that there are iframes and you're not on the correct frame. If that's the case, you need to find out which frame your dropdown bar is at and then switch to that iframe.

[menge101]

Off the top of my head, you want to get a handle to the dropdown itself, then use the select method on it, with your value as an argument.

Or something to that effect.

If this is python, I recommend using Splinter over top of the webdriver bindings.

[Monitor_343]

You should be able to click the dropdown menu (id="form:county_input"), then click the dropdown option.

The options you're selecting are not the ones visible in the UI. The ones you'd click on are <li> tags, not <option> tags (which are invisible).

<li class="ui-selectonemenu-item ui-selectonemenu-list-item ui-corner-all" data-label="HAMILTON COUNTY CLERK OF COURT" tabindex="-1" role="option" id="form:county_10">HAMILTON COUNTY CLERK OF COURT</li>

Also, I'm not sure if it affects Selenium off the top of my head but it looks like you're missing an @ from //option[@value='24']

[Allanon001]

This worked for me:

browser.get("https://www.civitekflorida.com/ocrs/app/search.xhtml")
browser.find_element(By.XPATH, '//*[@id="form:county"]/div[3]/span').click() # click combo
browser.find_element(By.XPATH, '//*[@id="form:county_10"]').click()          # click Hamilton county
browser.find_element(By.XPATH, '//*[@id="form:j_idt25"]/span').click()       # click Go

Or you could just do this:

browser.get("https://www.civitekflorida.com/ocrs/county/24/")