Cypress tips #1 — keeping tests „DRY“ with custom commands

Filip Hric
Mar 14, 2019 · 4 min read

DRY = Don’t repeat yourself

End-to-end tests can sometimes be repetitive. Although you may try your best at keeping number of your tests at an optimal level, there are cases when you cannot avoid repeating yourself.

Take an example here. We will be testing Slido admin interface. Slido provides users with the ability to moderate participant questions on live event. Approved questions are displayed on present view for the audience to see. There are various types of question filters, and all of them have their own sorting:

Image for post
Image for post
Users may want to sort incoming questions, as well as live, starred and archived for various reasons.

If we want to test sorting of each question category, in each test will consist of:

  1. opening the dropdown
  2. choosing sort type
  3. asserting a change in order of questions

Step 3 will be different every time, but first two steps will be painfully similar across tests. If we aim to cover all sorting types, we need to repeat those in 11 tests. That’s too much repetition.

Personally, I prefer readability over minimalism, so I don’t mind when tests are repetitive sometimes. There are cases though, where repetitiveness gets in the way of readability.

Cypress gives us the ability to create a custom command, which can group all the repetitive parts into one simple line. We end up something like this:

Image for post
Image for post
Normally this would be a little longer. It’s not worth going too much work for three lines of code.

Since these are normally used in only few of my tests, I keep them in a separate folder, and add them to my tests using import method. Giving a good name to the custom command can improve readability of your test.

Let’s go back to our example.

As we can see, sorting appears in each question category (Incoming, Live, Starred, Archived). There are two menus that do the sorting, one being on left panel (Incoming), other being on right panel (Live, Starred, Archived).

In tests, we want to create a setup for our test, and then click on the filter to see sorting of questions change. Clicking on filter in a dropdown menu is the repetitive part, which we can hide in a custom command that looks like this:

Image for post
Image for post

To make this custom command more versatile, we have added two arguments. One being the desired type of order (Top, Oldest, Recent) and one for the type of questions (Incoming, Live, Starred, Archived).

Desired ordering type is resolved by cy.contains() command, which selects an element according to text and then clicks on it. This allows us to target the exact type of ordering we need for each test.

Second argument helps us resolve the existence of two separate menus, one being on each panel. Since we will mostly be using right panel, we can default to that one and add an argument only when it is necessary. Using this command in tests looks like this:

Image for post
Image for post

This allows us to use them both in same test, while saving a lot of space across 11 tests.

We can, of course, go crazy and use a custom command for handling more complicated logic, but in that case I strongly advise to examine value of such approach. Then again, if it works for you, go ahead.

Are you using custom commands in Cypress? Do you use them for complex logic? Let me know in comments, I bet we can learn something from each other.

EDIT: You can also add your custom commands to “cy” object for intellisense. That way you can not only keep your code clean, but write it faster. Thanks for the tip Gleb Bahmutov 👍

EDIT #2: While I do like the idea of DRY, I don’t think it is a silver bullet. Sometimes, you may want to repeat yourself in order to make your test more readable. Kent C. Dodds wrote a great blog about AHA programming, a concept that really makes sense in my opinion, if you want to write good tests.

If you liked this article, you’re going to love my new course on Cypress.io. It’s called 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. Click on this link to check it out!

Slido developers blog

Code is poetry

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store