Selenium (nightwatch) setValue on Kendo DatePicker not working

Question

I'm trying to input a date string formatted mm/dd/yyyy into a Kendo React DatePicker control using nightwatch setValue. It seems that no matter what approach I take to select the control it always sets the cursor on the year portion first and typing then only fills in those four characters. (For example if I provide '05/06/2016', all I see typed into the input is 'mm/dd/0016' and month and day never update.)

The control seems to work fine in a normal scenario if I click with the mouse on the month field, the cursor will display there and if I type 2 characters, a / 2 more characters another / and then the last 4 the control is working properly. It just seems to be an issue with selenium selecting the control and DatePickers default behavior.

I've tried using browser.Key.LEFT_ARROW to see if I could move the cursor left twice first since the accessibility handling allows for it. I also tried calling clearValue() on the input first then typing from scratch but no success on either case.

I would rather not have select the date using the calendar control if I can avoid it.

Here's what my code looks like currently:

const consumerInfo = {
      birthMonth: "05",
      birthDay: "06",
      birthYear: "2016",
      birthDate: "05/06/2016",
    };

const datePickerSelector = '.myDatePicker';
const datePickerInputSelector = '.myDatePicker .k-input';

browser.waitForElementVisible(datePickerSelector, DEFAULT_WAIT_TIME)
      .waitForElementVisible(datePickerInputSelector, DEFAULT_WAIT_TIME)
      .setValue('.myDatePicker .k-input, [
        consumerInfo.birthYear,
        browser.Keys.LEFT_ARROW,
        consumerInfo.birthDay,
        browser.Keys.LEFT_ARROW,
        consumerInfo.birthMonth,
      ])
      .assert.value(
        datePickerInputSelector,
        consumerInfo.birthDate,
        `Birthdate is set to ${consumerInfo.birthDate}`
      );

Any suggestions are appreciated.

Answer 1

While not perfect I came up with a solution so hopefully it helps some others should this come up.

The approach ended up being roughly similar to what I proposed above but allowing more time between each operation. I added it into a util function that accepts the selector to target the input control with along with the month/day/year to fill in the control with. It's possible the time intervals can be reduced in places to less than 500ms but without more exhausted testing that was better than 1000ms (which worked) and 100ms (which inconsistently worked).

See below:

const toDatePickerInsertion = (browser, pickerInputSelector) => ({
  month,
  day,
  year,
}) => {
  return browser
    .click(pickerInputSelector)
    .pause(500)
    .keys(browser.Keys.LEFT_ARROW)
    .pause(500)
    .keys(browser.Keys.LEFT_ARROW)
    .pause(500)
    .keys(month)
    .pause(500)
    .keys(browser.Keys.RIGHT_ARROW)
    .pause(500)
    .keys(day)
    .pause(500)
    .keys(browser.Keys.RIGHT_ARROW)
    .pause(500)
    .keys(year);
};