This site runs best with JavaScript enabled.

Lesser known Cypress.io tricks

Filip Hric

September 21, 2020


Cypress.io is pretty amazing, and if you haven’t used it yet and need a jump start, I recommend my super-quick straight-to-the-point course on Udemy. It’s called Cypress test automation for people in a hurry and it’s exactly that. Average video length is 2 minutes, and then it’s practical exercises that help you learn more.

As I create my courses and use Cypress on my own, I often come across undocumented or not so widely used features that you might find helpful. Let’s jump into them.

Routing numbered route

When using .route() command to match your path, you can use wildcards to math the exact api call you need. But sometimes it is just not enough. Your app may call the exact same endpoint twice. To write your test for these types of situations, you can select them both using an array, like this:

1cy
2 .server()
3 .route('POST', '/todos')
4 .as('createTodo')
5
6cy
7 .visit('/')
8
9// create 2 todos via UI using custom command
10cy
11 .addTodo()
12 .addTodo()
13
14cy
15 .wait(['@createTodo', '@createTodo']).then( todos => {
16
17 expect(todos[0].status).to.eq(201)
18 expect(todos[1].status).to.eq(201)
19
20 })

Instead of using an array though, you can select just the second instance of routed network request. This can be done by appending the index number on to the alias itself, like this:

1cy
2 .server()
3 .route('POST', '/todos')
4 .as('createTodo')
5
6cy
7 .visit('/')
8
9// create 2 todos via UI using custom command
10cy
11 .addTodo()
12 .addTodo() // we will wait for a request that happens after this action
13
14cy
15 .wait('@createTodo.2').then( todos => {
16 expect(todos.status).to.eq(201)
17 })

Pro tip: did you know Cypress recently released experimental full-layer network stubbing? Besides xhr requests, you can now route images, static files and fetch requests!

Aliasing DOM element

Routing your network calls is one of the most powerful features in Cypress. To alias them, you can use .as() command, and then use .wait() or .get() command to write a test for that network request.

You can alias your DOM elements in the same way and then use .get() command to select that element later in your test. This is especially useful when you have a list of items on the same level. For example, when using cypress-drag-drop plugin to drag an element onto another.

1cy
2 .get('.todo')
3 .eq(2)
4 .as('third')
5
6cy
7 .get('.todo')
8 .eq(3)
9 .as('fourth')
10
11cy
12 .get('@third')
13 .drag('@fourth')

Custom formatting of .log() messages

I believe that you should write end to end tests as user stories. That is why it is vital that I understand where that story got interrupted on failed test. I have been playing around with ways to create a custom error message for some time now. Mainly because it helps a lot when debugging a failed test from screenshot, or basically captioning an end to end test. There is a way you can customize these messages using markdown formatting syntax.

1cy.log('normal')
2cy.log('**bold**')
3cy.log('_italic_')
4cy.log('[blue](<http://example.com>)')

Custom error messages

Beside custom .log() messages, you can customize your error messages too. I was thrilled to find out that expect() function can actually take a second parameter, which will become an error message on failure.

1cy
2 .get('.todo')
3 .then( todo => {
4 expect(todo, 'Milk was not found').to.contain.text('Buy milk')
5})

Bonus tip: Make your DevTools open automatically in Cypress GUI:

Share article
Cypress test automation course
If you like my articles, you’re going to love my new course on Cypress.io. It’s called Cypress test automation for people in a hurry, and it is exactly what you’d expect. A compact, fast and straight-to-the-point course with lots of practical examples and challenges. Check it out!

More articles coming! Get them to your inbox ✉️



Filip Hric © 2020