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