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