Input Element Clears NaN Value

<input id="count" placeholder="Enter a number" />
  const el = document.getElementById('count')
  el.addEventListener('change', function () {
    const x = parseInt(el.value)
    if (isNaN(x)) {
      setTimeout(function () {
        el.value = ''
      }, 1000)

Let's confirm the input clears an invalid value after about one second.

  // after 900ms the value is still "Hello"
  .should('have.value', 'Hello')
// the value is cleared in the next 200ms
cy.get('#count', { timeout: 200 })
  .should('have.value', '')
  // if we enter a valid number, it stays
  .should('have.value', '123')

Watch this recipe in the video The Input Element Clears Invalid Values After 1 Secondopen in new window.

We can also write this test without cy.waitopen in new window command. We can precisely control the application's clock using the cy.clockopen in new window and the cy.tickopen in new window commands.

// freeze the application's clock
// advance the clock instantly by 990ms
// the wrong value still is present
cy.get('#count').should('have.value', 'wrong')
// cross the 1 second mark by advancing
// the application's clock another 20ms
// and the input immediately is cleared
// since the application "thinks" that 1010ms have passed
cy.get('#count', { timeout: 0 }).should('have.value', '')

See also