Enter value into the form

Imagine we have a form that shows the available money balance. The user can enter up to that amount into the input field (for example to transfer some money out of the account). Let's write a test for it.

📺 Watch this example explained in the video Enter The Balance Value Into The Input Fieldopen in new window.

table {
  padding: 1rem;
  margin-bottom: 1rem;
table td {
  padding-right: 1rem;
table td:nth-child(2) {
  font-weight: bold;
  float: right;
        <td>Available balance</td>
        <td>Last deposit</td>
        <td>Last withdrawal</td>
    placeholder="transfer amount"

Our test is less than optimal. We do not know the available balance, thus we need to read it from the table. Since there are no good test selectorsopen in new window, we will use text and

// find the row that includes the balance text
// and then find a child TD cell with "$"
cy.contains('tr', 'Available balance')
  .contains('td', '$') // yields jQuery object
  .invoke('text') // yields its text
  .invoke('replace', '$', '') // removes "$" character
  .then(parseFloat) // yields a number
  // confirm the balance is reasonable
  .should('be.within', 1, 10_000)
  .then((balance) => {
    // now we can type this balance into the input field

Tip: a much better test would know exactly the balance shown on the page, and would enter it without using cy.then callbacks.

cy.contains('tr', 'Available balance').contains('td', '$800')

Tip 2: if you find using cy.then confusing, you might like my plugin cypress-aliasesopen in new window useful.