Calendar tests

We will show you how to create a test that clicks on any date in the calendar. Here we will use the calendar on the reservation page of HOTEL PLANISPHERE (a sandbox to practice test automation) as an example. The basic test steps are the same, although detailed implementation methods vary depending on the implementation of the site (application) to be tested. If you have any questions about creating a calendar test, please contact MagicPod Support by clicking the Inquiry about this UI link.

Calendar to be tested

First half of the test steps for selecting a date one week later from the calendar.

Second half of the test steps for selecting a date one week later from the calendar.

How to create

1.Define the date variables with the “Date calculation” command

Here we will create test steps to select a date one week later from the calendar. Define the following five variables in the Date calculation command.

• this month: Date time: now, Date type: month, Date format: Numerical *Not apply zero padding
• today: Date time: now, Date type: Day of month, Date format: Numerical *Not apply zero padding
• last day of month: Date time: now, Date type: Last day of month, Date format: Numerical *Not apply zero padding
• month one week later: Date time: 1 week later, Date type: Month, Date format: Numerical *Not apply zero padding
• day one week later: Date time: 1 week later, Date type: Day of month, Date format: Numerical *Not apply zero padding

2.Show a calendar

Add a step to click on the “Check-in” input area to show a calendar.

3.Add a new locator

Select one of the date UI elements, duplicate it from the icon next to the locator, and add a new locator //a[text()=‘${1}’]. Here we are adding a locator using the variable ${1} so that the date value can be passed from the test step. Please see Add/Edit a locator for detailed instructions.

4.Click on any date using conditional branch

If today (the day of executing a test) is the last day of a month, the calendar for the next month will be displayed on this site. Since the date one week later is always present in the displayed calendar, you can click on the date as it is.

On the other hand, if the date one week later is the next month, you cannot select the date from the currently displayed calendar. Therefore, it is necessary to click the > icon to display the next month's calendar only when the date one week later is the next month. By using the conditional branching, you can separate the processing for "when the date one week later is in the current month" and “when the date one week later is in the next month". For more information on the use of conditional branching, please refer to Utilize conditional branching.

Commands to be used:

• If variable equals
  
  • If value of the variable today equals ${last day of month}
  • If value of the variable this month equals ${month one week later}
• Click
  • Set ${day one week later} in the step of clicking a date (newly added locator in the procedure3)
• Otherwise
• End branch