Pressing Enter on a date input in Cypress

Question

I have an app with some input fields that I'm trying to automate. The gist of these fields is that I should be able to double click a field, type in a new value, then press Enter to submit that value, which sends a PUT request and also closes the input field. This works for any input type except date.

So far I've tried:

• Using cy.type('{enter}'). This gives Typing into a date input with cy.type() requires a valid date in the format 'yyyy-MM-dd'. You passed: {enter}

• Using cy.trigger() to send out a keydown event for the enter key. This works, as in it closes the input field successfully but it somehow doesn't send the PUT request.

• Pressing enter on the parent Element. Same as using cy.trigger()

Strangely enough, manually opening the input field myself, typing a date and pressing enter will send the request just fine. It seems to me like there's some issue with programmatically pressing enter to submit the field without Cypress interpreting this as my attempt to actually type an invalid character into the date field. The docs do specifically say that no special characters are allowed in a date field.

Can't post any code as this is corporate.

Answer 1

I have tried to let it work, but it simply can't be done at the moment. Something like this should work:

it.only('test', function () {
    cy.visit('https://www.html5tutorial.info/html5-date.php')
    cy.get('input')
      .type('2009-12-12')
      .type('{enter}')
  })

But it doesn't so I started to dig into the pile of issues and found this one: https://github.com/cypress-io/cypress/issues/3405 . It is about a different input type, but I believe it is related to your problem.