THE MODERN TOOL: CYPRESS

Stressful to use tools for testing that takes ages to complete a task? For today's world, people need quick delivery and accomplish tasks through smart work. Therefore within less time and with other good features, the Cypress tool comes into the picture. Cypress is a next-generation tool for reliably testing anything that runs in a web browser. It is a front end testing tool built for the modern web. The article showcases a distinction between Selenium and Cypress too.

Why Cypress?

Cypress is a JavaScript-based end-to-end testing framework. It is built on top of Mocha, which is again a feature-rich JavaScript test framework running on and in the browser, making asynchronous testing simple and fun. Cypress also uses a BDD/TDD assertion library and a browser that can be paired with any JavaScript testing framework.

Brian Mann is the developer of Cypress.io and through a survey, data were collected on testing challenges and addressed most of the shortcomings by developing Cypress. Few advantages that could be named and explained are as follows:

1. Automatic waiting - Cypress automatically waits for the DOM to load, elements to become visible, the animation to be completed, the XHR and AJAX calls to be finished, and much more. Hence, there is no need to define implicit and explicit waits.
2. Real-Time Reloads - Cypress is intelligent enough to know that after saving the test file (xyz_spec.js file), so it automatically triggers the command ‘run’ to the browser as soon as the file is saved. Hence, there is no need to manually trigger ‘run’.
3. Debuggability - Cypress gives the ability to directly debug the app under test from chrome Dev-tools. It not only gives straightforward error messages but also suggests that it should be approached.
4. Cross-browser Testing - Run tests within Firefox and Chrome-family browsers (including Edge and Electron) locally and optimally in a Continuous Integration pipeline.

What Makes Cypress Different?

The architecture of the most testing tools operates by running outside of the browser and executing remote commands across the network, but Cypress is the exact opposite. Cypress executes in the same run loop as the application.

Cypress’s Architecture

Cypress operates at the network layer by reading and altering web traffic on the fly. This not only enables Cypress to modify the incoming and the outgoing of the browser but also to change the code that may interfere with its ability to automate the browser. Cypress ultimately controls the entire automation process from top to bottom.

Having ultimate control over the application, the network traffic, and native access to every host object unlocks a new way of testing. This means that, instead of being "locked out" of the application and it is incapable to easily control it, Cypress lets it alter any aspect of how the application works.

An overview of Cypress and Selenium

I would like to conclude by saying that I personally enjoy Cypress due to a few features that made my work easier. Cypress is an easy to set up tool as it does not have servers, drivers or any other dependency to install or configure. The feature of ‘Time Travel’ where Cypress takes snapshots as the test runs and hover over commands in the ‘Command log’ to preview every step. Another feature is ‘Screenshots and Videos’, wherein screenshots are taken automatically on failure, or videos of the entire test suite when running headlessly(Test execution video attached below). Cypress is one tool that’s less time consuming, easy to use, and therefore recommended tool to be used by others too.