How to select a option from a html select dropdown without any ID attribute using Selenium and Python
Question:
I am trying to select a value from a dropdown menu using the Selenium Select method but I am unable to correctly locate the right element as illustrated in other Stackoverflow posts as my element lacks an ID as in other Stackoverflow posts. I have tried using the Xpath, Class_Name and CSS_Selector as an alternative but I keep getting an error "Unable to locate element".
This is the HTML:
<select class="lf-simpelselect lf-bottom-margin" data-bind="options: activiteitenOptions, value: activiteit, optionsText: 'Naam', optionsValue: 'Id', visible: toonActiviteiten()" style=""><option value="0bdae2c9-6ebc-4396-b3bb-0e587f9bbe86">Latin Jam</option><option value="c18aef82-be4d-4881-ae96-28aa72161c17">Kiddo Swing 6-8 jr</option><option value="8cbe6618-68cd-47f1-8a79-29db71498292">Ballet </option><option value="8d03eb2f-02ea-434d-8520-30b2f02e18f1">Pilates</option><option value="30358ec5-9751-4b13-8514-4db7b541c540">Gold 40+</option><option value="b811c4be-703b-4193-8f60-57bdb574a60a">Feminine</option><option value="2c6b4f41-6953-4347-99b9-70c33f48da07">City Jam</option><option value="696ba3a2-a453-4550-9cbe-7a00d46dfb14">Dojo</option><option value="fc8b9e43-401f-4e38-8d0b-8afba5f1226b">Power Jam</option><option value="7192a0d5-65b1-43a0-80d6-987b90cf505c">Dans Mix 9 - 12 jr</option><option value="820cf6c6-c9a6-4759-939e-988c646a69f7">Barre Workout</option><option value="e9bfd01d-b183-483a-b809-b2d9dd62354d">Latin House 18+</option><option value="505e1c62-9e68-4569-a7ef-b6566ff1b56d">Afro</option><option value="e4899faa-969e-4953-af1f-bc7eba080bec">Hip Hop</option><option value="796f9e98-f54c-486c-bc62-e6a2e74a5f45">Contemporary Flow </option><option value="88845fb5-e1ab-418d-ba3c-ed1131821835">Modern</option><option value="cb7fa275-b034-4f04-8265-ef747fe73179">Dancehall</option></select>
The code of my try at using the Select() to change the value is as follows:
url = "https://prd.mylogifit.com/logifitweb/genericwidgetbyid.html?a=Touchee&widgetId=73f1f696-5063-4fb7-9a8d-c588ef149eb4"
browser = webdriver.Chrome(executable_path='./chromedriver')
browser.get(url)
# Select lesson type (afro)
lesson_droplist = Select(browser.find_element(By.CLASS_NAME, 'lf-simpelselect lf-bottom-margin'))
lesson_droplist.select_by_value("Afro")
How do I use the Select method to change the drop-down value from Hip-Hop to Afro?
Answers:
from selenium.webdriver.support.ui import Select
lesson_droplist = Select(driver.find_element(By.CLASS_NAME, "lf-simpelselect"))
lesson_droplist.select_by_visible_text("Afro")
You should select by visible text not value
If you want to select by value then
lesson_droplist= Select(driver.find_element(By.CLASS_NAME, "lf-simpelselect"))
lesson_droplist.select_by_value("505e1c62-9e68-4569-a7ef-b6566ff1b56d") #Afro's value
The Class name has more than one matches, that is why you are getting that error, try the below XPath:
from selenium.webdriver.support.select import Select
dropdown = Select(driver.find_element(By.XPATH, "(.//select[@class='lf-simpelselect lf-bottom-margin'])[2]"))
dropdown.select_by_visible_text("Afro")
You can use XPath with some solution for waiting. There are two option time library or WebDriverWait.
You can try this one for time libray:
import time
time.sleep(3)
dropdown = Select(browser.find_element(By.XPATH, "(.//select[@class='lf-simpelselect lf-bottom-margin'])[2]"))
dropdown.select_by_visible_text("Afro")
time.sleep(3)
text = browser.find_element(By.XPATH, "//div[@data-bind='text: lesOmschrijving()']").text
print(text)
You can try this for WebDriverWait(but its just wait for this XPath and you might be need another waiting for getting another text):
wait.until(EC.presence_of_element_located((By.XPATH, "(.//select[@class='lf-simpelselect lf-bottom-margin'])[2]")))
Generally, you need an wait to make sure the relevant elements are loaded in the browser.
To select the <option> with text as Pilates as the desired element is a dynamic element, you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following locator strategies:
-
Using CSS_SELECTOR:
driver.get("https://prd.mylogifit.com/logifitweb/genericwidgetbyid.html?a=Touchee&widgetId=73f1f696-5063-4fb7-9a8d-c588ef149eb4")
Select(WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "select.lf-simpelselect.lf-bottom-margin[data-bind*='activiteitenOptions']")))).select_by_visible_text('Pilates')
-
Using XPATH:
driver.get("https://prd.mylogifit.com/logifitweb/genericwidgetbyid.html?a=Touchee&widgetId=73f1f696-5063-4fb7-9a8d-c588ef149eb4")
Select(WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//select[@class='lf-simpelselect lf-bottom-margin' and contains(@data-bind, 'activiteitenOptions')]")))).select_by_visible_text('Pilates')
-
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
-
Browser snapshot:
References
You can find a couple of relevant discussions in:
I am trying to select a value from a dropdown menu using the Selenium Select method but I am unable to correctly locate the right element as illustrated in other Stackoverflow posts as my element lacks an ID as in other Stackoverflow posts. I have tried using the Xpath, Class_Name and CSS_Selector as an alternative but I keep getting an error "Unable to locate element".
This is the HTML:
<select class="lf-simpelselect lf-bottom-margin" data-bind="options: activiteitenOptions, value: activiteit, optionsText: 'Naam', optionsValue: 'Id', visible: toonActiviteiten()" style=""><option value="0bdae2c9-6ebc-4396-b3bb-0e587f9bbe86">Latin Jam</option><option value="c18aef82-be4d-4881-ae96-28aa72161c17">Kiddo Swing 6-8 jr</option><option value="8cbe6618-68cd-47f1-8a79-29db71498292">Ballet </option><option value="8d03eb2f-02ea-434d-8520-30b2f02e18f1">Pilates</option><option value="30358ec5-9751-4b13-8514-4db7b541c540">Gold 40+</option><option value="b811c4be-703b-4193-8f60-57bdb574a60a">Feminine</option><option value="2c6b4f41-6953-4347-99b9-70c33f48da07">City Jam</option><option value="696ba3a2-a453-4550-9cbe-7a00d46dfb14">Dojo</option><option value="fc8b9e43-401f-4e38-8d0b-8afba5f1226b">Power Jam</option><option value="7192a0d5-65b1-43a0-80d6-987b90cf505c">Dans Mix 9 - 12 jr</option><option value="820cf6c6-c9a6-4759-939e-988c646a69f7">Barre Workout</option><option value="e9bfd01d-b183-483a-b809-b2d9dd62354d">Latin House 18+</option><option value="505e1c62-9e68-4569-a7ef-b6566ff1b56d">Afro</option><option value="e4899faa-969e-4953-af1f-bc7eba080bec">Hip Hop</option><option value="796f9e98-f54c-486c-bc62-e6a2e74a5f45">Contemporary Flow </option><option value="88845fb5-e1ab-418d-ba3c-ed1131821835">Modern</option><option value="cb7fa275-b034-4f04-8265-ef747fe73179">Dancehall</option></select>
The code of my try at using the Select() to change the value is as follows:
url = "https://prd.mylogifit.com/logifitweb/genericwidgetbyid.html?a=Touchee&widgetId=73f1f696-5063-4fb7-9a8d-c588ef149eb4"
browser = webdriver.Chrome(executable_path='./chromedriver')
browser.get(url)
# Select lesson type (afro)
lesson_droplist = Select(browser.find_element(By.CLASS_NAME, 'lf-simpelselect lf-bottom-margin'))
lesson_droplist.select_by_value("Afro")
How do I use the Select method to change the drop-down value from Hip-Hop to Afro?
from selenium.webdriver.support.ui import Select
lesson_droplist = Select(driver.find_element(By.CLASS_NAME, "lf-simpelselect"))
lesson_droplist.select_by_visible_text("Afro")
You should select by visible text not value
If you want to select by value then
lesson_droplist= Select(driver.find_element(By.CLASS_NAME, "lf-simpelselect"))
lesson_droplist.select_by_value("505e1c62-9e68-4569-a7ef-b6566ff1b56d") #Afro's value
The Class name has more than one matches, that is why you are getting that error, try the below XPath:
from selenium.webdriver.support.select import Select
dropdown = Select(driver.find_element(By.XPATH, "(.//select[@class='lf-simpelselect lf-bottom-margin'])[2]"))
dropdown.select_by_visible_text("Afro")
You can use XPath with some solution for waiting. There are two option time library or WebDriverWait.
You can try this one for time libray:
import time
time.sleep(3)
dropdown = Select(browser.find_element(By.XPATH, "(.//select[@class='lf-simpelselect lf-bottom-margin'])[2]"))
dropdown.select_by_visible_text("Afro")
time.sleep(3)
text = browser.find_element(By.XPATH, "//div[@data-bind='text: lesOmschrijving()']").text
print(text)
You can try this for WebDriverWait(but its just wait for this XPath and you might be need another waiting for getting another text):
wait.until(EC.presence_of_element_located((By.XPATH, "(.//select[@class='lf-simpelselect lf-bottom-margin'])[2]")))
Generally, you need an wait to make sure the relevant elements are loaded in the browser.
To select the <option> with text as Pilates as the desired element is a dynamic element, you need to induce WebDriverWait for the element_to_be_clickable() and you can use either of the following locator strategies:
-
Using CSS_SELECTOR:
driver.get("https://prd.mylogifit.com/logifitweb/genericwidgetbyid.html?a=Touchee&widgetId=73f1f696-5063-4fb7-9a8d-c588ef149eb4") Select(WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "select.lf-simpelselect.lf-bottom-margin[data-bind*='activiteitenOptions']")))).select_by_visible_text('Pilates') -
Using XPATH:
driver.get("https://prd.mylogifit.com/logifitweb/genericwidgetbyid.html?a=Touchee&widgetId=73f1f696-5063-4fb7-9a8d-c588ef149eb4") Select(WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//select[@class='lf-simpelselect lf-bottom-margin' and contains(@data-bind, 'activiteitenOptions')]")))).select_by_visible_text('Pilates') -
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 -
Browser snapshot:
References
You can find a couple of relevant discussions in: