Understanding Cypress.io: An Automated Testing Library

End-To-End testing of modern websites with Cypress

(Image: Getty Images/iStockphoto)

Introduction

One of the most important phase of software development is its comprehensive Testing. Writing and fully implementing an end-to-end test comes with many benefits, the most important one being able to determine whether or not a web application works as intended for the user. Additionally, end-to-end tests ensure that new functionality does not break previously developed features. These concerns are crucial to every enterprise web application and shouldn’t be overlooked.

To perform End-to-End test of an application manually can be cumbersome, this is why most of developers tend to skip or ignore it. There needs to be an automated testing system which can save developer from this long and slow process, that’s when Cypress.io comes into picture.

What is Cypress.io?

Cypress is a JavaScript end-to-end testing framework that allows you to write tests that run in a browser much like Selenium. The key difference is that it is easy to set up, has no dependencies and is a pleasure to write tests with and use. What you get with Cypress is a tool that makes it simple to set up, write, run, and debug tests.

Cypress is built and optimized as a tool for local development.If you’re familiar with tools like Mocha and Chai, you’ve already got a head start. Cypress makes use of these tools under the hood but packs on many more features. With Cypress, you get to test a web application from the perspective of your end users.

Getting Started

Lets take an example of a TODO application and run some test to check its functionality. Run following command in your CLI at root folder of your project.

Install Cypress

$ npm install cypress — save-dev

Folder Structure

Cypress folder structure

After running the above command a folder named cypress and cypress.json file will be added to your root folder. Now lets understand its components.

• Fixtures : Fixtures are used as external pieces of static data that can be used by your tests. You would typically use them with the cy.fixture() command and most often when you’re stubbing Network Requests.
• Integration : Test files are located in this folder. It contains some default tests. To write custom test, create a new file like app_spec.js inside this folder. You’ll spend most of time in this folder only.
• Plugins : It is used to load plugins, by default Cypress will automatically include the plugins file before every single spec file it runs.
• Support : The support file is a great place to put reusable behavior such as Custom Commands or global overrides that you want applied and available to all of your spec files.
• cypress.json : Here you can define configurations like projectId, baseUrl, defaultCommandTimeout, nodeVersion and many more.

Writing tests

Here we’ll write test to check two functionality of our application.

1. Load Website
2. Add a todo

Load Website

It is a very basic test to check whether our site gets loaded or not. Create a new file named loadTodo.spec.js (you can name whatever you want) inside integration folder and open it.

From the code snippet above, the first line simply defines our test suite as “Load Page” — feel free to make it descriptive as you deem fit. After that, we describe what we want to do, which is to show content as a placeholder in this case “TODO loaded”.

The cy.visit() method was used to specify the URL that we want Cypress to visit. This test is expected to pass unless wrong url is provided.

Running test

Run the following command in CLI.

Note: Ensure that your application is running in local server.

npx cypress open

After running this command, following window will pop-up. To run a particular test you’ve to just click on it (in our case loadTodo.spec.js).

Integration test list

This will open your project in a new browser, a visual interface to view the progress of your test.

Browser runs loadTodo.spec test

Green color denotes test is successfully completed and passed. We can also see logs of event that happened during test. Cypress also shows the entire lifecycle of Ajax / XHR requests within your application.

Add a TODO

To test this functionality, create another file named addTodo.spec.js and open it.

cy.get() method helps us to grab/get a html element by its class name (.new-todo) which in our case is text area for entering TODO items.

.type() enters the text “Write a Technical Article” automatically in text area.

.type("{enter}") triggers the onEnter event and todo item is added in list.

.should() is an Assertion that checks whether list has one item or not.

Browser runs addTodo.spec test

Our program has passed all the test so far. One of the neat features of Cypress is that you can actually hover over the commands and you will see a snapshot of when that command ran. It also shows before and after option for an event

before and after tab

Here you can see when before is selected it show todo item in text area(not submitted) and when after is selected todo item is added on the list.

Myth Burst Time

There is a myth regarding Cypress that it can only be used for testing library/framework which are JavaScript friendly like React,Vue.js and other, but that’s not at all true. Cypress is JavaScript friendly but you can test any application whether its in Django, Laravel, Ruby on rails or other with it.

Conclusion

This articles main motive was to make all aware about Cypress and explain some key aspects of it however, we’ve only scratched the surface of its complete feature set. One of the major pros of cypress is that the code, the library and the vocabulary they have used is very much beginner friendly. Understanding the documentation and executing things is so easy that any one can get started with it. I encourage you to check out the official documentation to learn more about it. Hopefully it’ll help you in learning Test driven development approach.