Setting time on Time Picker using WDIO

Lets create time first as a String:

let options = {  
    weekday: "long", year: "numeric", month: "short",  
    day: "numeric", hour: "2-digit", minute: "2-digit" ,
    timeZone: 'America/Phoenix'
    }; 
let date = new Date();
date = new Date(date.getTime() + minutes*60000);
let time = ((date.toLocaleTimeString("en-us", options)).split(','))[3];

This creates time in the format : HH:MM AM

This below picture shows a native time picker that uses type=”time” in the DOM element.

Ref : https://mui.com/x/react-date-pickers/getting-started/#native-pickers

To set the value of time in this time picker we can directly use setValue(time). Easy…..?

await browser.$('#id').setValue("07:30 AM");

But there is a catch. Wonder what?

When you try to set the time value on the input field, it does not set the the AM/PM. It is coz there is no space between the minutes and AM/PM.

So the counter this we will have to remove the space while entering the value of the time.

let myTime = "07:30 AM"
await browser.$("#id").setValue(myTime.replace(" ", ""));

Voila, isn’t that simple.

Not all solutions are complicated. You just have to look closely.

Keep Automating…