In Web Automation, "date picker" elements can be tricky to automate depending on the page's structure.

In the following use-case, we demonstrate a method with Javascript on a page that has table cells (<td> tags) with not-unique attribute values.

The use-case

Pick yesterday's date from the left table (December 2019).

Possible approaches

  • Target the correct <td> via the ":contains("")" method.
    The flaw here is that a "contains:("3")", for instance, can match "3", "13", "23", "30", "31".
    Hence, this approach is not reliable.

  • Target the correct <td> via its "InnerText" property.
    The flaw here is that the table can contain multiple <td> tags that have the same InnerText, such as "25". Hence, this approach is not reliable either.

  • Target the needed <td> via its "InnerText" property, after locating the first "day 1 <td>" for the corresponding month.
    It is important to note that if our current date is "1" and also "1" is the very first cell in the table, then we would need to implement an "if conditional" (not included below) prior to executing the below script, as "yesterday" corresponds to the last cell of the previous month in this case. The month's switch could be performed via the relevant arrow-button.

Datepicker as <input> tag

In case the datepicker element is a text field (<input> tag), it can be populated directly via the following methods.

  • The "Populate Text Field on Web Page" Action.
  • The "Execute Javascript Function on Web Page" Action, by using the below command.
    document.querySelector('Our Selector').value = "YYXX"