TESTEROPS

A pragmatic approach to QA and OPS

Handling Dropdowns

Dropdowns are an inherent part of any web form that is out there on internet. If you have to select  from a list of available options, then the best way to implement that is a dropdown. A very common example would be selected of the year of birth, ir you day or the month. You would have seen a scrollable dropdown which allows you selection of a single element out from a list of various other elements.

A dropdown is not a single element per-se. It actually is an assembly or a class of elements. For example you can say that the country is the class, and the values available in dropdown are it’s various smaller objects.

To work with a dropdown, first you need to select or find the main element group and then go inside further and select the sub-element that you want to select for.

Selecting A DropDown

Since a dropdown has many options, so it is important that we select something separately.  Selenium Python API provides the Select  class, which allows you to select the element of your choice.

You can read about in detail here.

Note : The Select class only works with tags which have select tags.

  • Using the Index of Dropdown
  • Using the Value of Dropdown
  • Using the Text of Dropdown

Using Index of Dropdown :

If the dropdown has an “index” attribute, then we can use that index to select a particular option. You need to be careful while using this way, because it is not un-common to have the index start at 0, and so if you are thinking that index works similarly as country, then you might be mistaken.

We can use the select_by_index( ) method to select an option using the
index attribute.

for example


s1= Select(driver.find_element_by_id('id_of_element'))

s1.select_by_index(5)

Using Value of Dropdown :

If the html mark-up defines an option tag, then you can use the value matching the argument. Suppose the html for dropdown is like this

<option value="foo">Bar1</option>

We can use the select_by_value( ) method to select an option using the
index attribute.

for example


s2= Select(driver.find_element_by_id('id_of_element'))

s2.select_by_value('foo')

Using Text of Dropdown :

Probably the easiest way of doing it. You have to match the text which is displayed in the drop down.

for example


s3= Select(driver.find_element_by_id('id_of_element'))

s3.select_by_visible_text('element_text')

Now, how about removing our selections.

De-Selecting Options From Dropdown

Now, what if you want to de-select the option that you have just select? You can achieve this too, using the following methods:

  • deselect_all( )

Clear all the selected options. This is only applicable in case of multiple selections. If you have a multiple selection box, then you can use this to de-select any selected option.

If you try to use this in case of single selection, this will throw a NotImplementedError exception.

  • deselect_by_index( )

Clear the selected option using the “index” attribute. This is opposite of the select_by_index( ) method.

  • deselect_by_value( )

Clear the selected option using the value of the option. This is the opposite of the select_by_value( ) method

  • deselect_by_visible_text( )

Clear the selected option using the text of the option. This is the opposite of select_by_visible_text( ) method

Here is a simple program to select “Europe” from the drop down at the AUT.

__author__ = 'rahul'

import unittest
from selenium import webdriver
from selenium.webdriver.support.select import Select


class Drpdowm(unittest.TestCase):

    def setUp(self):
        self.driver = webdriver.Firefox()

    def test_drpdown(self):
        driver = self.driver
        driver.maximize_window()
        driver.get('http://www.toolsqa.com/automation-practice-form/')

        s1=Select(driver.find_element_by_id('continents'))

        print(s1.options)
        

        for opt in s1.options:
            s1.select_by_visible_text('Europe')

    def tearDown(self):
        self.driver.quit()





if __name__ == '__main__':
    unittest.main()

11 thoughts on “Handling Dropdowns

  1. I am trying to handle a dropdown menu (using Python) on this website https://patents.google.com/advanced
    At the bottom left, there is a dropdown called Patent Office. There are no select tags on this dropdown, just divs. I get the error message that Select only works on select elements, not divs. So, how do I select a country from this dropdown?
    I also tried find_element_by_xpath and then .click(). However, the countries are not clickable.
    Any suggestions?

    Like

    1. self.driver.find_element_by_xpath(“//span[text()=’Patent Office’]”).click()
      self.driver.find_element_by_xpath(“//div[text()=’WO’]”).click()

      Liked by 1 person

  2. I have problem, suppose if i want to choose any options which is clickable in the dropdown. In this case how will i choose the option ? In this case i’m not mentioning any properties (class, id etc). In this case under the drop down there might be some 5 options, and first 3 options are disabled and user cannot able to select it manually as well. But the 4th and 5th options are clickable and i want to select the 4th or 5th options, then how can i choose it from a dynamically updating fields.

    Like

    1. In this case , you can get the elements in a list who are selectable and then click on any index that you want to. Now which elements are selectable will be based on a css property (visibility or display) or via certain class. You need to check the page DOM or if possible paste here.

      Like

Leave a Reply to Libin George Cancel 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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: