This site requires JavaScript to be enabled

IncidentLookup using list
How can we help?

Solution Suggestions

Please enter your question to get suggestions.
Boolean Operators
OR or vertical bar symbol (|)
Finds a match if either the terms exist in a document (a union using sets).
Finds a match if both terms exist in a document (an intersection of sets).
NOT, minus (-), or exclamation point (!)
Excludes documents that contain the term after NOT (a difference of sets).
Asterisk (*)
The asterisk symbol performs a multi character wildcard search.
Percent sign (%)
The percent sign performs a single character wildcard search.
Quotation marks (")
Use quotation marks to search for an exact phrase with multiple terms.
For examples and more information look at our Knowledge Base: Advanced Search On The Support Portal

Steering HTML Date Pickers / Calendars without customization

This article explains how to dynamically steer custom HTML Date Pickers (Calendars) using standard Tosca functionalities. We will be using the YUI Simple Calendar for our example but the same concepts can be applied to any HTML Date Picker control.


HTML Date Pickers / Calendars are custom HTML controls that usually require complex navigations to select the intended year/month/day. These types of controls are always custom and not automatically identified by the TBox HTML engine. Therefore the typical course of action to handle date pickers would be to implement it as a custom control. For information on this, see the TBox API documentation.

However there is another option that does not require any development effort. We can dynamically steer date picker controls by using the standard Tosca functionalities that are readily available to us via Tosca Commander. Here are the steps to do this…



Part 1 - Creating the Module

Before we can create our automated test, we need to build our module…

Step 1

Open the browser to and identify the different parts of the Date Picker that we would need for our module.


Step 2

Scan the page via XScan and select the necessary controls via the Select on Screen feature. Then click Done.

Note: You do not need to select every single day. You only need to select one day control for your module. We will steer this dynamically in our test case.



Step 3

Back in the XScan window, analyze the identification properties of each control that was selected. For some of the controls, notice that the Id property is selected by default. However the Id in this case does not seem like a property that will stay stable on subsequent runs because it contains a lot of dynamically generated characters. The ClassName looks to be a better identification property. Let’s use this for each of our controls. Let’s also rename our controls for better readability.


Step 4

Notice that the Day control is not uniquely identified if you use the ClassName property as its identifier. Let’s analyze this some more…

We see that the ClassName for the Day is “calendar_col4 yui3-calendar-day”. If we look at the classnames of other “day” controls, we can see that the number “4” is not always consistent. We can also notice that sometimes there is additional text after the word “day”. Therefore let us use wildcards to take care of this. The ClassName then becomes “calendar_col* yui3-calendar-day*”.


But wait… the Day control is still not unique! Let’s select the InnerText and Visible properties to make it unique.


Now we run into another conundrum... this control will only identify day #6. We need to make the InnerText more dynamic. Let’s make it use a buffer! Replace the InnerText value to “{B[Day]}”. This allows us to dynamically determine the value of this property during runtime. Pretty neat!


Notice that the Day is again not unique. But this time it’s fine because we will determine the InnerText dynamically in our test case via the Day buffer.

Step 5

We are now ready to Save our module. Let’s go ahead and do that.



Part 2 - Creating the Test Case

Now that we have our module, let’s put together our test case…

Step 1

Create a new Test Case and use the TBox Set Buffer module to create the first test step. Let’s first buffer the Year, Month, and Day values that we want to select on the date picker.


Step 2

The first thing we need to figure out when interacting with the date picker is whether we need to navigate back to a previous month, go forward to a future month, or stay on the currently displayed month. This means we’ll need to compare the Input Month/Year versus the Displayed Month/Year. In order to do this, we will use the DateValue Excel function which converts a “Month Year” string into a serial number that will be easy to use for comparisons.

We will use the CALC expression along with the TC Set Buffer module to perform this conversion.


Step 3

Now let’s capture the Displayed “Month Year” string and perform the same DateValue conversion.


Step 4

We are now ready to determine whether we need to navigate to a past month or a future month. We will be using While Loops to perform this navigation. Let’s start with navigating to a future month.

In our While Loop, the Condition will use the TBox Evaluation Tool module to determine if InputDateValue is greater than DisplayedDateValue. While this condition passes, we will keep repeating the following steps:

  1. Click on “Next Month”.
  2. Buffer the updated “Month Year” string.
  3. Convert this “Month Year” string to a DateValue number using the same technique from Step 2.

This is what it looks like in Tosca.


Step 5

Let’s now create the While Loop for navigating to a past month. It should look almost exactly the same.


Step 6

The final test step is to click on the Day. Remember that the Day control is using a buffered InnerText property. This makes our step very simple. Just perform a standard {Click}.


Step 7

Now that we have completed all of our steps. Let’s make this as reusable as possible by converting it to a Reusable TestStepBlock complete with Business Parameters. The final product should look like this…


Attached is a subset which contains this full example (and more). Enjoy!


0 0

Erik Vanscyoc

Created: 2018-05-02 10:10:19

We are not able to import this file in Tosca, Any suggestions?


Rey Arthur Llenes

2018-06-15 19:49:44 , Updates: 1, Last Update: 2018-06-15 19:50:58

Hi Erik,

Info on how to import subset files are found here:

Make sure your Root node is checked out (if multi-user workspace). Once you import, a new folder will appear under the Root node of your project.

0 0

Rishi Harjani

Created: 2018-07-24 17:22:08

Thank you Rey for this useful knowledge base. I tried and implemented the same.

this is great...!

0 0

Naveen Kasukurthi

Created: 2019-05-03 08:25:15

Hello All,

Actually , i could not select day using select on Screen.

Any suggestions to continue without day selection

Rey Arthur Llenes

2019-05-07 16:40:16

You may need to make sure your Zoom and Display settings are set to 100% in order to make Select on Screen work properly. Refer to this KB article to do that:

0 0

Sukamini Joshi

Created: 2019-05-09 09:48:34

Hi Arthur,

I am having a similar calender in .NET app.

While scanning, I am able to follow all ur steps except one..where innertext needs to be updated to a buffer value.

In my calender..the day is not having any innertext property. But I have name and label and default name stating the complete calender date as Wednesday, May 08, 2019.


Can you advice how can i Scan the Day and use your logic?

Rey Arthur Llenes

2019-06-12 14:46:39

You should be able to use a buffer value for the "Name" or "Label" property the same way I used "InnerText" in the example.

0 0

Sri Vemuri

Created: 2020-04-22 18:03:51


I have calander which will open by clicking on text box associated with it. Can you suggest how to select date from calander and steering dynamically.




Tosca is the perfect solution

Optimize - Manage - Automate

Download Trial