cy.check() and cy.uncheck() in Cypress - Framework Patterns

Framework Mode - .check() and .uncheck()

Folder Structure

cypress/
├── e2e/                  # Test files (specs) using .check() and .uncheck()
│   └── checkboxTests.cy.js
├── fixtures/             # Test data files (JSON, etc.)
│   └── checkboxData.json
├── support/              # Custom commands and reusable utilities
│   ├── commands.js       # Custom Cypress commands
│   └── index.js          # Support file loaded before tests
cypress.config.js         # Cypress configuration file

Test Framework Layers

• Test Layer (e2e/): Contains test scripts that use .check() and .uncheck() to interact with checkboxes and radio buttons.
• Support Layer (support/): Holds reusable commands and helpers to simplify checkbox interactions, e.g., custom commands for checking/unchecking with validations.
• Fixtures Layer (fixtures/): Stores test data such as checkbox states or options to drive data-driven tests.
• Configuration Layer (cypress.config.js): Defines environment settings, base URLs, and browser preferences.

Configuration Patterns

• Environment Variables: Use cypress.env.json or cypress.config.js to set environment-specific URLs or credentials.
• Browser Settings: Configure default browser and viewport size in cypress.config.js for consistent checkbox rendering.
• Test Data: Store checkbox options or expected states in fixture files to keep tests clean and maintainable.
• Custom Commands: Define commands like cy.checkCheckbox() or cy.uncheckCheckbox() in support/commands.js to wrap .check() and .uncheck() with extra validations or logging.

Test Reporting and CI/CD Integration

• Built-in Cypress Reporter: Shows pass/fail status of tests using .check() and .uncheck() in the Cypress Test Runner UI.
• Mocha Reporter: Generates readable console output during test runs.
• CI/CD Integration: Integrate Cypress tests into pipelines (GitHub Actions, Jenkins) to run checkbox interaction tests automatically on code changes.
• Advanced Reporting: Use plugins like mochawesome to generate HTML reports showing detailed results of checkbox tests.

Best Practices

1. Use Clear Locators: Select checkboxes with stable selectors like data-cy attributes to avoid flaky tests.
2. Explicit Assertions: After .check() or .uncheck(), assert the checkbox state with .should('be.checked') or .should('not.be.checked').
3. Custom Commands: Wrap .check() and .uncheck() in custom commands to add logging and error handling.
4. Test Accessibility: Ensure checkboxes are accessible by keyboard and screen readers; test focus and ARIA attributes.
5. Data-Driven Tests: Use fixture data to test multiple checkbox states and combinations efficiently.

Self Check

Where in this folder structure would you add a new custom command to check a checkbox with extra validation?

Key Result

Organize Cypress tests with clear folder layers, use .check()/.uncheck() in tests, wrap them in custom commands, and configure environments for reliable checkbox testing.

Practice

1. What does cy.check() do in Cypress testing?

easy

A. Deselects checkboxes only

B. Clicks buttons on the page

C. Selects checkboxes or radio buttons

D. Types text into input fields

Solution

1. Step 1: Understand the purpose of cy.check()

   cy.check() is used to select checkboxes or radio buttons in Cypress tests.

2. Step 2: Compare with other commands

   cy.uncheck() is used to deselect checkboxes only, so it does not match the question.

3. Final Answer:

   Selects checkboxes or radio buttons -> Option C

4. Quick Check:

   cy.check() selects inputs [OK]

Hint: Remember: check() selects, uncheck() deselects checkboxes [OK]

Common Mistakes:

• Confusing cy.check() with cy.uncheck()
• Thinking cy.check() types text
• Assuming cy.check() clicks buttons

2. Which of the following is the correct syntax to uncheck a checkbox with id agree in Cypress?

easy

A. cy.get('#agree').uncheck()

B. cy.get('#agree').check()

C. cy.get('#agree').click()

D. cy.get('#agree').type('uncheck')

Solution

1. Step 1: Identify the command to deselect a checkbox

   To deselect a checkbox, use cy.uncheck().

2. Step 2: Match the syntax with the element selector

   cy.get('#agree').uncheck() correctly targets the checkbox with id 'agree' and unchecks it.

3. Final Answer:

   cy.get('#agree').uncheck() -> Option A

4. Quick Check:

   uncheck() deselects checkbox [OK]

Hint: Use uncheck() only to deselect checkboxes [OK]

Common Mistakes:

• Using check() to uncheck a box
• Using click() which may toggle unpredictably
• Trying to type 'uncheck' into checkbox

3. Given the following code snippet, what will be the assertion result?

cy.get('input[type="checkbox"]').check().should('be.checked');
cy.get('input[type="checkbox"]').uncheck().should('not.be.checked');

medium

A. First assertion passes, second fails

B. Both assertions pass

C. First assertion fails, second passes

D. Both assertions fail

Solution

1. Step 1: Analyze the first command and assertion

   cy.get('input[type="checkbox"]').check() selects all checkboxes, then should('be.checked') asserts they are checked. This should pass.

2. Step 2: Analyze the second command and assertion

   cy.get('input[type="checkbox"]').uncheck() deselects all checkboxes, then should('not.be.checked') asserts they are unchecked. This should also pass.

3. Final Answer:

   Both assertions pass -> Option B

4. Quick Check:

   check() then be.checked, uncheck() then not.be.checked [OK]

Hint: check() sets checked, uncheck() clears checked [OK]

Common Mistakes:

• Assuming uncheck() works on radio buttons
• Thinking check() does not affect checked state
• Confusing assertion syntax

4. You wrote this Cypress test:

cy.get('input[type="radio"]').uncheck();

Why does this test fail?

medium

A. Because radio buttons cannot be selected

B. Because the selector is incorrect

C. Because uncheck() requires a parameter

D. Because uncheck() cannot be used on radio buttons

Solution

1. Step 1: Understand uncheck() limitations

   uncheck() works only on checkboxes, not radio buttons.

2. Step 2: Analyze the selector and usage

   The selector targets radio buttons, so using uncheck() causes failure.

3. Final Answer:

   Because uncheck() cannot be used on radio buttons -> Option D

4. Quick Check:

   uncheck() only for checkboxes [OK]

Hint: Use uncheck() only on checkboxes, not radios [OK]

Common Mistakes:

• Trying to uncheck radio buttons
• Assuming uncheck() needs parameters
• Confusing selector correctness

5. You want to test a form with multiple checkboxes named features. You want to check only the boxes with values fast and secure, then verify only those are checked. Which Cypress code snippet correctly does this?

hard

A. cy.get('input[name="features"]').check(['fast', 'secure']).should('be.checked')

B. cy.get('input[name="features"]').check('fast').check('secure').should('be.checked')

C. cy.get('input[name="features"]').check(['fast', 'secure']).should('have.value', ['fast', 'secure'])

D. cy.get('input[name="features"]').check(['fast', 'secure']).should('be.checked').uncheck('fast')

Solution

1. Step 1: Use check() with array to select multiple checkboxes

   cy.get('input[name="features"]').check(['fast', 'secure']) checks the boxes with those values.

2. Step 2: Assert that those checkboxes are checked

   should('be.checked') confirms the selected checkboxes are checked.

3. Final Answer:

   cy.get('input[name="features"]').check(['fast', 'secure']).should('be.checked') -> Option A

4. Quick Check:

   check(array) selects multiple, then assert checked [OK]

Hint: Use check(['val1','val2']) to select multiple checkboxes [OK]

Common Mistakes:

• Using multiple check() calls without chaining properly
• Using should('have.value') which is incorrect for checkboxes
• Unchecking after checking without reason