Cypress: Checkboxes & Radio Buttons

Cypress offers built-in commands for interacting with form inputs like checkboxes and radio buttons. Here's a practical guide for checking, unchecking, asserting, and even forcing actions — with clear examples taken from real-world usage.

Interacting with Checkboxes

Checking and Unchecking

Use .check() and .uncheck() to toggle checkboxes. Cypress automatically asserts visibility and interactability — unless you override it.

Working with Radio Buttons

Cypress uses .check() to select radio buttons too. Because only one option can be selected in a group, others will be deselected automatically.

force: true tells Cypress to perform the action even if the element is invisible, offscreen, or blocked— useful for certain CSS-overlaid components.

Test Example:

Key Assertions

Expression	Meaning
.should('be.checked')	The input is selected
.should('not.be.checked')	The input is unselected
.should('be.disabled')	The input is not interactive
.should('be.enabled')	The input is usable
.should('exist')	The element is in the DOM

Best Practices

• Use .check() over .click() for clarity and intention

• Use value attributes for precise targeting

• Add .should() assertions to validate the state

• Use .eq(n) to index within groups

• Use { force: true } only when truly needed (invisible or covered elements)