1. Introduction​ #

Selecting an item from a list on a web page is a common requirement, but with different frameworks and component libraries, it can be tricky to figure out how to implement select-related operations. In this guide, we’ll show you how Clicknium handles these operations in various web UI frameworks.

Note: For more about the installation and the tutorial of Clicknium Automation, please refer to here.

2. Types of Select Items #

There are two main types of UI controls for selecting items from a list:

(1) HTML Select tag​
The Select HTML tag represents a control that provides a menu of options.

(2) Ant Design​
Ant Design is a UI repository based on React that provides a variety of UI components, including a dropdown. For more information, please refer to here.

Note: The Web Recorder in Clicknium requires a browser extension except IE. For more about the installation, please refer to Clicknium browser plugin

3. Scenario Use Case #

3.1 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")

3.2 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()