Blazor End to End Test with Cypress

.Net Core Blazor is a great way to create a front-end app for C# developers since we can code using C# only. However, JavaScript ecosystem is huge and there is an awesome test tool which we can take advantage of for Blazor app.

This article is an introduction of the test tool called Cypress which helps us build end-to-end testing.

What is Cypress?

Cypress is automated front-end testing tool which uses jQuery like DOM manipulation to interact in browser. It can show you how UI interaction will behave and what looks like step by step.

Selenium is a popular test tool for end to end testing, too. However, Cypress has been gaining lots of attention and there are over 28K stars in github now. Because of its popularity and super simplicity, i think it’s worth trying it out.

We do not need to install assert or spy libraries such as Chai, Mocha, Sinon, etc. Everything comes in Cypress and it is the only thing we need to install to get it started.

Here is the preview of what it looks like to run tests in Cypress.

Set up Cypress

First, we need to create package.json. In .Net Core app, since we do not usually use package.json to manage dependencies, we can run this command below to create a package.json file. Open the command prompt and cd to the root of the project.

npm init -y

Then, we can install cypress in dev dependencies by the command below.

npm i cypress --save-dev

Since cypress is installed and ready to use, we can use the command below to start.

npx cypress open

When we run this command, cypress opens the test runner and creates folders where we can write test scripts, create mock data, screenshots are saved, etc.

That’s all that we need to do to set up cypress! Before we write the first test, let me share my little todo app for which we are going to write tests.

Write your first end to end test

We will write test scripts under cypress/integration folder. The great thing about Cypress is that it is really easy to write tests. Since Cypress’s syntax is same as mocha, people who are familiar to mocha can understand what it is pretty fast too.

Select elements by data-cy attribute

First thing I want to test is that when user type a task and click “Add” button, a new task should be created. In order to do that, I need Cypress to find the following elements.

1. Textbox to enter a new task
2. “Add” button
3. ul to display added tasks

We can use element’s id or class, but the recommended way by Cypress is to add “data-cy” attribute.

Interact with elements like a user

Since we have data-cy attributes, we can select elements and interact with them such as typing into textbox, clicking button, etc. Here is the first test.

Verify by checking elements

We can check if tests pass by making sure whether elements looks like what we want them to be. Below are a few examples.

cy.get('[data-cy=your-element]').should('be.visible');
cy.get('[data-cy=your-element]').should('not.exist');
cy.get('[data-cy=your-element]').not('be.disabled');
cy.get('[data-cy=your-element]').find('li').should('have.length', 1)

Since Cypress is built on top of Chai, Chai’s BDD/TDD syntax works as well.

Need to test bad scenario? Intercept network calls

It may be not end to end tests but more like integration tests, but if you need to test bad scenario, it is pretty difficult to test using real data or api. it would be great if we have actual data to test bad scenario, but when we do not, Cypress got it covered too. It can intercept network calls and return mock data.

For example, when this todo app loads, it queries localhost:3000/todos to get existing tasks. When API calls fail, we want to show an error message to users.

In order to test this bad scenario, we use cy.intercept like below. This way, when api call for localhost:3000:todos is detected, Cypress will intercept and return what we defined in the second parameter, which is 500 error status.

Here is my whole test spec.

Warning for Blazor Server

Network intercept works great for API, but if you put the server side logic directly in Blazor Server, network intercept does not work since there is no API endpoint to intercept.

Conclusion

Hopefully this article has given some insight about how to create end-to-end tests using Cypress and how easy it is . There are a lot of cool features such as Time travel, Screenshots/Videos, etc. Cypress has an awesome documentation, so please be sure to take a look.

It has been a pleasure experience for me to be able to write solid test cases and be confident about my code when some codes need to be refactored. I hope you will feel the same.