Cypress is a popular end-to-end testing framework that simplifies the process of writing tests for web applications. One of its most powerful features is its assertion library, which provides various methods to verify application behavior. While the “.should()” command is widely used for assertions, Cypress offers other advanced assertion methods to enhance your testing strategy.

This blog will explore these advanced assertions and demonstrate how to use them effectively in your Cypress tests.

The Basics: The .should() Command

Before diving into advanced assertions, let’s quickly recap the “.should()” command. This command is commonly used to assert the state of elements or the application. For example:

cy.get('.success-message').should('be.visible');
cy.get('.username').should('have.text', 'JohnDoe');
cy.get('.error').should('not.exist');

The “.should()” command allows chaining assertions to elements or objects, making it easy to express expectations clearly. However, there are scenarios where more advanced assertions are needed.

Introducing Advanced Assertions

1. Using .and():

The “.and()” command is used to chain multiple assertions together on the same subject. This can make your tests more concise and easier to read.

For Example:

cy.get('.user-profile')
  .should('be.visible')
  .and('have.class', 'active')
  .and('contain', 'Welcome, John');

In this example, we assert that the “.user-profile” element is visible, has the active class, and contains the text "Welcome, John" all in one chain.

2. Using .then():

The “.then()” command allows you to perform actions and assertions on the subject of a previous command. It is beneficial for making assertions that are not directly supported by “.should()”.

For Example:

cy.get('.user-list').then(($list) => {
  // Assert the number of user items
  expect($list).to.have.length(5);

  // Assert the text of the first user
  expect($list.first()).to.contain('Alice');
});

In this example, we use “.then()” to make assertions about the number of user items and the text content of the first user.

3. Using .expect()

Cypress is built on top of the popular testing library, Chai, which provides extensive assertions through “expect()”.

You can use expect() within .then() blocks to make complex assertions.

For Example:

cy.get('.notification').then(($notif) => {
  const text = $notif.text();
  expect(text).to.match(/Success|Warning|Error/);
});

Here, we use “expect()” to assert that the notification text matches one of the expected patterns using a regular expression.

4. Custom Assertions with .invoke()

Sometimes, we must perform custom assertions based on a property’s value. The “.invoke()” command extracts property values from elements.

For Example:

cy.get('.progress-bar')
  .invoke('attr', 'aria-valuenow')
  .then((value) => {
    expect(parseInt(value)).to.be.at.least(50);
  });

In this example, we use “.invoke()” to extract the “aria-valuenow” attribute and make an assertion that the value is at least 50.

Practical Tips for Advanced Assertions

• Combine Assertions: Use .and() and .then() to combine multiple assertions for better readability and maintainability.

• Create Custom Assertions: Use .invoke() and custom logic to create assertions beyond the built-in options.

• Keep Tests Readable: While advanced assertions provide flexibility, ensure that tests remain readable and understandable for others on your team.

Conclusion

Cypress offers a powerful tool for making assertions in your tests, allowing you to go beyond the basics with advanced techniques. By mastering these advanced assertions, you can create more robust and expressive tests that ensure your application’s behavior meets expectations. Remember to keep your tests readable and maintainable as you leverage these advanced features.