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

What Are Assertions in Cypress?

Assertions in Cypress are commands that check if your application’s behavior matches what you expect. They compare actual outcomes with expected results.

Syntax:

cy.get('button').should('be.visible').and('have.text', 'Submit');

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.

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().

Syntax:

cy.get('input[name="email"]').type('[email protected]');

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() commands.

Syntax:

cy.get('input[name="email"]').should('have.value', '[email protected]');

Different Types of Assertions with Commands

Different types of assertions included:

1. Existence Assertions

1. exist: Verifies that the element exists in the DOM.

cy.get('#element').should('exist');

2. not exist: Verifies that the element does not exist in the DOM.

cy.get('#element').should('not.exist');

2. Visibility Assertions

be visible: Checks if the element is visible to the user (not hidden by CSS or off-screen).

cy.get('#element').should('be.visible');

not be visible: Ensures the element is not visible to the user.

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

be hidden: Confirms the element is hidden

cy.get('#element').should('be.hidden');

not be hidden: Verifies the element is not hidden and can be visible.

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

3. State Assertions

be checked: Ensures a checkbox or radio button is checked.

cy.get('#checkbox').should('be.checked');

not be checked: Ensures a checkbox or radio button is not checked.

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

be enabled: Verifies that an element (e.g., button, input) is enabled and interactive.

cy.get('#button').should('be.enabled');

be disabled: Confirms that an element is disabled and not interactive.

cy.get('#button').should('be.disabled');

be focused: Checks if an input element currently has focus.

cy.get('#input').should('be.focused');

4. Containment Assertions

contain: Verifies that the element’s text includes the specified string.

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

not contain: Ensures the element’s text does not include the specified string.

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

have text: Checks the element text exactly matches the specified string.

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

not have text: Ensures the element’s text does not exactly match the specified string.

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

have html: Verifies that the element’s inner HTML matches the specified HTML.

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

not have html: Ensures the element’s inner HTML does not match the specified HTML.

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

have value: Confirms that an input element has the specified value.

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

not have value: Ensures an input element does not have the specified value.

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

have class: Verifies that the element has the specified CSS class.

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

not have class: Ensures the element does not have the specified CSS class.

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

have attr: Checks that the element has the specified attribute with the given value.

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

not have attr: Ensures the element does not have the specified attribute.

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

5. Length Assertions

have length: Verifies that a collection of elements has exactly the specified number of items.

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

not have length: Ensures a collection does not have the specified number of items.

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

have length greater than: Checks that a collection has more than the specified number of items.

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

have length greater than or equal to: Verifies that a collection has at least the specified number of items.

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

have length less than: Ensures a collection has fewer than the specified number of items.

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

have length less than or equal to: Confirms a collection has at most the specified number of items.

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

6. Location(URL) Assertions

have url: Verifies that the current URL matches the specified URL.

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

have title: Checks that the page’s title matches the specified string.

cy.title().should('have.title', 'Page Title');

have query: Verifies that the URL’s query string matches the specified value.

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

have hash: Confirms that the URL’s hash matches the specified value.

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.

jaimin78

Follow

Improve

Article Tags :

• Software Testing
• Testing Tools
• Cypress