Home / Blog

Cypress – the next generation testing tool

Jason Li
Sr. Software Development Engineer
Skilled Angular and .NET developer, team leader for a healthcare insurance company.
August 19, 2020

Cypress website is considered as a next-generation front-end testing tool that is built for the modern web. In other words, it is an open-source tool. Cypress helps to test anything that runs in a browser. Moreover, the ecosystem of cypress consists of two products – Dashboard and cypress test runner. The dashboard is a paid service whereas the test runner is an open-source service. However, the cypress test runner is all that you need to run and write your tests. The Dashboard service records your tests later after integrating cypress with CI provider and building up your suite of tests. Besides, it is completely optional as well as value-added service.

Testing is a critical process in any sort of application development. The success or failure of the app depends entirely on it. The process of website testing is very different from conventional software testing. Many factors make web testing more challenging for the testers and act as big hurdles to the testing efforts.

Why Choose Cypress?

It is very easy to set up Cypress. You simply need to install all drivers as well as the .exe file and dependencies will be automatically configured and installed for you. Cypress uses JavaScript to write tests and is written in JavaScript. Also, JavaScript is the most comfortable language for web developers is considered as web developer's language. Hence, Cypress is considered to be an efficient test automation framework that is developer-friendly. It can be used for integration testing, Unit testing, or end-to-end testing. Cypress also works at the network layer by alerting as well as reading web traffic. Due to this feature, cypress is capable of controlling the entire automation process from top to bottom. Furthermore, it can understand everything inside and outside of the browser.

Cypress makes it simple to write tests, set up your tests, debug tests, and run tests. Further, Cypress was primarily designed to overcome some of the pain points of using Selenium, such as the difficulty in implementation, slowness, and complex set up procedure. Hence, unlike Selenium, Cypress comes with a very different architecture. As you know, Selenium executes remote commands across the network and operates by running outside the browser. But Cypress works the opposite way - it is executed in the same run loop as your application under test and it runs inside the browser. Having access to both frontend and backend gives cypress the ability to respond to any of the application's events in real-time. Cypress does this even if at the same time it is working outside of the browser on a task that requires a higher privilege. Thus, Cypress is capable of delivering more consistent and effective results compared to any other testing tool.

Behind the Cypress is a Node.js server that constantly synchronizes, communicates, and performs tasks along with Cypress on behalf of each other. Moreover, tests run much more reliably and quickly than Selenium-based tests in Cypress. Cypress comes with a wide variety of features that set it apart from other open-source testing frameworks that are currently available. Here is an overview of some of the features or characteristics of Cypress making it unique:

• With a testing library, mocking libraries, assertion library, all bundled in it, Cypress is an all-in-one testing framework. Sinon, Chai, and Mocha are all bundled in cypress.

• The automatic waiting feature of Cypress frees you from adding waits. It takes off the pain of synchronization hell while writing scripts by automatically waiting for assertions and commands before moving on. Once the elements are loaded on to a webpage and the browser launches, it automatically waits for the element with its control property.

• Cypress enables you to easily control, test, and stub edge cases without involving your server. Also, it allows network traffic control.

• Cypress takes videos as well as snapshots as your tests run. You can understand what exactly happened at each step by simply hovering over commands in the command log to see the snapshots.

• Cypress lets you debug directly from tools like ChromeDevTools and makes debugging easy.

The web automation testing tool of Cypress is used to automate testing for modern web applications. However, Cypress doesn't build on Selenium WebDriver. Instead, it is architecturally and fundamentally different from Selenium. It is based on Chai and Mocha syntax which is common amongst the Javascript users. It will be easy to start using Cypress if one has ever worked with Javascript. Selenium is made up of the WebDriver, libraries, or bindings. All these components make controlling the browsers easier for test engineers. There's no network communication or what so ever. Instead, Cypress uses its own DOM manipulation strategy. Right now, the only disadvantage of using Cypress is that it only supports Chrome. But shortly, other browsers will be added.


Pre-requisites for Cypress

• Knowledge about Chai and Mocha syntax

• NPM should be installed and working

Cypress is an authentic next-generation front end testing tool that is built for the modern web. Besides, it is the next generation Selenium that enables us to write tests easier, faster, and reliable. Some of the compelling and interesting features with Cypress are the following:

Real-time reloads: Whenever you make changes to your tests, Cypress automatically reloads. See commands execute present in real-time in your app.

Consistent Results: The architecture doesn't use WebDriver or Selenium. Say hello to consistent, reliable, and fast tests that are flake-free.

Cross browser Testing: You can run tests within Chrome-family and Firefox browsers (this includes Electron and Edge) locally. Also, you can run optimal tests in a continuous Integration pipeline.

Automatic Waiting: Cypress never add sleeps or waits to your tests. Before moving on, Cypress automatically waits for assertions and commands. Hence user experiences no more async hell.

Spies, Clocks, and Stubs: Control and Verify the behavior of timers, functions, or server responses. Hence, the same functionality you prefer from unit testing is right at your fingertips.

Network Traffic Control: Easily test, control, and stub edge cases without involving your server. You can now stub network traffic however you like.

Familiar tools: It is built on top of existing frameworks and tools. Besides, writing tests is a breeze with Cypress.

Even though Cypress is most often compared to Selenium both are fundamentally different from each other. Anyway, Cypress is not constrained by the same restrictions as Selenium. This factor enables you to write easier, more reliable, and faster tests. The users will typically be QA engineers or developers building web applications using modern JavaScript frameworks. Cypress helps you to write all types of tests including Integration tests, End-to-end tests, and Unit tests. Cypress may be an alternative to Selenium in many ways. Developers no longer hate end-to-end testing since it is easier and more user-friendly now. Cypress gives the developers and coders the power to code as fast as possible. It makes writing, debugging, setting up, and running tests easy. Cypress addresses the key pain points QA engineers and developers face when testing modern applications. It makes it easier to Write, Set up, Debug, and Run tests. Cypress runs on Node.js, packaged into ‘npm', and is written in JavaScript.

Cypress has direct access to the application under test and runs directly in the browser. Moreover, it displays features like Flake resistance and Parallelization. It Supports Slack reporting or reporting like Mochawesome. Cypress supports all modern web browsers such as angular as well as react testing. It is not based on selenium.

Perks of Cypress

• Auto Reload, act as a real user

• Free as well as open-source

• Rich documentation

• JavaScript testing framework

• Easy and reliable testing for anything that runs in the browser

• Built on top of Mocha and Chai

• Commands retries their assertions automatically

• Active community on stock overflow, GitHub, and Gitter

• Easy Control of response headers, bodies, and status

• Faster response time <20 ms

• Helps you finding locator

For a decade now, Selenium has been a major player in E2E web application testing. But nowadays for modern web applications, Cypress comes into the picture to overcome these shortcomings of Selenium. JavaScript-based Cypress is an end-to-end testing framework that doesn't use Selenium at all. Cypress also uses a TDD/BDD assertion library that can be paired with any JavaScript testing framework. Besides, it makes asynchronous testing simple and fun. In the case of Cypress, which is version-specific, there is no need to add any drivers for the browser. Further, Videos and Screenshots can be captured automatically.

Cypress never adds sleeps or waits to your tests. Instead, it automatically waits for commands as well as assertions before moving on. Whenever the developers make changes to the tests, Cypress automatically reloads. This is an Effective automation tool for UI/Web testing. Mostly, it is the tester-type engineers and QA developers who are known to use selenium for facilitating the functioning of organizations from varied sectors such as computer software, technology, hospitality, information, and financial services. Cypress has been made specifically for QA engineers as well as developers, to help them get more done. Unlike Selenium, Cypress is based on a completely new architecture. Hence, you can now perform easy, reliable, and fast testing for anything that runs in a browser.