How to Set Values for Select/Dropdown list
Introduction
It is a common requirement to select an item from a list on a web page. However, there are many component libraries with different frameworks. So let us look at how Clicknium implements select-related operations in various web UI frameworks.
For more about the installation and the tutorial of Clicknium Automation, please refer to here.
The Types of Select/Dropdown UI Control
HTML Select tag
The Select HTML tag represents a control that provides a menu of options.
Ant Design
The UI repository based on React. For more information, please refer to here.
- Notes: The Web Recorder in Clicknium requires a browser extension except IE. For more about the installation, please refer to Clicknium browser plugin
Automate select/dropdown with Clicknium
HTML Select tag
With the Clicknium recorder, you can capture an UI element easily. Clicknium provides an excellent recording experience. For more information, please refer to Clicknium Recorder.
Sample site: https://www.w3docs.com/learn-html/html-select-tag.html
- The following is the content that should be captured by the recorder.
Go to the locator page and change the attribute of the select. Here we use ancestorClass and index to target the element.
Use the following code to select Git option.
from clicknium import clicknium, ui, locator
clicknium.chrome.open("https://www.w3docs.com/learn-html/html-select-tag.html")
ui(locator.chrome.w3docs.select).select_item("Git")
Ant Design
Sample site: https://ant.design/components/select/
Capture below elements by Clicknium Recorder.
Change the locator attributes of the option. Uncheck className of ancestorClass.
Use the following code to select Jack option.
from clicknium import clicknium, ui, locator
clicknium.chrome.open("https://ant.design/components/select/")
ui(locator.chrome.ant.select).click()
ui(locator.chrome.ant.option_jack).click()