Input Element Clears NaN Value

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

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

cy.get('#count')
  .type('Hello{enter}')
  // after 900ms the value is still "Hello"
  .wait(900)
  .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
  .type('123{enter}')
  .wait(1100)
  .should('have.value', '123')

Watch this recipe in the video The Input Element Clears Invalid Values After 1 Second (opens new window).

We can also write this test without cy.wait (opens new window) command. We can precisely control the application's clock using the cy.clock (opens new window) and the cy.tick (opens new window) commands.

// freeze the application's clock
cy.clock()
cy.get('#count').clear().type('wrong{enter}')
// advance the clock instantly by 990ms
cy.tick(990)
// 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
cy.tick(20)
// and the input immediately is cleared
// since the application "thinks" that 1010ms have passed
cy.get('#count', { timeout: 0 }).should('have.value', '')

See also

• Clear Input Field Flake