Tutorials Hut

Introduction to Cypress ,its Architecture and Features

Cypress is UI automation tool for modern applications/ angular based applications.Cypress architecture and features article is meant to give basic introduction and features of cypress as automation tool.

In this tutorial we will cover below topics:

Cypress architecture and its features

What is Cypress?

    • Cypress is an open-source tool which has earned a name for itself in quite a short time for Web integration and End to End UI test automation.
    • Cypress is a purely JavaScript-based front end testing tool built for the modern web.Cypress is built on Node.js and comes packed as a npm module.
    •  Cypress.io uses a unique DOM manipulation technique and operates directly in the browser hence making execution faster.
    • Cypress.io addresses the difficulties that developers or testers face while testing an application by enabling you to write faster, easier and more reliable tests.
    • Cypress is built on top of the Electron app, and since Cypress runs in the browser, it allows the developers to do very unique DOM manipulations directly in the browser and during testing.
    •  Cypress takes snapshots of events while running cypress tests and can be viewed on the command panel in the test runner. This feature of cypress is called time travel.

Cypress Architecture 

    • Cypress engine directly operates inside the browser. In other words, It is the browser that is executing your test code
    • This enables Cypress to listen and modify the browser behavior at run time by manipulating DOM and altering Network requests and responses at the runtime.
Cypress Architecture

Comparing Selenium and Cypress Architecture

    • Selenium operates by running outside of the browser and executing remote commands across the network.
    • However, Cypress operates inside the browser directly.
    • Selenium has different drivers for different types of browser, which in turn interacts with the browser instances for the execution of the commands.
    • On the other hand, all the commands are executed within the browser in Cypress.Execution of tests is faster using cypress because of this architecture.


Cypress provides many interesting features that makes testing easier and convenient ad debugging faster.Below are the features:

    • Time Travel: Cypress takes snapshots as your test case is executed . Hover over commands in the Command log to see exactly what happened at each step.
    • Debugging: Cypress provides readable errors and stack traces that makes debugging lightning fast.
    • Automatic Waiting: Automatically waits for commands and assertions before moving on. No more async hell.
    • Spies, Stubs, and Clocks: Verify and control of functions, server responses, or timers. Helps during unit testing.
    • Consistent Results: Consistent results are obtained after each run, Cypress architecture doesn’t use Selenium or WebDriver resulting in fast, consistent and reliable tests that are flake-free.
    • Screenshots and Videos: View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI.
    • Cross browser Testing: Run tests within Firefox and Chrome-family browsers (including Edge and Electron) locally and in CI/CD pipeline
Cypress Features
About Author

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    Scroll to Top