# Click Each Item

Let's say we have a list of items, and there is a button next to each item. We want to click on each item's button and then check the total number of clicks against the value displayed by the application.

<ul>
  <li><button></button> Apples</li>
  <li><button></button> Kiwi</li>
  <li><button></button> Grapes</li>
  <li><button></button> Melon</li>
</ul>
<output id="count">0</output>
<script>
  document.querySelectorAll('button').forEach(function (button) {
    button.addEventListener('click', function () {
      const output = document.getElementById('count')
      const n = parseInt(output.innerText)
      output.innerText = String(n + 1)
    })
  })
</script>
  • Apples
  • Kiwi
  • Grapes
  • Melon
0

We can keep click each button and try to count the clicks to compare with the output #count element.

The above approach can be improved; if our application cannot handle click events in a quick succession, we could use cy.wait command to space them out.

The above approaches work. But if our buttons can process the click events in quick succession, we do not need to keep track of the number of clicks using extra variable k. Instead we want to click on every button. Then confirm the displayed count is the same as the number of buttons.

// the count starts at zero
cy.contains('#count', 0)
// click each button
cy.get('ul button')
  .click({ multiple: true })
  // the displayed count should equal the number of buttons
  .its('length')
  .then((n) => {
    cy.contains('#count', n)
  })

To learn more about this refactoring, watch the video Click Each Item Test Refactoring (opens new window).