Search code examples
pythonselenium-webdriverxpathhtml-selectwebdriverwait

How to select dropdown options with dynamic id and name values using Selenium


I want to click a dropdown from a html webpage and click a chosen dropdown option.

Unfortunately I can't find the element because everytime I load the page the id and name values change with random letters and numbers. So I have to let the driver find using different value.

Here's the html code:

<span class="float-left d-sm-flex align-items-sm-center"
    style="width: 100%;font-size: 13px;line-height: 20px;color: #6b747d;height: 20px;">* Date of birth:</span>
<p></p>
    
<select class="border rounded-0 form-control form-control-sm" type="text" name="xrbzm" required=""
    style="font-size: 12px;height: 2%;margin-bottom: 2%;width: 25%!important;float:left;" id="xrbzm1">
    <option value="" disabled="" selected="">Day</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>

</select>

<select class="border rounded-0 form-control form-control-sm" type="text" name="tzkrv" required=""
    style="font-size: 12px;height: 2%;margin-bottom: 2%;width: 45%!important;float:left;" id="tzkrv1">
    <option value="" disabled="" selected="">Month</option>
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">Septmeber</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">Dicember</option>
</select>

<select class="border rounded-0 form-control form-control-sm" type="text" name="eawfb" required=""
    style="font-size: 12px;height: 2%;margin-bottom: 2%;width: 30%!important;float:left;" id="eawfb1">
    <option value="" disabled="" selected="">Year</option>
    <option value="2005">2005</option>
    <option value="2004">2004</option>
    <option value="2003">2003</option>
    <option value="2002">2002</option>
    <option value="2001">2001</option>
    <option value="2000">2000</option>
    <option value="1999">1999</option>
    <option value="1998">1998</option>
</select>

</body>

This is the code I used to click the dropdown options:

day = 6
month = 'May'
Year = 1999

driver.find_elements_by_xpath("//*[@class='border rounded-0 form-control form-control-sm']").click()
driver.find_element_by_xpath("/option[text()='"+str(day)+"']").click()
driver.find_element_by_xpath("//input[@placeholder='day']").click()

Unfortunately none of those lines work.

How can I click the value options without using ID or NAME Selector?


Solution

  • To select the <option>s for day = 6, month = 'May' and Year = 1999 you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following locator strategies:

    Select(WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[contains(., 'Date of birth')]//following::select[1]")))).select_by_index(6)
    Select(WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[contains(., 'Date of birth')]//following::select[2]")))).select_by_visible_text('May')
    Select(WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//span[contains(., 'Date of birth')]//following::select[3]")))).select_by_value('1999')
    

    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
    from selenium.webdriver.support.ui import Select