Tutorials Hut

  • Cypress tutorials

  • Introduction to Cypress ,its Architecture and Features

    Cypress is UI automation tool for modern applications/ angular based applications. Cypress is a popular JavaScript-based end-to-end testing framework that provides a simple and intuitive API for writing automated tests. 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.
      • This means that Cypress can interact with the application at a much deeper level than other testing frameworks.

    Cypress also has a built-in Test Runner that provides real-time feedback as you write tests, making it easy to debug and troubleshoot issues. The Test Runner includes a number of features like time travel debugging, which allows you to step through each command in your test and see the state of the application at each point in time.

    Cypress Architecture

    Comparing Selenium and Cypress Architecture

      • Architecture: As mentioned earlier, Cypress runs in the same loop as the application being tested, allowing it to directly control and manipulate the application’s state. Selenium, on the other hand, runs tests in a separate process or thread, which can lead to synchronization issues and make it harder to interact with the application.

      • API: Cypress has a simpler and more intuitive API than Selenium, making it easier to write and maintain tests. Cypress also includes a number of built-in commands and utilities that make common testing tasks easier to perform.

      • Speed: Cypress is generally faster than Selenium, as it eliminates the need for explicit waits and timeouts and can interact with the application more directly.

      • Debugging: Cypress includes powerful debugging tools like time travel debugging, which can make it easier to pinpoint and fix issues in your tests.

      • Browser support: Selenium supports a wider range of browsers than Cypress, which currently only supports Chrome and Electron.


    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 *