Tutorial

Getting Started With Cypress

A Beginner’s Guide To End-To-End Testing

Cypress is a JavaScript-based all-in-one framework for end-to-end testing that already comes with all the built-in features you may need.

But what is end-to-end testing?
E2E (or chain testing) refers to a software testing method that tests the entire product from beginning to the end to ensure the application flow behaves as expected.

And what are the build-in features?
Well, you will have access to a testing framework (Mocha), an assertion library (Chai). Mocking and stubbing (Sinon) included as well. Unlike Selenium, you can only write tests in JavaScript. So, if you want to use Cypress, you need to know at least a little bit of JS.

Setting up the project
For this tutorial, we will use a simple to-do list. You can find the repo here. After you cloned it, open it in your desired code editor.

Installing Cypress
In the project folder, run:

npm i cypress --save-dev

To open the UI use this command:

npx cypress open

You will see a bunch of examples in different folders.
For now, let’s go back to our project.

Getting started
Make sure to have a newer version of Node.js installed as well as the NPM serve package and run:

npx serve

This will start a development server and you should be able to see the app.

Write your first test case
In our project folder/Cypress/Integration/todolist create a new file as todolist.spec.js .

Every time you start writing a new suite of tests wrap it in a describe block. This method is borrowed from Mocha and is for containing one or more related tests. As you can see, it takes a string to describe the test suite and a callback function.

beforeEach() executes before every test case.
In the third line cy is referred to Cypress itself and visit is a method for browsing to a given path.

Next, we’re going to meet with the actual test block, called it.
Keep in mind that you should put every test block inside the describe.

get is a method for selecting elements on the page. When using it we are telling Cypress to ‘grab the heading id in the page’.

Now, let’s see our first test!

Running the test
Open up a terminal and run:

npx cypress open

You should see the Cypress UI opening.
From the list select the todolist.spec.js to start the test.
After that, you will see Cypress opening a browser and going through the page.

Here is your first passed test by using Cypress!

As we discussed earlier, both visit() and get() are Cypress commands and they’re also called implicit assertions. These commands don’t stand independently and always depends on the previously chained parent command. Also, if the element is on the page Cypress will consider the test passed.

Now let’s see another command from our previous code snippet: should(). It creates an assertion and is used in various cases. For example, we checked if a specific element is visible on the page. Another example:

Let’s continue with a new test case:

If you want to check more than one condition, you can use the and() command. It is an alias of should() and it works as a chainer between assertions.

There is a lot of self-describing commands in Cypress and type() is also one of them. Unsurprisingly it’s going to type into our selected element.

Text typed in the type() may include special characters like backspace , esc , enter , etc. There is a bunch of others presented in the Cypress documentation.

check() is used for check checkbox(es) or radio button(s). Those elements are must be an <input> type.

Useful tools
Lastly, there are two pretty handy tools in the Cypress UI that I would like to show you.

One is called time travel. Commands are interactive and when we hovered to the click() event it gives us a chance to manually inspect the DOM of our application under test at the time the snapshot was taken. Cypress also highlights the element(s).

The other one is the target mark next to the refresh button. When selected you can select elements from the page. It makes testing easier in a way that you don’t have to look up every element in the source code.

With this, we can conclude this basic beginner guide as done. Great work!

Conclusion
I hope you learned something new from this article!

With Cypress E2E testing is more enjoyable than ever before and with all the tools it’s even easier. Give it a try if you haven’t used it before!

You can learn more about it in the wonderful Cypress Docs.

If you’d like to see the whole code of this tutorial; here you can find it.

Thank you for reading!