Python & Selenium Webdriver :: working with dropdown options inside a select tag

During my Python & Selenium self-learning I came across a blocker while trying to access and select elements of a drop down.

Problem statement – 

As a traveler, I want to select Business class for my flight on the Air NewZealand website , just to remind myself how atrociously expensive flying business class is .

Initial analysis – 

Using Chrome Dev tools, I inspected the drop down and was expecting the various drop down entries to each have a unique id/index , so that I can select “business class” directly.

But lo-behold, the drop-down element is a <select> HTML that I had not worked with before. And each option was a <option> tag nested under the <select> tag.

Approach – 

Potential ways I thought to solve this –

  1. Find the drop down using it’s id ( driver.find_element_by_id  ) and find a way to iterate through the options based on their text . Likely to be brittle if the option text changes
  2. Directly find the XPath of the option that I want and click it .

On further googling however, I found that the Selenium library offered an out of the box class to handle <select> web elements ! 🙂

https://seleniumhq.github.io/selenium/docs/api/py/webdriver_support/selenium.webdriver.support.select.html

This class has some handy dandy methods to retrieve all the options under the select tag , select them by value or index etc.

options
Returns a list of all options belonging to this select tag
select_by_index(index)
Select the option at the given index. This is done by examing the “index” attribute of an element, and not merely by counting.

Args :
  • index – The option at this index will be selected

throws NoSuchElementException If there is no option with specisied index in SELECT

select_by_value(value)
Select all options that have a value matching the argument. That is, when given “foo” this would select an option like:

<option value=”foo”>Bar</option>

Args :
  • value – The value to match against

throws NoSuchElementException If there is no option with specisied value in SELECT

My solution – 

Here is a simple Python script the uses the Select class and some of it’s method to solve the problem above.


from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.common.exceptions import NoSuchElementException
from selenium.common.exceptions import TimeoutException
import time
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.select import Select
# for easy future changes and code maintainbility i have added all the locators and parameters like username/password at the top of the test
driver = webdriver.Chrome()
CONTINUE_BUTTON = (By.XPATH,'//*[@id="cms-search-panel-container"]/div/div/div/form/div[3]/div/button')
FLIGHT_CLASS_DROPDOWN = (By.ID,'serviceclass')
FLIGHT_CLASS_NAME = 'BUSINESS'
URL = 'https://www.airnewzealand.co.nz/home&#39;
class AirNZ_flight_class:
def verify_flight_class_dropdown_value(self):
driver.maximize_window()
driver.get(URL)
# wait for the continue button to appear
continue_button = WebDriverWait(driver,10).until(EC.presence_of_element_located(CONTINUE_BUTTON))
continue_button.click()
# wait for the fligh class dropdown to appear
flight_class_dropdown = WebDriverWait(driver,10).until(EC.presence_of_element_located(FLIGHT_CLASS_DROPDOWN))
#select the drop down using the Select class imported from from selenium.webdriver.support.select
select = Select(flight_class_dropdown)
try:
# select an option from the drop down based on a value, i did not go for a index in case the index changes due to addition or removal of entries
select.select_by_value(FLIGHT_CLASS_NAME)
except(NoSuchElementException,TimeoutException) as e:
# fail the Test if the element can not be found or timeout occurs
print('Test failed, the flight class drop down could not be found ')
finally:
driver.quit()
test = AirNZ_flight_class()
test.verify_flight_class_dropdown_value()

view raw

selenium.py

hosted with ❤ by GitHub

One thought on “Python & Selenium Webdriver :: working with dropdown options inside a select tag

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s