Skip to main content

Date Pickers

Automating date pickers can be challenging due to their dynamic nature and varying implementations across different web applications. DevAssure provides robust features to handle date pickers effectively in your test automation scripts.

There are multiple ways to interact with date pickers using DevAssure:

Input the date directly on the text field of the date picker component

Input the date

Choose the month using prev and next navigators

This approach is useful when the date picker does not allow direct input or when you want to simulate user interactions more closely.

This would involve the following steps:

Create a function to convert the month to an integer

const monthNames = {
"January": 0,
"February": 1,
"March": 2,
"April": 3,
"May": 4,
"June": 5,
"July": 6,
"August": 7,
"September": 8,
"October": 9,
"November": 10,
"December": 11
};

const monthInteger = monthNames[month];

Here, the variable month is the name of the month you want to select (e.g., "January", "February", etc.), and monthInteger will hold the corresponding integer value (0 for January, 1 for February, etc.).

Here's a sample screenshot demonstrating the use of this code in DevAssure:

Function to convert Month to Integer

Learn more about Advanced Code Blocks

Based on the current month, click on the prev or next buttons to select the desired month

You can use the following logic to determine whether to click the "prev" or "next" button:

let diff = Number(currentMonthInteger) - Number(monthInteger);

if (diff < 0) {
let count = diff * -1;
for (let i = 0; i < count; i++) {
// Click on next
}
}

if (diff > 0) {
for (let i = 0; i < diff; i++) {
// Click on prev
}
}

Here's a sample screenshot demonstrating the use of this code in DevAssure:

Function to select month

The complete flow of automating a date picker using DevAssure

Date Picker complete flow automated with DevAssure

Choose the month and year from a dropdown

Choose the month and year from a dropdown