How to select a date from date picker calender in nightwatch javascript automation?

Question

I want to select a date from datepicker, that date is not static ie selecting same day, it should be dynamic in nature. ie should be able to select any past date including today.

Problem: After click on a field i get this calender, from calender i have to select a date. how to do it? preferable in Nightwatch js.

Answer 1

This is a very non-trivial question. I know of no "off the shelf" solution that you can just plug in to Nightwatch.

You're going to want to construct a javascript file that allows you to get the day of the month. but because it could be the last day of the month, or the last day of the year, you also may need to determine those, too.

Something like this to start:

const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
var monthShortNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
];
const dayNames = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", 
"Saturday", "Sunday"
];
var dayShortNames = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"
];

const d = new Date();
var month = monthNames[d.getMonth()];
var mmm = monthShortNames[d.getMonth()];
var today = new Date();
var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (24 * 60 * 60 * 1000));
var mm = today.getMonth()+1; // because January is 0.
var singleDigitDate = today.getDate();
var dd = today.getDate();
var ddnlz = today.getDate(); // single digit dates, no leading zero
var dayShortName = dayShortNames[d.getDay()]; // Mon, Tue, etc.
var mmt = tomorrow.getMonth()+1;
var dt = tomorrow.getDate();
var ddt = tomorrow.getDate();
var yyyy = today.getFullYear();
var yyyyt = tomorrow.getFullYear();
if ( dd<10 ){ dd='0'+dd } // if we need leading zeros for days 
if ( mm<10 ){ mm='0'+mm } // if we need leading zeros for months
if ( ddt<10 ){ ddt='0'+ddt } // if we need leading zeros for days 
if ( mmt<10 ){ mmt='0'+mmt } // if we need leading zeros for months

put that in /conf or otherwise make it available to your base-test-class.js

This is a whole lot easier to do if you always want to pick today. You'll want to use xpath selectors to pick the day that you want to click.

You will use XPATH to click on a date like, say you click //*[.='16'], where 16 is the date today.

If, say you want to pick tomorrow on the calendar, then things get more challenging.

You need to have a way to make sure tomorrow is not a new month/year. I was working on a project once where that came in handy, so I built that, but the code I wrote all stayed with the client. I seem to recall that there was an array with the count of days in for each month, and that I didn't bother solving for the leap year. In cases where you're clicking any day that is not TODAY, you'll need some if statements that check, "is it the last day of the year?" and is it the last day of the month?" and make the appropriate button presses to get to a location where select those dates (those up arrows and down arrows). Sorry that I don't have sample code for that.

This is, perhaps not the ready-made solution you want. I was unable to find a date-picker module when I was working with calendars and Nightwatch. Maybe you'll get lucky and someone has built and shared one...