Writing e2e tests using Cypress

At Hashnode, we recently started putting together a test suite for personal blogs. We started evaluating different available options. After a bit of research, we ended up with Jest + Puppeteer and did put together a decent suite using the same. However, we had problems with test stability, and we were rather dissatisfied with the pace of writing new tests. After that, we stumbled upon Cypress. It looked impressive and really promising at a first glance, and we ended up using it for writing our tests.

In this article, I'll help you understand what Cypress is and how you can write your first test using it.

What is Cypress?

Cypress is a next-generation front-end testing tool built for the modern web. It is relatively easy to get started and write tests with it. You can read more about the project here.

Let's write a test

We will use the Todo MVC React app as an example here and write a couple of tests for the same.

Once you have the app ready, add cypress as a dev dependency. I'm using yarn here. You can use npm if you'd like.

You can find more information about the installation process here.

Running Cypress

Now we can open Cypress with command

yarn cypress open

Cypress will scaffold some helper files and examples for you when starting for the first time. Run these example specs to see Cypress in action.

Writing the first test

Cypress will have generated a directory with the following structure.

The integration directory will have all the example tests. Let's delete all of them and write our first test.

$ rm -rf cypress/integration/*

Let's write our first test now. Open your favourite editor and create a file called cypress/intergration/createTodo.spec.js and paste the following code into that file:

describe('Todo', () => {
    it('creates a todo item', () => {
        cy.visit("localhost:8080")
        cy.get('body > .todoapp > div > .header > .new-todo').type('The prime todo {enter}')
        cy.get('body > section > div > section > ul').children().should('have.length',1)
    })    
})

What does the above code snippet do? Let's go through it.

  • Firstly, it visits the homepage of our app. In my case, it is served at localhost:8080
  • Then, it selects the input element and types in the todo Item and then presses enter.
  • Next up, we see if the Todo Item was added by selecting the ul element and checking if the number of children is what we expect to be.

Now we can bring up the Cypress test runner by writing yarn cypress open.

Cool, now let's try running the tests. Run yarn cypress open and you can see it in action.

So, that was our first test. You can find more information about writing and structuring tests in the cypress docs.

What I like about Cypress

  • Automatic waiting. No more async hell.
  • It has a nice UI for the test runner.
  • Test code is more readable and maintainable.
  • Time travel, go back and find out where the tests failed.
  • Automatic video recording of tests.

I hope this helped you. Let me know what you think in the comments below.

Comments (1)

Add a comment
Jemimah O.'s photo

Thanks for this! Just got into testing, so I've been looking up several options.

Gotta try it out. It looks so very readable.