Input has value

Checking the value existence

<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')

Partial value match

📺 Watch this recipe explained in the video Partial Value Match.

Let's say we know just a part of the value. Here is how we can confirm it:

<p>Full zip codes have 5 digits plus 4 digits</p>
<div>
  <span>From zip</span>
  <span id="from-zip">90210-0123</span>
</div>
<div>
  <span>To zip</span>
  <input
    id="to-zip"
    value="02203-3344"
    placeholder="Enter destination zipcode"
  />
</div>

We can confirm an element has partial text using the "include.text" / "contain" assertion

const fromZip = '90210'
cy.get('#from-zip')
  .should('include.text', fromZip)
  .and('contain', fromZip)

How do we confirm the know portion of the input element's value? By using the cy.invoke query followed by any "normal" Chai assertion against the string subject.

// the known value to confirm
const toZip = '02203'
// constructs a predicate function that returns
// true if the given string "x" starts with the string "s"
const startsWith = (s) => (x) => x.startsWith(s)
// confirm the input's value using several assertions
cy.get('#to-zip')
  .invoke('val')
  .should('include', '02203')
  // let's use a regular expression
  .and('match', /^\d{5}-\d{4}$/)
  // a regular expression with a known part
  .and('match', new RegExp(`^${toZip}-\\d{4}$`))
  // or a custom predicate
  .and('satisfy', startsWith('02203'))

If we really want to over-complicate our assertion, we could parse the zip+4 string into parts and confirm the first known part.

cy.get('#to-zip')
  .invoke('val')
  .invoke('split', '-')
  .should('have.length', 2)
  .its(0)
  .should('equal', toZip)