Horje
Checkbox in Cypress

Cypress is an open-source website testing tool that is used to automate tests for JavaScript web applications. It is designed for end-to-end testing and it can be used for unit tests and integration tests as well. It is fast, reliable, and can run in real-time directly in the browser.

It’s built to work with any front-end framework or website, including React, Angular, and Vue. In this article, we will learn how to test for Checkbox in Cypress.

Table of Content

Checkbox Testing

Checkbox testing is a fundamental aspect of UI testing that ensures the checkboxes in your web application are functioning as expected. It involves verifying that checkboxes can be checked, unchecked, and correctly reflect their state. We use a check() command is used to check the checkbox and uncheck() command is used to uncheck the checkbox.

Before, we start note that Cypress uses a CSS selector to identify the element. You can target any element just like selecting an element for styling.

Syntax

//Check
cy.get(‘selector’).check( Value , Options );

//Uncheck
cy.get(‘selector’).uncheck( Value , Options )

In this,

  • Value (optional): It can be a String or an Array, To check specific value.
  • Options (optional): It is a object to change the default behavior of .check().

Options

  • log: It is used to display command in a command log. By default it is true.
  • force: It allows the command to execute even if the element is hidden or disabled. By default it is false.
  • timeout: It is useful when the element may take longer to become actionable. It wait for the command to resolve before timing out. By default it is set to 4000 milliseconds.
  • waitForAnimations: Cypress wait for the animation to complete before executing command immediately. By default it is true.

Commands

Command to check the checkbox

cy.get(‘selector’).check();

Command to uncheck the checkbox

cy.get(‘selector’).uncheck();

Command to declare(assert) the checkbox should be checked

cy.get(‘selector’).check().should(‘be.checked’);

Command to declare(assert) the checkbox should be unchecked

cy.get(‘selector’).check().should(‘not.be.checked’);

Command to check multiple checkbox at once

cy.get(‘selector’).check([‘value1’, ‘value2’]);

Command to uncheck multiple checkbox at once

cy.get(‘selector’).uncheck([‘value1’, ‘value2’]);

Command to check an invisible checkbox

cy.get(‘selector’).should(‘not.be.visible’).check({ force: true }).should(‘be.checked’)

Command to find a checked checkbox

cy.get(‘selector :checked’).should(‘be.checked’).and(‘have.value’, ‘value’);

Installation Steps

Before we begin make sure node.js is installed in your system.

Step 1: Create a Project Folder and move to it by using following command.

mkdir cypress
cd cypress

Step 2: Initialize a project and Install Cypress.

npm init -y
npm install cypress –save-dev

Step 3: After Creating a Project, Run this command to start cypress.

npx cypress open

Step 4: Testing type, Configuration and creating a specialization.

  • Choose a E2E Testing or Component Testing, then after quick configuration choose browser.
  • After that create a new spec then click on your spec name to open your spec in any IDE.

Step 5: Testing HTML File.

  • Create a HTML File and open it with any live server extension.
  • copy that live server file serve link, for later use.

Example

The below example demonstrate the different scenario testing with checkbox and radio.

HTML 
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cypress Checkbox and Radio Button Test</title>
</head>
<body>
    <h1>Form with Checkboxes and Radio Buttons</h1>
    <form id="test-form">
        <fieldset>
            <legend>Select your preferences:</legend>

            <label for="newsletter">Subscribe to Newsletter</label>
            <input type="checkbox" id="newsletter" name="subscription" value="newsletter"><br><br>

            <label for="updates">Receive Updates</label>
            <input type="checkbox" id="updates" name="subscription" value="updates"><br><br>

            <label for="offers">Receive Special Offers</label>
            <input type="checkbox" id="offers" name="subscription" value="offers"><br><br>
        </fieldset>

        <fieldset>
            <legend>Choose your gender:</legend>

            <label for="male">Male</label>
            <input type="radio" id="male" name="gender" value="male"><br><br>

            <label for="female">Female</label>
            <input type="radio" id="female" name="gender" value="female"><br><br>

            <label for="other">Other</label>
            <input type="radio" id="other" name="gender" value="other"><br><br>
        </fieldset>

        <button type="submit">Submit</button>
    </form>

    <script>
        // Basic form submission handling for demonstration
        document.getElementById('test-form').addEventListener('submit', function(event) {
            event.preventDefault();
            alert('Form submitted!');
        });
    </script>
</body>
</html>
JavaScript 
//gfg.cy.js

describe('Form with Checkboxes and Radio Buttons', () => {
  beforeEach(() => {
      // Visit the webpage containing the form
      cy.visit('http://127.0.0.1:5500/index.html'); // Update this URL based on your local server
  });

  it('should check and uncheck checkboxes', () => {
      // Check the "Subscribe to Newsletter" checkbox
      cy.get('#newsletter').check().should('be.checked');

      // Check the "Receive Updates" checkbox
      cy.get('#updates').check().should('be.checked');

      // Check the "Receive Special Offers" checkbox
      cy.get('#offers').check().should('be.checked');

      // Uncheck the "Receive Updates" checkbox
      cy.get('#updates').uncheck().should('not.be.checked');

      // Assert other checkboxes remain checked
      cy.get('#newsletter').should('be.checked');
      cy.get('#offers').should('be.checked');
  });

  it('should check radio buttons and ensure only one is selected at a time', () => {
      // Check the "Male" radio button
      cy.get('#male').check().should('be.checked');

      // Assert "Female" and "Other" radio buttons are not checked
      cy.get('#female').should('not.be.checked');
      cy.get('#other').should('not.be.checked');

      // Check the "Female" radio button
      cy.get('#female').check().should('be.checked');

      // Assert "Male" and "Other" radio buttons are not checked
      cy.get('#male').should('not.be.checked');
      cy.get('#other').should('not.be.checked');

      // Check the "Other" radio button
      cy.get('#other').check().should('be.checked');

      // Assert "Male" and "Female" radio buttons are not checked
      cy.get('#male').should('not.be.checked');
      cy.get('#female').should('not.be.checked');
  });

  it('should submit the form with selected checkboxes and radio button', () => {
      // Check the "Subscribe to Newsletter" checkbox
      cy.get('#newsletter').check();

      // Check the "Receive Special Offers" checkbox
      cy.get('#offers').check();

      // Check the "Other" radio button
      cy.get('#other').check();

      // Submit the form
      cy.get('#test-form').submit();

      // Confirm the form submission alert
      cy.on('window:alert', (str) => {
          expect(str).to.equal('Form submitted!');
      });
  });
});

Output

Checkbox in Cypress output

Checkbox in Cypress output

Conclusion

In conclusion, Cypress is an end-to-end automated testing tool that enables efficient and reliable testing of web applications. It includes interactions with checkbox elements. By following this article, you can test the checking, unchecking, and state verification of checkboxes. Cypress commands are easy-to-write that make it an ideal choice for automating the testing of Checkbox and other web components.

Frequently Asked Questions on Checkbox in Cypress

What is Cypress?

Cypress is a end-to-end testing framework that allows you to write tests script that interact with
the application in a way that simulates user behavior.

How do I check a checkbox using Cypress?

To check a checkbox, you can use the check() command.

How do I uncheck a checkbox using Cypress?

To uncheck a checkbox, you can use the uncheck() command.

How to toggle a checkbox state?

To toggle the state of a checkbox, you can use the click() command.


 


Reffered: https://www.geeksforgeeks.org

Software Testing

Related
AR/VR Testing AR/VR Testing
Environment Variables in Cypress Environment Variables in Cypress
How to Handle Dropdown in Cypress? How to Handle Dropdown in Cypress?
Introduction to TestRail Review Introduction to TestRail Review
Agile Testing vs Traditional Testing Agile Testing vs Traditional Testing

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 17



 

Horje