Cypress Tutorial

Recently, there has been a rising demand for test automation frameworks due to the tremendous growth of web applications in the market. Cypress is a fast and reliable testing framework that many developers have come to rely on recently. Cypress is developed to answer all the issues faced by the team while automating an application. It is used by many organizations, such as Revoluta, Alibaba Travels, Bitpanda, etc., in their tech stacks as integration and unit tests can easily be written and debugged with Cypress End to End test. 

This Cypress tutorial will guide you through all its features, pros, and cons, with a real understanding of its efficiency.

What is Cypress?

Cypress is an open-source JavaScript-based end-to-end testing framework for web applications. It is used on a large scale as a free test automation tool. Cypress is designed to write, set up, run, configure, execute, and debug tests easily for web applications. Cypress lets the developers test their web applications without additional configurations, as it runs directly in the browser and uses a built-in test runner. 

Cypress is popular among developers as it is easy to use, has fast execution, and has a good developer experience. It has a unique feature that allows the developers to debug the test by rewinding and replaying any browser action. It also has an impressive API for interacting with web pages, making it easy for developers to test the behavior of a web application. Explore the full Cypress tutorial to know more.

Features of Cypress Testing

Cypress is an end-to-end testing framework with the following advantages. 

• The installation process of the Cypress framework is easy and simple.
• Cypress does not require driver binaries, and the code executes natively in the browser.
• The test code has access to the application's JS objects as both the test code and the application run in the same browser.
• Cypress is remarkable as it allows code to be easily altered and executed instantly.
• Cypress features a dashboard for comprehensive reporting.
• Due to Cypress' built-in auto-wait features, tests are more reliable.
• It provides a platform for the execution of coinciding tests.
• Cypress documentation is extensive, and the user base of Cypress is active and vibrant.
• The framework is equipped to handle both Behaviour-Driven Development (BDD) approaches and Test-Driven Development (TDD) procedures.
• Screenshots of the examination procedure are taken throughout each stage. These can be very helpful in resolving any problems that arise with the test.
• Cypress features an in-built request wait functionality, so additional waits are no longer needed to set up.

What makes Cypress so special?

1) Cypress Architecture

Cypress is built on a modern architecture that makes it easy to set up, write, run, and debug tests. Cypress is built on a Node.js server and uses the Mocha test framework to structure and organize tests. It also uses the Chai assertion library to verify test results. Cypress utilizes a custom command line interface (CLI) to interact with the tests. The architecture of Cypress is designed to provide a fast, secure, and reliable testing environment.

Cypress architecture is very performant and reliable when testing web applications Tests run faster and more reliably due to the architecture’s non-blocking I/O model, which allows for multiple tasks to be handled simultaneously. Tests also require less code and are easier to maintain due to Cypress’ simplified assertion library and test runner.

2) Cypress Test Runner

The Cypress Test runner is a unique interactive built-in test runner with the Cypress testing framework. The Cypress Test Runner is launched by running the Cypress command in the terminal. It provides a user interface for running tests, displaying the results of those tests, and debugging any issues that may arise. 

While viewing the application under test allows you to see the commands as executed. Any changes made to the test code will automatically be reflected in the test runner without manually reloading the browser. It provides a 'time-travel' feature that allows developers to see the state of the browser at any point in time during the test, which helps in debugging the test.

3) Cypress Dashboard

The Cypress Dashboard is a cloud-based service that allows developers to record test runs, view screenshots and videos of test runs, and share test results with others, typically while running the Cypress tests. The Cypress Dashboard allows developers to view the results on a web-based dashboard and provides insight into what happened when the tests ran.

The Cypress Dashboard provides a feature called "parallelization," which allows running multiple tests simultaneously on different machines; this helps in reducing the time taken to run all the tests. It also provides methods to schedule tests to run automatically and provides a way to monitor the test execution remotely. It is a paid service.

How to use Cypress with continuous integration?

Cypress can be integrated with various continuous integration (CI) platforms. The process of integrating Cypress with a CI platform varies depending on the platform you are choosing. Here are the basic steps to integrate Cypress with a CI platform:

Step 1: Make sure Cypress is installed in your project by running the command.

npm install cypress --save-dev

Step 2: Run your Cypress tests; this typically involves creating a configuration file (e.g., .travis.yml, circle.yml) and specifying the commands that should run to execute your tests.

Step 3: Configure your CI platform to run the Cypress test command, which is:

cypress run

Step 4: To record the test results, Cypress provides a command that records the test result and stores it in the Cypress Dashboard for further analysis.

cypress run --record --key=abc123

Step 5: Schedule your test runs to run at specific intervals.

Step 6: Cypress Dashboard provides a way to monitor the test execution remotely and analyze the test results.

The integration process varies depending on the CI platform you are using and the specific requirements of your project. Refer to the documentation provided by the CI platform and Cypress for more information on integrating Cypress with your CI platform.

How to use Cypress in a continuous delivery workflow

Cypress can be used in a continuous delivery (CD) workflow to test web applications automatically. Here are the basic steps to use Cypress in a Continuous Delivery workflow:

1. Make sure Cypress is installed in your project by running the command in the same way as shared in the first step of integrating Cypress with a CI platform.
2. After successful installation, write automated tests using Cypress to test various web application functionalities.
3. Run Cypress tests as a part of the continuous integration (CI) process to ensure that changes made to the code do not break the existing functionality.
4. After running the Cypress test, record the test results in Cypress Dashboard for further analysis.
5. Monitor the test execution remotely and analyze the test results provided by the Cypress Dashboard. 
6. Once the tests have been run and passed, the application can be deployed automatically using a CD tool (Jenkins, Travis, or CircleCI).
7. To run at specific intervals, schedule the test runs and deployment.
8. To ensure everything is working as expected, continuously monitor the application in production and run tests periodically.

For specific information on how to use Cypress in a CD workflow,  it is important to refer to the document provided by the CD tool and Cypress, as the Continuous Delivery workflow varies depending on the project's specific requirements.

How to write end-to-end tests for native mobile applications using Cypress?

Cypress is a web-based end-to-end testing framework. Cypress is designed to test web applications that run in a browser. In the following example, all the functions come from Mocha other than the one that begins with cypress. 

All the test files will begin with a “block” or describe () function. This function enables a way to make things easier to read and provides a way to organize the tests. As describe () can provide the condition for the tests written inside them, test files can have multiple describe ().

// app.spec.js
describe ("React TodoMVC", () =>{
  it("adds a single todo", () =>{
    су.visit( ("http://localhost:8888") // Arrange
    су.get(".new-todo"). type ("Buy Milk{enter}") // Act
    cy.get(".todo-list li"). should ("have. length", 1) // Assert
})
})

We have it blocked in end-to-end tests for native mobile applications. This is the actual test, where the test code goes as well. First, a test name, “adds a single todo," is provided and passed in a callback function. The three things that are required to write end-to-end tests for native mobile applications using React TodoMVC app are:

• Arrange: Visit the URL http://localhost:8888
• Act: Type in the string  "Buy Milk," press the Enter key and get the element with the class of .new-todo.
• Assert:  Declaring that single todo is added to the application.

It's important to note that this approach requires a good knowledge of mobile testing; Cypress, a web-based testing framework, requires additional tools to test mobile apps.

Installation Process of Cypress for Automation

The installation process of Cypress depends on the development environment you are using. Here are the general steps to install Cypress in a local development environment:

Step 1: Cypress requires Node.js to be installed on your machine. You can download the latest version of Node.js from the official website and follow the installation instructions.

Step 2: Once the installation is done, create a new project directory and initialize it as a Node.js project by running the below-mentioned command in the terminal. 

npm init

Step 3: install Cypress, run the below-mentioned command in the terminal. This command installs Cypress as a development dependency in your project.

npm install cypress --save-dev

Step 4: Once Cypress is installed, you can open the Cypress Test Runner by running the below-mentioned command in the terminal

npx cypress open

Step 5: As Cypress uses the Mocha test framework, you can create a test file in the integration folder inside the cypress folder.

yarn add cypress --dev

It is also possible to install Cypress via yarn, which is another package manager for javascript; the command is:

After Cypress is installed, you can start writing and running tests for your web application. Cypress provides many examples and documentation on how to use the framework, which you can refer to for more information.

Cypress vs Selenium:

Drawbacks of Cypress

Being a powerful and popular end-to-end testing Cypress framework has some drawbacks as well:

• Cypress only supports the latest version of Chrome, Firefox, Edge, and Electron compared to Selenium which supports more browsers. 
• Cypress works only on JavaScript and can only use Node.js.
• Cypress does not support older versions of Internet Explorer, which is a drawback for many organizations that use older browsers.
• It does not provide built-in support for visual regression testing, which is used to detect visual changes in a web application.
• Cypress is known to use more memory than other testing frameworks; this can be a problem running multiple tests or on a machine with limited memory.
• Cypress Dashboard is a paid service, which could be a limitation for small projects or those with a tight budget.

Conclusion:

Cypress is a globally used automation testing framework. However, before deciding if Cypress is the right choice for your testing needs, it is important to consider the advantages and drawbacks. Before deciding, spend some time and automate a few test cases on a cloud-based platform that integrates with Selenium and Cypress. You will know which automation tool is best for your organization and team in the long run.