Click a random element
Click a single picked list item
Sometimes you might want to pick a random element from selected elements on the page. Make sure the elements are ready before picking - the elements might be added asynchronously.
<style>
.clicked {
font-weight: bold;
}
</style>
<ul id="items"></ul>
<script>
setTimeout(() => {
// add elements to the list
const list = document.getElementById('items')
list.innerHTML = `
<li class="an-item">One</li>
<li class="an-item">Two</li>
<li class="an-item">Three</li>
<li class="an-item">Four</li>
<li class="an-item">Five</li>
`
list.addEventListener('click', (e) => {
e.target.classList.add('clicked')
})
}, 1000)
</script>
// first, make sure the elements are on the page
cy.get('#items li')
.should('have.length.gt', 3)
// pick a random item from the list
.then(($li) => {
const items = $li.toArray()
// use Lodash _.sample method to pick
// a random element from an array
return Cypress._.sample(items)
})
.then(($li) => {
// the yielded element is automatically wrapped in jQuery by Cypress
expect(Cypress.dom.isJquery($li), 'jQuery element').to.be
.true
cy.log(`you picked "${$li.text()}"`)
// we do not need to return anything from `cy.then`
// if we want to continue working with the same element
})
.click()
// confirm 1 element got "clicked" class
cy.get('#items .clicked').should('have.length', 1)
Alternative solution: pick a random index of an element and use cy.eq command.
// first, make sure the elements are on the page
cy.get('#items li')
.should('have.length.gt', 3)
// get the number of elements
.its('length')
.then((n) => Cypress._.random(0, n - 1))
.then((k) => {
cy.log(`picked random index ${k}`)
// get all elements again and pick one
cy.get('#items li').eq(k).click()
// confirm the click
cy.get('#items .clicked').should('have.length', 1)
})
Watch the video Click A Random Element.
Click several checkboxes
Let's say we have multiple checkboxes and we want to pick three of then randomly.
<div id="checkboxes">
<input type="checkbox" id="apples" />
<label for="apples">I ❤️ apples</label><br />
<input type="checkbox" id="peaches" />
<label for="peaches">I ❤️ peaches</label><br />
<input type="checkbox" id="grapes" />
<label for="grapes">I ❤️ grapes</label><br />
<input type="checkbox" id="mango" />
<label for="mango">I ❤️ mango</label><br />
</div>
First, let's confirm that there are four unchecked checkboxes, none of them checked.
cy.get('#checkboxes input[type=checkbox]')
.should('be.visible')
.and('have.length', 4)
.each(($checkbox) => expect($checkbox).to.not.be.checked)
// use Lodash _.sampleSize to pick N
// random elements from a jQuery array
// while _.sampleSize can pull items from jQuery object
// I found the entire test to be reliable
// only when converting the jQuery to plain Array first
.then(function ($items) {
return Cypress._.sampleSize($items.toArray(), 2)
})
.should('have.length', 2)
.click({ multiple: true })
Let's confirm that 2 checkboxes are checked now using the jQuery :checked selector.
// https://api.jquery.com/checked-selector/
cy.get('#checkboxes input[type=checkbox]:checked')
.should('have.length', 2)
// print the checked element IDs to the Command Log
.then(($checked) => Cypress._.map($checked, 'id'))
.then(cy.log)
Watch the video Randomly Pick Two Checkboxes Out Of Four And Click On Them.