Check The First N Checkboxes

📺 Watch this recipe explained in the video Check N Checkboxesopen in new window.

  <li><input type="checkbox" id="box-1" /> One</li>
  <li><input type="checkbox" id="box-2" /> Two</li>
  <li><input type="checkbox" id="box-3" /> Three</li>
  <li><input type="checkbox" id="box-4" /> Four</li>
  <li><input type="checkbox" id="box-5" /> Five</li>

CSS pseudo-selector :checked comes from jQueryopen in new window.

// there are no checked boxes at first
cy.get('input[type=checkbox]:checked').should('have.length', 0)

Let's check the first N checkboxes. We can use Lodash _.random to pick a number of boxes to check. We will need to check each box separately, since there is no multiple: true option for the cy.checkopen in new window command.

// pick a random number of checkboxes to check
const n = Cypress._.random(1, 5)
cy.log(`checking ${n} boxes`)
for (let k = 0; k < n; k += 1) {
// confirm the right number of boxes was checked
cy.log(`there should be ${n} boxes checked`)
cy.get('input[type=checkbox]:checked').should('have.length', n)

To confirm the number of boxes not checked, we can combine :not and :checked selectors

cy.log(`there should be ${5 - n} boxes not checked`)
  5 - n,