Input element value

To get the text of an element, you invoke the text() method provided by jQuery.

<p id="name">Joe Smith</p>

Joe Smith

// yields jQuery object
cy.get('#name')
  // calls the jQuery method "text()"
  .invoke('text')
  .should('equal', 'Joe Smith')

A text input

If you want to get a value from an input element (text or number), you need to invoke the jQuery method val()

<input
  type="text"
  name="firstName"
  placeholder="Enter your first name"
/>

// yields jQuery object
cy.get('[name=firstName]')
  // calls the jQuery method "val()"
  .invoke('val')
  // the value is an empty string at first
  .should('equal', '')
// enter the first name and confirm
cy.get('[name=firstName]').type('Anna')
cy.get('[name=firstName]').invoke('val').should('equal', 'Anna')

You can check a value of an input element using the built-in Chai-jQuery assertion "have.value".

cy.get('[name=firstName]').should('have.value', 'Anna')

A number input

<input
  type="number"
  name="quantity"
  placeholder="Enter the number of items"
/>

// yields jQuery object
cy.get('[name=quantity]')
  // calls the jQuery method "val()"
  .invoke('val')
  // the value is an empty string at first
  .should('equal', '')
// enter the first name and confirm
cy.get('[name=quantity]').type('42')
// note: even if the input element is numeric,
// the value "val()" yields is a string
cy.get('[name=quantity]').invoke('val').should('equal', '42')

You can check a value of an input element using the built-in Chai-jQuery assertion "have.value".

// compare as a string
cy.get('[name=quantity]').should('have.value', '42')
// Chai-jQuery assertion also casts a number automatically
cy.get('[name=quantity]').should('have.value', 42)

Nested element

To improve the retry-ability (opens new window) of your tests, do not split accessing the element into multiple querying commands (if possible).

<section id="nested">
  <form name="info">
    <input type="text" name="firstName" value="Joe" />
  </form>
</section>

// Might be ok, but might lead to flaky tests
// if the application re-renders the form
cy.get('#nested')
  .find('[name=info]')
  .find('[name=firstName]')
  .should('have.value', 'Joe')

Instead of using separate commands cy.get + cy.find to locate the element, merge the CSS selector into a single one:

// Recommended: merge the queries into one cy.get
cy.get('#nested [name=info] [name=firstName]').should(
  'have.value',
  'Joe',
)