Cypress examples (v13.2.0)

Input element value

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

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

// 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 textarea

<textarea
  id="quote"
  placeholder="Enter your favorite quote"
></textarea>

const quote =
  'It was the best of times, it was the worst of times'
cy.get('#quote')
  // initially the textarea is empty
  .should('have.value', '')
  .type(quote)
  .should('have.value', quote)

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-abilityopen in 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',
)