Functional Tests with Cypress

Por Guillem Barnolas

Published on a year ago — 4 reading minutes

The latest functional tests we’ve been doing were with Behat. Behat is a PHP framework for functional tests based on describing the expected behavior in a fairly natural language. You can find more info on the Behat website.

By "fairly natural language," I mean that, taken from its own website, you get things like this:

Feature: Product basket
In order to buy products
As a customer
I need to be able to put interesting products into a basket
Rules:
VAT is 20%
Delivery for basket under £10 is £3
Delivery for basket over £10 is £2
Scenario: Buying a single product under £10
Given there is a "Sith Lord Lightsaber", which costs £5
When I add the "Sith Lord Lightsaber" to the basket
Then I should have 1 product in the basket
And the overall basket price should be £9

What happens in each of those contexts of each scenario (i.e., what happens with the Given there is a....) is something you program yourself in special classes designed just for that. Behat helps a lot by creating the structure of the definitions that still need to be filled in, and then you would just need to complete them.
But hey, if the article is about Cypress and I’ve been reading a lot about Behat, which seems super cool, what’s going on?
The thing is, Behat is mainly designed for the backend. Cypress, on the other hand, was designed with the frontend in mind. This makes writing tests for modern web applications much easier, where the frontend and backend are strongly intertwined. Even if your app isn’t heavily reliant on JavaScript, Cypress has some features that make creating functional tests much easier. Its syntax and API are very user-friendly, so the learning curve is relatively low.

Real-Time Execution.

Cypress allows you to run tests in real-time, which means you can see how your tests run in a web browser as they happen. This is very useful during the test development phase, as you can see exactly what Cypress is doing, which elements it’s interacting with, and where it might be failing. Plus, showing these videos to people where the machine interacts with the application on its own always looks cool and futuristic 😎

Interactive Debugging

Since tests run in a real browser, you can use browser debugging tools like Chrome DevTools to inspect the DOM state, evaluate performance, review network requests, etc., all while the test is running. This makes debugging easier and improves efficiency when writing and maintaining tests.

Time Travel

A unique feature of Cypress is its ability to "time travel." Cypress automatically takes snapshots of the DOM state at every action or assertion. This allows you to go back in time and understand what was happening at each step of your test, which is invaluable for debugging.

Command Chaining

Cypress uses a command chaining pattern similar to jQuery to interact with DOM elements, which is very familiar for those who have worked with JavaScript and jQuery. For example:

cy.get('.some-element') // busca un elemento con la clase "some-element"
  .should('be.visible') // asume que el elemento debería ser visible
  .click() // realiza un clic en el elemento

Application State

With Cypress, you can manipulate the state of your application directly, allowing you to create tests that are faster and less fragile. For example, instead of performing a series of user interactions to log in, you could overwrite the application's state to automatically start a "session," allowing you to jump straight to the scenario you want to test.

Interactive Console

When a test fails, you can open the Cypress console to get detailed information about the failure. The console is interactive, meaning you can click on each step of the test to see what was happening at that specific moment.

Continuous Integration

While the ability to run tests in the browser is one of Cypress's standout features, the tool is also suitable for use in continuous integration environments. Cypress can be configured to run tests in "headless" mode (without a graphical interface), making it easy to integrate with platforms like Jenkins, Travis CI, or GitHub Actions.

Cypress Studio

Whether you're new to functional testing or have been doing it for a while but want to start a new test suite for a project, one of the fastest ways to test with Cypress is to use Cypress Studio (it's an experimental feature, but it's worked great for us). In the configuration, you select that you want to use Cypress Studio:

{
  e2e: {
    experimentalStudio: true
  }
}

Once you've done this, when you run a test from the console, you can add actions, and Cypress Studio will save all those interactions you make with the application in the test you've executed. This makes it much easier to start a series of tests, save them, and then edit them from your favorite IDE to complete them.

Summary

Cypress offers an end-to-end testing environment focused on the frontend that enables real-time execution of tests in a real browser, making debugging and maintenance easier with features like Time Travel, Cypress Studio, interactive console, and a user-friendly syntax. Its ability to directly manipulate the application's state and its easy integration with continuous integration systems make it a highly effective and versatile tool for ensuring the quality of modern web applications.

📫

Hasta aquí el artículo de hoy. ¡Si quieres puedes escribirnos por redes sociales como siempre, o a hola@softspring.es con cualquier duda o sugerencia!