All about automating Date Pickers and Calendar controls using Virtuoso

About Article:

This article will cover how you can achieve the following:

1. Choosing the appropriate date from a calendar when there are several choices.
2. Writing directly date in the text input.
3. How to automate the native Date Picker using Virtuoso.

Description:
To select the correct date when there are two months available, the user needs to first ensure they have selected the correct month. Once they have selected the correct month, they can then select the date. This process ensures that the correct date is selected for the correct month, effectively differentiating between dates in the two months.

Solution:

We can choose the date we want by locating the month and date, then clicking on the desired date.

Example 1: If we want to select the 24th October from the calendar shown below



Please follow the below NLP’s to select the date from the calendar

1. Look for element “October” on page

This step will look for the desired month on the Page, in this case we look for October. 
2. Look for element “24” on page
This step will search for the desired day on the page close to the month mentioned above. In this case, we need the 24th day.

3. Click on bottom “24”

This step will click on the date which is recently looked for.

Please refer the below screenshot for the NLP steps to automate the above use case in Virtuoso

Note: You can store the values of Month and Date in the Test data table variables and use the variable name for best practices., please refer to the screenshot for the steps with the variable name.

Example 2: If we want to enter the date directly in text input of the calendar shown below

Note:   

• Interacting with native date picker interfaces is not possible via Virtuoso.
• However, this is not a major concern as the testing of these interfaces is typically handled by the browser's vendor.
• In these situations, it should be possible to input the dates via the text input associated with the date picker.