These days, most web applications are driven by JavaScript frameworks that include front-end and back-end development. So, we need to have a robust QA automation framework that covers APIs as well as end-to-end tests (E2E tests). These tests check the user flow over a web application and confirm whether it meets the requirement. 

Full-stack QA testing is critical in stabilizing APIs and UI, ensuring a high-quality product that satisfies user needs.

To test UI and APIs independently, we can use several tools and frameworks, like Selenium, Postman, Rest-Assured, Nightwatch, Katalon Studio, and Jest, but this article will be focusing on Cypress.

We will cover how we can do full stack QA testing using Cypress. 

What exactly is Cypress?

Cypress is a free, open-source, locally installed Test Runner and Dashboard Service for recording your tests. It is a frontend and backend test automation tool built for the next generation of modern web applications.

It is useful for developers as well as QA engineers to test real-life applications developed in React.js, Angular.js, Node.js, Vue.js, and other front-end technologies.

How does Cypress Work Functionally?

Cypress is executed in the same run loop as your application. Behind Cypress is a Node.js server process.

Most testing tools operate by running outside of the browser and executing remote commands across the network. Cypress does the opposite, while at the same time working outside of the browser for tasks that require higher privileges.

Cypress takes snapshots of your application and enables you to time travel back to the state it was in when commands ran. 

Why Use Cypress Over Other Automation Frameworks?

Cypress is a JavaScript test automation solution for web applications.

This all-in-one testing framework provides a chai assertion library with mocking and stubbing all without Selenium. Moreover, it supports the Mocha test framework, which can be used to develop web test automations.

Key Features of Cypress:

• Mocking - By mocking the server response, it has the ability to test edge cases.
• Time Travel - It takes snapshots as your tests run, allowing users to go back and forth in time during test scenarios.
• Flake Resistant – It automatically waits for commands and assertions before moving on.
• Spies, Stubs, and Clocks - It can verify and control the behavior of functions, server responses, or timers.
• Real Time Reloads - It automatically reloads whenever you make changes to your tests.
• Consistent Results - It gives consistent and reliable tests that aren’t flaky.
• Network Traffic Control - Easily control, stub, and test edge cases without involving your server.
• Automatic Waiting - It automatically waits for commands and assertions without ever adding waits or sleeps to your tests. No more async hell. 
• Screenshots and Videos - View screenshots taken automatically on failure, or videos of your entire test suite when it has run smoothly.
• Debuggability - Readable error messages help you to debug quickly.
  
  
  

 Installation and Configuration of the Cypress Framework

• Create project directory
  CODE: https://gist.github.com/velotiotech/7cdb99b2186e4417f69c95964d648de3.js
  

• Download and install the latest LTS Node.jsCreate a sample Node.js project
  CODE: https://gist.github.com/velotiotech/f48a7d325b628cd676e4dceadf0a86e2.js
  

This will also create a package.json file for the test settings and project dependencies.

• Install Node.js packages
  CODE: https://gist.github.com/velotiotech/430b84e1367c30517b9f922e7749e84a.js
• Install Cypress
  CODE: https://gist.github.com/velotiotech/5e4921d9838f9cd181b050fa3d55c4b6.js
  

• This how the package.json will look: 
  CODE: https://gist.github.com/velotiotech/08cc169d72b9cd6a835e5ec424a895c3.js
  

• Open Cypress using npx to execute npm package binaries:
  CODE: https://gist.github.com/velotiotech/2bb71150107d065d1e39d9ee36ad6d1a.js
  

• Let’s create a sample test under Cypress/Integration/examples/tests within the spec file e2e_test.spec.js
  

The test naming convention should be test_name.spec.js 

• To run the Cypress test, use the following command:

CODE: https://gist.github.com/velotiotech/34bce5e62b5a23441497edae95e94820.js

• This is how the folder structure will look: 
  

REST API Testing Using Cypress

It's important to test APIs along with E2E UI tests, and it can also be helpful to stabilize APIs and prepare data to interact with third-party servers.

Cypress provides the functionality to make an HTTP request.

Using Cypress’s Request() method, we can validate GET, POST, PUT, and DELETE API Endpoints.

Here are some examples: 

CODE: https://gist.github.com/velotiotech/a26c12bd838ffa3f71cc0adba0b1aa94.js

How to Write End-to-End UI Tests Using Cypress

With Cypress end-to-end testing, you can replicate user behaviour on your application and cross-check whether everything is working as expected. In this section, we’ll check useful ways to write E2E tests on the front-end using Cypress. 

Here is an example of how to write E2E test in Cypress: 

How to Pass Test Case Using Cypress

1. Navigate to the Google website
2. Click on the search input field 
3. Type Cypress and press enter  
4. The search results should contain Cypress
   

How to Fail Test Case Using Cypress

1. Navigate to the wrong URL http://locahost:8080
2. Click on the search input field 
3. Type Cypress and press enter
4. The search results should contain Cypress  

CODE: https://gist.github.com/velotiotech/92c324def128e451f97a90df7a254a5a.js

Cross Browser Testing Using Cypress 

Cypress can run tests across the latest releases of multiple browsers. It currently has support for Chrome and Firefox (beta). 

Cypress supports the following browsers:

• Google Chrome
• Firefox (beta)
• Chromium
• Edge
• Electron
  

Browsers can be specified via the --browser flag when using the run command to launch Cypress. npm scripts can be used as shortcuts in package.json to launch Cypress with a specific browser more conveniently. 

To run tests on browsers:

CODE: https://gist.github.com/velotiotech/db07934e314235c7d8816058c74bc81f.js

Here is an example of a package.json file to show how to define the npm script:

CODE: https://gist.github.com/velotiotech/e7153b8fc84b1b64a765f7353a59e4e6.js

Cypress Reporting

Reporter options can be specified in the cypress.json configuration file or via CLI options. Cypress supports the following reporting capabilities:

• Mocha Built-in Reporting - As Cypress is built on top of Mocha, it has the default Mochawesome reporting 
• JUnit and TeamCity - These 3rd party Mocha reporters are built into Cypress.
  

To install additional dependencies for report generation: 

Installing Mochaawesome:

CODE: https://gist.github.com/velotiotech/e10bcb615b9cdea739f72649fc7530ef.js

Or installing JUnit:

CODE: https://gist.github.com/velotiotech/19af4c106ef5bd79d278fca6e87fc295.js

Examples of a config file and CLI for the Mochawesome report 

• Cypress.json config file:

CODE: https://gist.github.com/velotiotech/cea437b525a39a1c9978fa3199c06990.js

• CLI Reporting:
  

CODE: https://gist.github.com/velotiotech/e509b17e9bb19a3dbc05779d702cd4b2.js

Examples of a config File and CLI for the JUnit Report: 

• Cypress.json config file for JUnit: 

CODE: https://gist.github.com/velotiotech/48218c4f2f92471bc2ed73c038615b60.js

• CLI Reporting: <cypress_junit_reporting></cypress_junit_reporting>

CODE: https://gist.github.com/velotiotech/1182000a3f5cede3f9ca0da855bfd6e8.js

Additional Possibilities of Using Cypress 

There are several other things we can do using Cypress that we could not cover in this article, although we’ve covered the most important aspects of the tool..

Here are some other usages of Cypress that we could not explore here:

• Continuous integration and continuous deployment with Jenkins 
• Behavior-driven development (BDD) using Cucumber
• Automating applications with XHR
• Test retries and retry ability
• Custom commands
• Environment variables
• Plugins
• Visual testing
• Slack integration 
• Model-based testing
• GraphQL API Testing 

Limitations with Cypress

Cypress is a great tool with a great community supporting it. Although it is still young, it is being continuously developed and is quickly catching up with the other full-stack automation tools on the market.

So, before you decide to use Cypress, we would like to touch upon some of its limitations. These limitations are for version 5.2.0, the latest version of Cypress at the time of this article’s publishing.

Here are the current limitations of using Cypress:

• It can’t use two browsers at the same time.
• It doesn't provide support for multi-tabs.
• It only supports the JavaScript language for creating test cases.
• It doesn't currently provide support for browsers like Safari and IE.
• It has limited support for iFrames.
  

Conclusion

Cypress is a great tool with a growing feature-set. It makes setting up, writing, running, and debugging tests easy for QA automation engineers. It also has a quicker learning cycle with a good, baked-in execution environment.

It is fully JavaScript/MochaJS-oriented with specific new APIs to make scripting easier. It also provides a flexible test execution plan that can implement significant and unexpected changes.

In this blog, we talked about how Cypress works functionally, performed end-to-end UI testing, and touched upon its limitations. We hope you learned more about using Cypress as a full-stack test automation tool.

Related QA Articles

1. Building a scalable API testing framework with Jest and SuperTest
2. Automation testing with Nightwatch JS and Cucumber: Everything you need to know
3. API testing using Postman and Newman