# Input has value

<input id="greeting" type="text" value="hello" />
<input id="empty" type="text" />
<!-- this input is filled 1 second after the start -->
<input id="dynamic" type="text" />
<script>
  setTimeout(() => {
    document.getElementById('dynamic').value = 'present'
  }, 1000)
</script>
input {
  display: block;
}

To confirm the input element has some value, we should first grab the value as a prop using have.prop assertion. This assertion yields the value of the property, and we can chain another assertion to confirm it.

// confirm the input has some value
cy.get('#greeting')
  .should('have.prop', 'value')
  // yields "hello"
  .should('not.be.empty')
// confirm the second input has an empty value
cy.get('#empty')
  .should('have.prop', 'value')
  // yields ""
  .should('be.empty')
// confirm dynamic input gets its value
// after some delay using command retries
cy.get('#dynamic')
  .should('have.prop', 'value')
  // yields "" at first, then yields "present"
  // after the application sets it
  .should('not.be.empty')