JQuery Dropdown

In previous section, we have discussed about the Select dropdown which has select tag in DOM and how to select the dropdown value for Select Dropdown in Selenium Python. There are some dropdown which has no tag called select like React dropdown, Angular dropdown or JQuery dropdown. Now in this section, we will discuss more about the JQuery Dropdown.

Objective:

  • JQuery Dropdown
  • Test Scenarios
  • How to handle JQuery Dropdown in Selenium Python

JQuery Dropdown:

To understand this more, go to link. (https://www.jqueryscript.net/demo/Drop-Down-Combo-Tree/).

These dropdowns are not simple dropdown. They are little complex. If you inspect element, then you can see that there is not select tag for this dropdown. So we cannot use Select() to select the dropdown value. So Let’s discuss how to handle this scenario with an Example.

For this we need to write the generic function in such a way that if user is passing only one choice then user should be able to select only once choice. If user will pass multiple choices then he/ she should be able to select multiple choices. In another scenario if user want to select all the choice then he should be able to select. This is very common interview question now a days and it is very important.

from selenium import webdriver
from selenium.webdriver.common.by import By
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.support.ui import Select
import time


driver = webdriver.Chrome(ChromeDriverManager().install())
driver.implicitly_wait(10)
driver.get("https://www.jqueryscript.net/demo/Drop-Down-Combo-Tree/")
time.sleep(5)
driver.find_element(By.ID, 'justAnInputBox').click()
time.sleep(5)
list_drp=driver.find_elements(By.CSS_SELECTOR, 'span.comboTreeItemTitle')

for ld in list_drp:
    print(ld.text)
    if(ld.text == 'choice 2 2'):
        ld.click()
        break

Explanation:

First you need to click on the Dropdown field. To click you need to find the element id and apply click() on it. It will expand the dropdown, Here you can see that there is ul tag and inside that li tag are binding with the dropdown value. Inside every li, there is span tag and inside span there is input tag which has the text of the dropdown.  So our target is to collect all span and then will check the text. If the text is matched then will click on it.   “driver.find_elements(By.CSS_SELECTOR,’span.comboTreeItemTitle’)” will return the all span element where the class is comboTreeItemTitle’ and store in reference variable.

 Then we apply a look and click on the dropdown value if it matches with the text.

Now what we will do if we need to click multiple values. Do we need to write multiple if condition. This is not a good approach. For this we need a generic function and we will pass the argument to the function.

from selenium import webdriver
from selenium.webdriver.common.by import By
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.support.ui import Select
import time


def list_value(drp_down, value):
    for ld in drp_down:
        print(ld.text)
        if (ld.text == value):
            ld.click()
            break


driver = webdriver.Chrome(ChromeDriverManager().install())
driver.implicitly_wait(10)
driver.get("https://www.jqueryscript.net/demo/Drop-Down-Combo-Tree/")
time.sleep(5)
driver.find_element(By.ID, 'justAnInputBox').click()
time.sleep(5)
list_drp=driver.find_elements(By.CSS_SELECTOR, 'span.comboTreeItemTitle')
list_value(list_drp,'choice 2 2' )
list_value(list_drp,'choice 2 1' )
list_value(list_drp,'choice 1' )

Explanation:

From the above example, you an notice that we have created a generic function named list_value() which takes 2 argument which are drp_down element and other is dropdown value to be selected. To call the function we will pass these two argument so that corresponding value will be selected. If you want to select 3 values then you can call the same function 3 times with different value to be selected.

This is ok if you need to choose less number of value for multi select dropdown. If you need to click 10 choices then in this process you need to call the same method 10 times which is not a good option. So we need to write a method to solve this problem . I will give a list of value which need to be selected and function will iterate these to select multi select Dropdown. In this way, no need to call the method again and again.

from selenium import webdriver
from selenium.webdriver.common.by import By
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.support.ui import Select
import time


def list_value(drp_down, value):
    for ld in drp_down:
        print(ld.text)
        for k in range(len(value)):
            if (ld.text == value[k]):
                ld.click()
                break


driver = webdriver.Chrome(ChromeDriverManager().install())
driver.implicitly_wait(10)
driver.get("https://www.jqueryscript.net/demo/Drop-Down-Combo-Tree/")
time.sleep(5)
driver.find_element(By.ID, 'justAnInputBox').click()
time.sleep(5)
list_drp=driver.find_elements(By.CSS_SELECTOR, 'span.comboTreeItemTitle')

value_list = ['choice 2 1', 'choice 2', 'choice 1']
list_value(list_drp,value_list)

Output:

Summary:

  • There is no select tag for JQuery Dropdown. So you can not apply select() to handle dropdown in Selenium Python.
  • You need to click on the Dropdown field. To click you need to find the element id and apply click() on it. It will expand the dropdown.
  • For Multiselect, You will give a list of value which need to be selected and function will iterate these to select multi select Dropdown.

Now we have learnt about the JQuery Dropdown how to select single and multiple value in JQuey Multi select dropdown in Selenium Python. In next section, we ill discuss about how to move to particular element in Selenium Python.

Leave a Reply

Your email address will not be published. Required fields are marked *