1. Introduction #

It is a common requirement to set date values on the website. However, there are many component libraries with different frameworks. So let us look at how Clicknium implements date-related 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 Calendar #

(1). jQueryUI Calendar​：The UI repository is based on jQuery. For more information, please refer to here.
(2). Ant Design​: The UI repository is 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

3. Automate Calendar​ #

3.1 JqueryUI Calendar #

With the Clicknium recorder, the component elements recorded the page.
Clicknium provides an excellent recording.

For more information, please refer to Clicknium Recorder.Here is the content recorded below.

Three parts of “TO” are recorded the same way as “FROM”.

Change the locator of the date. As the automatic recording is generated according to rows and columns of the table where the date is located, the rows and columns of the dates in each month are different and cannot be accurately located. Here we change the date element to be located by sinfo and index.

Before:

When the locator is changed, we write the code below.

from clicknium import clicknium, ui, locator

clicknium.chrome.open("https://jqueryui.com/datepicker/#date-range")

ui(locator.chrome.jqueryui.text_from).set_focus()
ui(locator.chrome.jqueryui.select_from).select_item("Jan")
ui(locator.chrome.jqueryui.a_1_from).click()

ui(locator.chrome.jqueryui.text_to).set_focus()
ui(locator.chrome.jqueryui.select_to).select_item("Dec")
ui(locator.chrome.jqueryui.a_31_to).click()

3.2 Ant Design​ #

Step1 : Click the input box to pop up the date picker.
Step2: Compare the input values for the year. If they are not the same, adjust the input values to the next year or last year. Same for the month.
Step3 : When the year and the month are the same, find and click the element of the day.With the Clicknium recorder, the component elements operated in recording the page.

Step4 : Change “text.locator”. The index needs to be checked, as there are several Examples on the page.
Step5 : Change the locators present for year, month and day.
Step6 : Locate year and month elements by the class attribute instead of the sInfo.
Step7 : Locate the day element by the variable day instead of sInfo.

After changing 

Write the code below.

from clicknium import clicknium, ui, locator

# Input
year = '2010'
mouth = 'Jan'
day = '1'

# The month corresponding to the date control
months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

# Open the page
clicknium.chrome.open("https://ant.design/components/date-picker/")

# Click the date input
ui(locator.chrome.ant.text).mouse_down()

# Compare the year. If not the same, adjust to the next year or last year by clicking the button until they are the same.
locator_year = ui(locator.chrome.ant.button_year)
current_year = locator_year.get_property(name="sInfo")

while year != current_year:
if year > current_year:
ui(locator.chrome.ant.button_year_next).click()
else:
ui(locator.chrome.ant.button_year_pre).click()
current_year = locator_year.get_property(name="sInfo")

# Compare the month. If not the same, adjust to the next month or last month by clicking the button until they are the same.
locator_mouth = ui(locator.chrome.ant.button_mouth)
current_mouth = locator_mouth.get_property(name="sInfo")
current_mouth_index = months.index(current_mouth)
mouth_index = months.index(mouth)

while current_mouth_index != mouth_index:
if mouth_index > current_mouth_index:
ui(locator.chrome.ant.button_mouth_next).click()
else:
ui(locator.chrome.ant.button_mouth_pre).click()
current_mouth = locator_mouth.get_property(name="sInfo")
current_mouth_index = months.index(current_mouth)

# locate the date element with the date variable and click it.
ui(locator.chrome.ant.div_day, {"day": day }).click()