Same Text

📺 You can watch this recipe explained in the video Confirm The Same Text In A Couple Of Elements.

Two text elements

Imagine you have two elements on the page. You do not know the exact text, but you know it should be the same.

<h2 id="one">a moth</h2>
<p>
  The next paragraph is about <span id="subject">a moth</span>
</p>

#subject {
  font-weight: bolder;
}

Any time you get something from the page, you can use it inside the cy.then(callback) function.

cy.get('h2#one')
  .invoke('text')
  .then(function (text) {
    cy.contains('#subject', text)
  })

Three elements

Once you get a value from the page, you can use it to check multiple elements. In the example below we pick a random <select> option, then confirm the application is showing the selected text in a couple of places.

<select id="fruit">
  <option value="apples">Apples</option>
  <option value="grapes">Grapes</option>
  <option value="bananas">Bananas</option>
</select>
<p>
  <div>You have selected <span id="selected-fruit"></span></div>
  <div><span id="name"></span> are delicious</div>
</p>
<script>
  document
    .getElementById('fruit')
    .addEventListener('change', (e) => {
      const fruit = e.target.value
      console.log('picked', fruit)
      document.getElementById('selected-fruit').innerText = fruit
      document.getElementById('name').innerText = fruit
    })
</script>

Let's select a random fruit option, then check the two places that should be updated.

cy.get('#fruit option')
  .should('have.length.greaterThan', 2)
  .mapInvoke('getAttribute', 'value')
  .print()
  .sample()
  .print('picked %o')
  .then(function (name) {
    // found the cy.select to be flaky
    cy.get('#fruit').select(name)
    cy.contains('#selected-fruit', name)
    cy.contains('#name', name)
  })

Tip: we are using several utility queries like cy.mapInvoke and cy.print from the cypress-map plugin.