Cypress - Checkbox

Cypress - Interacting with Checkboxes

Cypress provides intuitive commands, .check() and .uncheck(), to interact with checkbox elements. Checkboxes in HTML are typically represented by <input type="checkbox"> tags.

Core Checkbox Commands

Here’s how you can use these commands:

To check a single checkbox (e.g., by its ID):

cy.get('#myCheckbox').check();

To uncheck a single checkbox:

cy.get('#myCheckbox').uncheck();

To check all checkboxes matching a selector:

cy.get('input[type="checkbox"]').check();

To check a checkbox by its value attribute:

cy.get('input[type="checkbox"]').check('valueToSelect');

To check multiple checkboxes by their value attributes:

cy.get('input[type="checkbox"]').check(['value1', 'value2']);

To uncheck checkboxes by value (similarly to checking):

cy.get('input[type="checkbox"]').uncheck('valueToDeselect');
cy.get('input[type="checkbox"]').uncheck(['value1', 'value2']);

Using options, like forcing an action if the element is hidden:

cy.get('.hidden-checkbox').check({ force: true });

Both .check() and .uncheck() commands must be chained off a command that yields DOM element(s). You can, and should, chain assertions like .should('be.checked') or .should('not.be.checked') after these commands.

Common Command Options

Several options can modify the behavior of .check() and .uncheck():

log (boolean, default: true): Whether to display the command in the Cypress command log.
timeout (number, default: defaultCommandTimeout - 4000ms): Max time to wait for the command to resolve before failing.
force (boolean, default: false): Forces the action, bypassing actionability checks (e.g., if an element is covered or disabled). Use with caution.
scrollBehavior (‘center’ | ‘top’ | ‘bottom’ | ‘nearest’ | false, default: ‘top’): Viewport position to which the element is scrolled before execution.
waitForAnimations (boolean, default: waitForAnimations config - true): Whether to wait for animations to complete before executing.
animationDistanceThreshold (number, default: animationDistanceThreshold config - 5): The pixel distance an element must move to be considered animating.

Implementation Example

Let’s see these commands in action with a common scenario:

describe('Tutorialspoint - Checkbox Interaction', () => {
    beforeEach(() => {
        // Using a stable public site for checkbox examples
        cy.visit('https://the-internet.herokuapp.com/checkboxes');
    });

    it('Should check and uncheck individual checkboxes', () => {
        // The first checkbox might be initially unchecked or checked depending on the page state
        // Let's ensure it's checked
        cy.get('input[type="checkbox"]').eq(0).check().should('be.checked');

        // The second checkbox might be initially checked
        // Let's ensure it's unchecked
        cy.get('input[type="checkbox"]').eq(1).uncheck().should('not.be.checked');
    });

    it('Should verify initial states and then change them', () => {
        // Example: Assuming first checkbox is initially unchecked and second is checked
        // Note: Actual initial state on the-internet.herokuapp.com/checkboxes might vary
        // This code demonstrates how to adapt if you know the initial state.

        // If the first checkbox is found unchecked, then check it.
        cy.get('input[type="checkbox"]').first().then(($checkbox) => {
            if (!$checkbox.is(':checked')) {
                cy.wrap($checkbox).check();
            }
        });
        cy.get('input[type="checkbox"]').first().should('be.checked');

        // If the last checkbox is found checked, then uncheck it.
        cy.get('input[type="checkbox"]').last().then(($checkbox) => {
            if ($checkbox.is(':checked')) {
                cy.wrap($checkbox).uncheck();
            }
        });
        cy.get('input[type="checkbox"]').last().should('not.be.checked');
    });
});

Execution Analysis

In the Cypress Test Runner:

The first test locates checkboxes using their index (.eq(0), .eq(1)), checks or unchecks them, and verifies their state using .should('be.checked') or .should('not.be.checked').
The second test demonstrates a more conditional approach using .then() to inspect the current state of a checkbox before deciding to interact with it. This can be useful for more dynamic UIs.

Using specific selectors (like IDs, data attributes, or precise class names) is generally more robust than relying on type="checkbox" alone or eq() if the number or order of checkboxes might change.