Selleo Labs spółka z o.o.

I am passionate about building beautiful user experiences and finding creative ways of visualizing data. As a Client and Team Lead I implement an Agile approach to mentoring my team, ensuring our solutions remain maintainable, scalable and extensible. From a technological point of view I like challenges and reaching goals while exposing myself to new styles and frameworks.

Jarosław Kisiołek

[TOC]

During our monthly internal day - **Haxorz**, I recently held a workshop dedicated to **End-to-End testing using Cypress**. The workshop was mainly for internal needs, but I thought the topic was something a wider audience could appreciate as well.

I assume that you are here because you want to start or just have started a journey with End-to-End testing. I hope you will find this post useful as an introduction to Cypress Framework: what is it, when to use it and, above all, how to use it. Let’s get started.

## What is End-to-End testing?

End-to-End testing is a technique that scans the entire software ensuring that everything is working as expected and flows smoothly. It **defines system dependencies and checks for integrations**. The goal of E2E is to check the software from the user perspective to avoid malfunctions caused by a failure of any of the subsystems. To find out more about this type of software evaluation, go to the post [How To Conduct End-To-End Testing In Endtest.io?](https://selleo.com/blog/how-to-conduct-end-to-end-testing-in-endtest-io).

End-to-End tests are usually conducted at the end of the development cycle as they cover the UI and analyse whether the application is pleasant to use and the users can achieve exactly what they need to. They are also **crucial** for checking moving parts of software like servers, configuration and other external dependencies.

![Img](https://a.storyblok.com/f/86602/720x490/d860b399ae/end-to-end-testing.jpg)

## What is Cypress?

Cypress is a free, open-source **automation testing tool** created for modern web applications like React or Vue.js. Most interestingly, it is not based on Selenium and therefore works inside the browser DOM elements. What is more, it beats Selenium-based tools in terms of speed, reliability and ease of use.  
Initially, it was developed for unit testing, to be later extended for E2E automation testing.

Cypress provides a **visual interface** to highlight which tests and commands are running, passed or failed. It is helpful for testing interactive applications, allows DOM manipulation, reading and writing data into/from fields, creating redirect and submitting forms.  
The tool uses NPM for JavaScript, making it extremely easy to use with basic knowledge of JavaScript.  
With the help of Cypress, End-to-End, integration and unit tests are super easy to write and debug.

### Pros and cons of [Cypress.io](https://www.cypress.io/)

There should be no surprises that with every tool come pros and cons. Among the **advantages** of using Cypress, there are:

* high execution speed
* ability to take screenshots and videos
* easy debugging
* visualisation of the running tests and commands

![Img](https://a.storyblok.com/f/86602/720x504/49a4b74388/pros-and-cons-of-cypres-io_obszar-roboczy-1.jpg)

However, the tool has some **limitations**:

* limited browser support (Chrome and Firefox)
* only supports JavaScript
* does not support mobile or native events

Let’s now move on to End-to-End testing and briefly explain what it is all about.

<Baner name={software-development} />

## Why Cypress?

As mentioned above, Cypress is fast, reliable and easy to use. As it is highly independent, it is suitable for many projects on the web. It could be integrated into an existing project or run alongside other testing environments. The setup is easy and there are only two prerequisites to Cypress: installing Node.js and any code editor.

When talking about why Cypress is the right tool for testing it is worth mentioning its core concepts:

* **leveraging jQuery’s powerful selector engine** \- Cypress uses jQuery’s DOM querying API, which allows selecting any elements and shortens the test code. However, keep in mind Cypress is **not** like jQuery and if it will be unable to find any matching DOM elements it will automatically retry the query until the element is found or a timeout is reached.
* **asynchronous nature and relying on timeouts** \- it is crucial to understand that Cypress commands do not do anything at the moment they are invoked, but rather queue themselves to be run later. This means Cypress knows when to stop waiting on an app to get into the expected state. It will try to run the given command until it succeeds or timeouts and fails.
* **commands do not return their subjects, they yield them** \- Cypress chains commands together - with each command yielding a subject to the next command until the chain ends or an error is encountered. There is no need to use Promises directly, however, having an understanding of them can be helpful.
* **no need to assert to have a useful test** \- many commands have built-in assertions letting you perform actions like ensuring an element is visible or has a particular attribute, CSS class or state. Assertions enable you to describe the desired state of the application while Cypress will wait until the elements reach this state or fail the test. To get more info about that go to the [documentation](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress.html#Default-Assertions).

Additionally, Cypress offers a complete End-to-End testing experience with Cypress test runner and Cypress dashboard. More about that on the [official website](https://www.cypress.io/).

## Setup and configuration: Timeouts and stuff

Now that we have discussed all the for and against and got to know Cypress, it is time to start the setup and begin testing. Let’s begin with the commands.

To **install** Cypress, in the project folder run:

`npm i cypress --save-dev`

in order to **add** Cypress as a project development dependency.

And then:

`node_modules/.bin/cypress open`

to start a test manager. Cypress will **automatically** add some tests in Cypress/integration folder - remove all of them and create your own test file.

Then, inside the newly created file add an actual test case, in the `it` block write:

<Gist id="351a0cf78a3df21a415604fe570e1af8" />

If that is a bit confusing, a complete guide to Cypress testing can be found [here](https://www.valentinog.com/blog/cypress/).

Additionally, there is a git repo that contains the whole app that is tested using Cypress where you can find various practices and approaches to use when writing tests with Cypress, check out the [real-world app](https://github.com/cypress-io/cypress-realworld-app).

When Cypress is added to a project it creates a cypress.json file on its first run and that's the place where you should customize your global Cypress configuration.

<ReadMore> Read also: [How To Conduct End-To-End Testing In Endtest.io?](https://selleo.com/blog/how-to-conduct-end-to-end-testing-in-endtest-io) </ReadMore>

Let me show you some configuration options and other useful commands.

### Configuration options

* `baseUrl` \- URL used as prefix for cy.visit() or cy.request() command’s URL
* `defaultCommandTimeout` \-  time in milliseconds until default (eg. `cy.get`, `cy.contains` etc.) commands are considered timed out
* `responseTimeout` \- time in milliseconds until a response is considered timed out
* `viewportHeight/Width` \- height/width in pixels for the application viewport

Documentation - [Cypress options](https://docs.cypress.io/guides/references/configuration.html#Options)

### Navigating, getting and interacting with elements

* `cy.visit("<url>")` \- Visit a remote URL, one of the first commands in your test case
* `cy.get("<selector>")` \- Get one or more DOM elements
* `cy.contains("<text_or_regexp>")`\- Get the DOM element containing the text
* `subject.click()` \- Click a DOM element.
* `subject.type("<text_to_type>")` \- Type into a DOM element
* `subject.within(<callback>)` \- Scopes all subsequent cy commands to within this element
* `subject.then(<callback>)` \- Enables to work with the subject yielded from the previous command

### Making assertions

* with explicit subjects \- eg. `expect([]).to.be.empty`,
* with implicit subjects \- `subject.should("your_chainer_here")` \- eg. `cy.get("error").should("be.empty")` can be chained using `.and`

[List of assertions](https://docs.cypress.io/guides/references/assertions.html)

### Debugging

* `cy.pause()` \- pauses the test execution in given moment
* `cy.debug()` \- inserts  JavaScript debugger, requires Developer tools opened

## Summary

Cypress is an **amazing tool** for E2E testing, which, in my opinion, is far better than Selenium.

Because of the ease of writing tests, **high execution time and simple debugging** it is a great solution for developers with any amount of experience, especially those with JavaScript knowledge. Not to mention it is reliable and independent.

However, you should keep in mind that there are some limitations like browser compatibility and the lack of support for native events.

If you are looking for a **specialized developer or a team** not only for executing End-to-End tests but also for building a high-quality solution from start to finish, contact [Selleo](https://selleo.com/contact). Our fully-fledged teams of **experienced engineers** will be happy to help you augment your existing team or outsource the project altogether. Feel free to get in touch to get a free quote and schedule a call.

Cypress is a free, open-source automation testing tool created for modern web apps. It was developed for unit testing, to be later extended for E2E automation testing.

CTOs

Founders

Read Our Blog.
Make better products with us.

Knowledge hub

Business

Technology

Explore our latest articles

How To Get Started With Cypress? A Simple Guide

SaaS Founder Starter Academy