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 about Assertions in cypress.

Assertions in Cypress

Assertions is used to verify if certain conditions are met during the execution of test. This is used to verify that the thing that we have written in our script should be done. Ex, Suppose there is a gender-select radio button and in our test script we have written to choose Male, so by binding assertion method we can verify that it must have selected Male radio.

Assertions in Cypress

1. Implicit Assertions

Implicit assertions are built into the command chain and automatically assert the desired condition. You don’t need to call an assertion method. The assertion is made as part of the command. It includes commands such as cy.get(), cy.contains().

2. Explicit Assertions

Explicit assertions are made using the .should() or .and() methods. It is bind (appended) after a commands such as cy.get(), cy.contains etc.. These assertions are more flexible and allow you to specify exactly what you want to assert. You can pass the different assertions such as have.value, exist, not.exist etc.. inside .should or .and() command.

Different Types of Assertions with Commands

Different types of assertions included:

Types of Cypress assertions

1. Existence Assertions

exist

cy.get(‘#element’).should(‘exist’);

not exist

cy.get(‘#element’).should(‘not.exist’);

2. Visibility Assertions

be visible

cy.get(‘#element’).should(‘be.visible’);

not be visible

cy.get(‘#element’).should(‘not.be.visible’);

be hidden

cy.get(‘#element’).should(‘be.hidden’);

not be hidden

cy.get(‘#element’).should(‘not.be.hidden’);

3. State Assertions

be checked

cy.get(‘#checkbox’).should(‘be.checked’);

not be checked

cy.get(‘#checkbox’).should(‘not.be.checked’);

be enabled

cy.get(‘#button’).should(‘be.enabled’);

be disabled

cy.get(‘#button’).should(‘be.disabled’);

be focused

cy.get(‘#input’).should(‘be.focused’);

4. Containment Assertions

contain

cy.get(‘#element’).should(‘contain’, ‘text’);

not contain

cy.get(‘#element’).should(‘not.contain’, ‘text’);

have text

cy.get(‘#element’).should(‘have.text’, ‘exact text’);

not have text

cy.get(‘#element’).should(‘not.have.text’, ‘exact text’);

have html

cy.get(‘#element’).should(‘have.html’, ‘<span>HTML</span>’);

not have html

cy.get(‘#element’).should(‘not.have.html’, ‘<span>HTML</span>’);

have value

cy.get(‘#input’).should(‘have.value’, ‘value’);

not have value

cy.get(‘#input’).should(‘not.have.value’, ‘value’);

have class

cy.get(‘#element’).should(‘have.class’, ‘class-name’);

not have class

cy.get(‘#element’).should(‘not.have.class’, ‘class-name’);

have attr

cy.get(‘#element’).should(‘have.attr’, ‘attribute’, ‘value’);

not have attr

cy.get(‘#element’).should(‘not.have.attr’, ‘attribute’);

5. Length Assertions

have length

cy.get(‘.items’).should(‘have.length’, 3);

not have length

cy.get(‘.items’).should(‘not.have.length’, 3);

have length greater than

cy.get(‘.items’).should(‘have.length.gt’, 3);

have length greater than or equal to

cy.get(‘.items’).should(‘have.length.gte’, 3);

have length less than

cy.get(‘.items’).should(‘have.length.lt’, 3);

have length less than or equal to

cy.get(‘.items’).should(‘have.length.lte’, 3);

6. Location(URL) Assertions

have url

cy.url().should(‘have.url’, ‘https://example.com’);

have title

cy.title().should(‘have.title’, ‘Page Title’);

have query

cy.location(‘search’).should(‘have.query’, ‘?param=value’);

have hash

cy.location(‘hash’).should(‘have.hash’, ‘#section’);

Installation Steps of Cypress Assertions

Before we begin make sure node.js in 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 spec.

• 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 of Cypress Assertions

The below example demonstrate the Assertion in Cypress.

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Login Form</title>
</head>
<body>
  <h1>Login</h1>
  <form id="loginForm">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    <br><br>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
    <br><br>
    <button type="button" id="loginButton" disabled>Login</button>
  </form>
  <p id="errorMessage" style="display: none; color: red;">Invalid credentials</p>
  <p id="welcomeMessage" style="display: none;">Welcome, <span id="user"></span>!</p>

  <script>
    document.getElementById('username').addEventListener('input', enableButton);
    document.getElementById('password').addEventListener('input', enableButton);

    function enableButton() {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      document.getElementById('loginButton').disabled = !(username && password);
    }

    document.getElementById('loginButton').addEventListener('click', () => {
      const username = document.getElementById('username').value;
      const password = document.getElementById('password').value;
      if (username === 'correctUser' && password === 'correctPass') {
        document.getElementById('welcomeMessage').style.display = 'block';
        document.getElementById('user').textContent = username;
        document.getElementById('errorMessage').style.display = 'none';
      } else {
        document.getElementById('errorMessage').style.display = 'block';
        document.getElementById('welcomeMessage').style.display = 'none';
      }
    });
  </script>
</body>
</html>

// gfg.cy.js

describe('Login Form Functionality', () => {
  it('should verify the login form elements and functionality', () => {
    // 1. Visit the login page
    cy.visit('http://127.0.0.1:5500/index.html');

    // 2. Verify the presence and visibility of the login form elements
    cy.get('#username').should('exist').and('be.visible');
    cy.get('#password').should('exist').and('be.visible');
    cy.get('#loginButton').should('exist').and('be.visible');

    // 3. Verify that the login button is initially disabled
    cy.get('#loginButton').should('be.disabled');

    // 4. Enter an incorrect username and password
    cy.get('#username').type('wrongUser');
    cy.get('#password').type('wrongPass');
    cy.get('#loginButton').should('be.enabled').click();

    // 5. Verify error message is displayed
    cy.get('#errorMessage').should('exist').and('be.visible').and('contain', 'Invalid credentials');

    // 6. Enter a correct username and password
    cy.get('#username').clear().type('correctUser');
    cy.get('#password').clear().type('correctPass');
    cy.get('#loginButton').click();

    // 7. Verify the welcome message is displayed and contains the correct username
    cy.get('#welcomeMessage').should('exist').and('be.visible').and('contain', 'Welcome, correctUser');
    cy.get('#errorMessage').should('not.be.visible');
  });
});

Output

Conclusion

In conclusion, Cypress is an end-to-end automated testing tool that enables efficient and reliable testing of web applications. You can verify the state of an element, input by using Assertions. By following this article, You can learn to Verify the state using assertion methods. Cypress commands are easy-to-write that make it an ideal choice for automating the testing of elements and other web components.

Frequently Asked Questions on Assertions in Cypress

What is Cypress?

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

What is Assertion in Cypress

Assertions are commands used to verify that certain conditions are met during the execution of a test.

How do you assert that an element is not present in the DOM?

To check element is not present in DOM, you can use the following command:cy.get(‘#element’).should(‘not.exist’);

How do you assert that a checkbox is checked?

To check if the checkbox is checked or not, you can use the following command:cy.get(‘#checkbox’).should(‘be.checked’);