As a software developer, one of the most important aspects of my job is testing. And when it comes to testing web applications, Cypress is one of the best tools available. One of the key features of Cypress is its assertion library, which allows you to make sure that your application is functioning as expected. In this article, we will explore the ins and outs of Cypress assertions, including their syntax, methods, and best practices. By the end of this article, you will be able to write robust tests with confidence using Cypress assertions.

Introduction to Cypress Assertions #

Cypress assertions are used to verify the state of your application during a test. An assertion is a statement that checks whether a certain condition is true or false. In other words, it is a way of making sure that your application is behaving as expected. Cypress provides a number of built-in assertions that you can use, and you can also use the popular Chai assertion library with Cypress.

One of the key benefits of using Cypress assertions is that they are very easy to read and understand. When an assertion fails, Cypress provides a clear error message that tells you exactly what went wrong. This makes it much easier to troubleshoot your tests and fix any issues that arise.

In the next sections, we will explore the different types of Cypress assertions and how to use them effectively.

Understanding Cypress Assertion Syntax – should and expect #

Cypress provides two different syntaxes for writing assertions: should and expect. The should syntax is a Chai assertion, while the expect syntax is a native Cypress assertion. Both syntaxes can be used to achieve the same result, so it’s really a matter of personal preference.

Here’s an example of the should syntax:

cy.get('button').should('be.visible')

In this example, we are using the should syntax to assert that a button element is visible. The should method takes a string argument that describes the condition we are checking for.

Now let’s look at an example of the expect syntax:

expect(cy.get('button')).to.be.visible

In this example, we are using the expect syntax to assert that a button element is visible. The expect method takes a Chai assertion as an argument, which is then used to check the condition we are interested in.

Both of these syntaxes are valid and can be used interchangeably. However, it’s important to be consistent in your codebase to make it easier to read and maintain.

Cypress Assertion Methods – should.exist, should.be.visible, should.include #

Cypress provides a number of built-in assertion methods that you can use to check the state of your application. Here are some of the most commonly used methods:

should.exist #

The should.exist method is used to assert that an element exists on the page. Here’s an example:

cy.get('#my-element').should('exist')

In this example, we are using the should.exist method to assert that an element with the ID “my-element” exists on the page.

should.be.visible #

The should.be.visible method is used to assert that an element is visible on the page. Here’s an example:

cy.get('#my-element').should('be.visible')

In this example, we are using the should.be.visible method to assert that an element with the ID “my-element” is visible on the page.

should.include #

The should.include method is used to assert that a string includes another string. Here’s an example:

cy.get('#my-element').should('include', 'hello')

In this example, we are using the should.include method to assert that an element with the ID “my-element” includes the string “hello”.

Using Chai Assertion Library with Cypress #

In addition to the built-in Cypress assertion methods, you can also use the Chai assertion library with Cypress. Chai provides a wide range of assertion methods that you can use to check the state of your application.

To use Chai with Cypress, you need to install the chai package:

npm install chai --save-dev

Once you have installed Chai, you can use it in your tests like this:

import { expect } from 'chai'describe('My test suite', () => {  it('should test something', () => {    expect(true).to.be.true  })})

In this example, we are importing the expect method from the Chai library and using it to assert that a boolean value is true. Chai provides a wide range of assertion methods that you can use to check the state of your application, so be sure to check out the official Chai documentation for more information.

Advanced Cypress Assertions – expect in Cypress, should.not, etc. #

Cypress also provides a number of advanced assertion methods that you can use to write more complex tests. Here are some of the most commonly used methods:

expect in Cypress #

The expect method in Cypress is a native assertion method that you can use to assert the state of your application. Here’s an example:

expect(cy.get('#my-element')).to.be.visible

In this example, we are using the expect method to assert that an element with the ID “my-element” is visible on the page.

should.not #

The should.not method is used to assert that a condition is false. Here’s an example:

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

In this example, we are using the should.not method to assert that an element with the ID “my-element” is not visible on the page.

should.have.attr #

The should.have.attr method is used to assert that an element has a certain attribute. Here’s an example:

cy.get('#my-element').should('have.attr', 'data-id', '123')

In this example, we are using the should.have.attr method to assert that an element with the ID “my-element” has a data-id attribute with a value of “123”.

Writing Robust Tests with Cypress Assertions #

Now that we have covered the basics of Cypress assertions, let’s take a look at how to write robust tests using assertions. Here are some best practices to keep in mind:

Use descriptive test names #

Make sure to use descriptive test names that explain what the test is checking for. This will make it easier to understand the purpose of the test and troubleshoot any issues that arise.

Use multiple assertions #

Use multiple assertions in your tests to ensure that your application is behaving as expected. This will help you catch any issues that may be missed with a single assertion.

Use beforeEach and afterEach hooks #

Use the beforeEach and afterEach hooks to set up and tear down your tests. This will ensure that your tests are starting from a consistent state and cleaning up after themselves when they are finished.

Use custom commands #

Use custom commands to encapsulate common assertions and reduce code duplication. This will make your tests easier to read and maintain over time.

Common Cypress Assertion Mistakes and How to Avoid Them #

Here are some common mistakes that developers make when using Cypress assertions, along with tips on how to avoid them:

Not waiting for elements to exist #

Make sure to wait for elements to exist on the page before trying to assert their state. Cypress provides a number of built-in methods for waiting, such as cy.wait and cy.get(…, { timeout: … }), that you can use to ensure that your tests are running at the right time.

Not using should or expect consistently #

Make sure to use should or expect consistently in your tests. Mixing the two can make your code harder to read and maintain.

Not using multiple assertions #

Make sure to use multiple assertions in your tests to ensure that your application is behaving as expected. This will help you catch any issues that may be missed with a single assertion.

Not using custom commands #

Make sure to use custom commands to encapsulate common assertions and reduce code duplication. This will make your tests easier to read and maintain over time.

Best Practices for Using Cypress Assertions #

Here are some best practices to keep in mind when using Cypress assertions:

Keep your tests short and focused #

Make sure to keep your tests short and focused on a single aspect of your application. This will make it easier to troubleshoot any issues that arise and reduce the likelihood of false positives.

Use descriptive test names #

Make sure to use descriptive test names that explain what the test is checking for. This will make it easier to understand the purpose of the test and troubleshoot any issues that arise.

Use beforeEach and afterEach hooks #

Use the beforeEach and afterEach hooks to set up and tear down your tests. This will ensure that your tests are starting from a consistent state and cleaning up after themselves when they are finished.

Use custom commands #

Use custom commands to encapsulate common assertions and reduce code duplication. This will make your tests easier to read and maintain over time.

Cypress Assertion Examples for Real-World Scenarios #

Here are some examples of Cypress assertions in action:

Testing a login form #

describe(‘Login form’, () => {  beforeEach(() => { 

cy.visit(‘/login’)  }) 

it(‘should display an error message when the username is incorrect’, () =>

{    cy.get(‘#username’).type(‘invalid’)   

cy.get(‘#password’).type(‘password’)   

cy.get(‘button[type=”submit”]’).click()   

cy.get(‘.error-message’).should(‘be.visible’)   

cy.get(‘.error-message’).should(‘contain’, ‘Invalid username’)  })

it(‘should display an error message when the password is incorrect’, () => { 

cy.get(‘#username’).type(‘valid’) 

cy.get(‘#password’).type(‘invalid’) 

cy.get(‘button[type=”submit”]’).click()   

cy.get(‘.error-message’).should(‘be.visible’)   

cy.get(‘.error-message’).should(‘contain’, ‘Invalid password’)  }) 

it(‘should redirect to the dashboard when the username and password are correct’, () => {   

cy.get(‘#username’).type(‘valid’)    cy.get(‘#password’).type(‘valid’)   

cy.get(‘button[type=”submit”]’).click() 

describe(‘Login form’, () => {  beforeEach(() => {  cy.visit(‘/login’)  }) 

it(‘should display an error message when the username is incorrect’, () => {   

cy.get(‘#username’).type(‘invalid’)    cy.get(‘#password’).type(‘password’)   

cy.get(‘button[type=”submit”]’).click()   

cy.get(‘.error-message’).should(‘be.visible’)   

cy.get(‘.error-message’).should(‘contain’, ‘Invalid username’)  }) it(‘should

display an error message when the password is incorrect’, () => { 

cy.get(‘#username’).type(‘valid’)  cy.get(‘#password’).type(‘invalid’) 

cy.get(‘button[type=”submit”]’).click()   

cy.get(‘.error-message’).should(‘be.visible’)   

cy.get(‘.error-message’).should(‘contain’, ‘Invalid password’)  })  it(‘should

redirect to the dashboard when the username and password are correct’, () => { 

  cy.get(‘#username’).type(‘valid’)    cy.get(‘#password’).type(‘valid’)   

cy.get(‘button[type=”submit”]’).click()  cy.location(‘pathname’).should(‘eq’,

‘/dashboard’)  })})

In this example, we are testing a login form with three different scenarios: when the username is incorrect, when the password is incorrect, and when both the username and password are correct. We are using multiple assertions to check that the error message is displayed correctly and that the user is redirected to the correct page.

Testing a shopping cart #

describe(‘Shopping cart’, () => {  beforeEach(() => {    cy.visit(‘/cart’)  })

it(‘should be empty when no items have been added’, () => {   

cy.get(‘.cart-empty-message’).should(‘be.visible’) 

cy.get(‘.cart-items’).should(‘not.exist’)  }) 

it(‘should display the correct number of items when they have been added’, () => { 

cy.get(‘#add-to-cart-button’).click()   

cy.get(‘.cart-items’).should(‘have.length’, 1)   

cy.get(‘#add-to-cart-button’).click()   

cy.get(‘.cart-items’).should(‘have.length’, 2)  }) 

it(‘should display the correct total price when items have been added’, () => { 

cy.get(‘#add-to-cart-button’).click() 

cy.get(‘.cart-total’).should(‘contain’, ‘$9.99’) 

cy.get(‘#add-to-cart-button’).click()   

cy.get(‘.cart-total’).should(‘contain’, ‘$19.98’)  })})

In this example, we are testing a shopping cart with three different scenarios: when no items have been added, when items have been added and the cart displays the correct number of items, and when items have been added and the cart displays the correct total price. We are using multiple assertions to check that the cart is behaving correctly.

Conclusion – Mastering Cypress Assertions for Confident Test Writing #

In this article, we have explored the basics of Cypress assertions, including their syntax, methods, and best practices. We have also covered some common mistakes to avoid and provided examples of Cypress assertions in action.

By mastering Cypress assertions, you can write robust tests with confidence and ensure that your application is behaving as expected. So what are you waiting for? Start using Cypress assertions in your tests today and see the benefits for yourself!

If you want to learn more about automation testing with Cypress, join LSET today and get access to our comprehensive training program. You’ll learn everything you need to know to write effective tests and ensure the quality of your applications.