Sep 30, 20213 min read

Cypress: Architecture, Components and Features

Cypress is a purely JavaScript-based front end testing tool built for the modern web. It aims to address the pain points developers or QA engineers face while testing an application. Cypress is a more developer-friendly tool that uses a unique DOM manipulation technique and operates directly in the browser. Cypress also provides a unique interactive test runner in which it executes all commands.

Cypress Architecture:

Most testing tools (like Selenium) operate by running outside of the browser and executing remote commands across the network. But the Cypress engine directly operates inside the browser. In other words, it is the browser that is executing your test code.

It enables Cypress to listen and modify the browser behavior at run time by manipulating DOM and altering Network requests and responses on the fly.

It open doors to new kind of testing along with ultimate control over your application (front and back). Let's see the difference between test execution architecture of Selenium and Cypress with the help of the following images:

As we can see in the case of Selenium, each of the browsers has provided their drivers, which interacts with the browser instances for the execution of the commands. In contrary to this, all the commands executed within the browser in Cypress, as seen below:

Cypress Browser Support: Canary, Chrome, Electron(Default), Chromium, Mozilla Firefox browsers (beta support) and Microsoft Edge (Chromium-based) browsers

With Cypress, you can do Unit, Functional, Integration, End to End Testing. It fits every need of a Test Pyramid.

Cypress Components

It has two main components that come by default in its installation -

Cypress Test Runner and
Cypress Dashboard.

One of them is used as a runner to run our Cypress test cases on the local machine, and the other tracks our runs and status from our Automation Suite.

1. Test Runner: It runs tests in a unique interactive runner that allows you to see commands as they execute while also viewing the application under test. Below are the key subcomponents of the test runner that we should pay focus while executing our test cases.

Test Status: Menu shows you a summary of how many tests passed, failed, or in progress and time took for the test.
Url Preview: shows you the URL of your test and helps you track any URL route.
Viewport Sizing: set your app viewport size to test responsive layouts.
Command Log: It shows you the command logs as it executes for all the tests that execute.
App Preview: you can see the test while commands execute.

2. Dashboard Service: The Cypress Dashboard is a service that provides you access to recorded tests - typically when running Cypress tests from your CI provider. The Dashboard provides you with insight into what happened when your tests ran.

Features:

Time Travel: It can take snapshots of the application when the tests are running. Then as a test developer, we can hover over each command in the Test Runner panel to see what happened at each step.
Debuggability: It enables debugging of the tests directly from the familiar tools like Developer Tools. The readable errors and stack traces make debugging lightning fast.
Automatic Waiting: With Cypress, there is no need to put explicit waits or sleeps to your tests. It automatically waits for commands and assertions before proceeding.
Spies, Stubs, and Clocks: Similar to unit test cases, you can verify and control the behavior of functions, server responses, or timers at run time using the spies and stubs provided by Cypress.
Network Traffic Control: Using Cypress, you can stub network traffic as you like and customize the response of your API calls as per your need.
Consistent Results: As Cypress doesn't use Selenium or WebDriver and executes tests directly in the browser, it aids for fast, consistent, and reliable tests that are flake-free.
Screenshots and Videos:* It takes screenshots automatically on failure, or record videos of your entire test suite when running from the CLI.*

Advantages of Cypress

Cypress framework captures snapshots at the time of test execution. This allows QAs or developers to hover over a specific command in the Command Log to see exactly what happened at that particular step.
One doesn’t need to add explicit or implicit wait commands in test scripts, unlike Selenium. Cypress waits automatically for commands and assertions.
Developers or QAs can use Spies, Stubs, and Clocks to verify and control the behavior of server responses, functions, or timers.
The automatic scrolling operation ensures that an element is in view before performing any action (for example Clicking on a button)
Earlier Cypress supported only Chrome testing. However, with recent updates, Cypress now provides support for Firefox and Edge browsers.
As the programmer writes commands, Cypress executes them in real-time, providing visual feedback as they run. Cypress carries excellent documentation.