TestCafe vs Cypress: Core Differences
By Ganesh Hegde, Community Contributor - August 18, 2021
Other frameworks such as TestCafe and Cypress have emerged as options in the test automation world. In fact, Single Page Application (SPA) is a new buzzword floating around in testing circles. Though the older testing frameworks support SPAs, tests tend to be flaky and difficult to maintain.
With the evolution of modern applications, the evolution of the modern test automation framework became equally necessary. Naturally, there exist now multiple tools for executing test automation for QAs to choose from.
The Angular team did a survey on automation frameworks, which revealed some interesting results about the tools in use, and the percentage of testers preferring each one.
Image Courtesy: Angular Github
Why compare Testcafe vs Cypress?
Cypress and TestCafe both are popular tools for automating modern applications and both share a lot of similarities. With Protractor’s exit from the market, it’s worth exploring new trending frameworks such as Testcafe and Cypress for anyone looking for Selenium alternatives.
Though both Cypress and Testcafe are relatively new, they have evolved over a few years and become quite feature-rich. In terms of architecture, Cypress runs the actual test code in the browser whereas TestCafe runs it in Node. This means Cypress tests have access to real DOM elements but in TestCafe, communication between the tests and the DOM must be serialized.
A frequently searched question in this regard is: What is the difference between Cypress vs TestCafe and which is the best test automation tool?
The answer lies in evaluating both tools, comparing key differences, and listing key similarities.
It is built for the modern web and aims to address the pain points developers or QA engineers face while testing an application. Cypress is a developer-friendly tool that uses a unique DOM manipulation technique and operates directly in the browser. It also provides a unique interactive test runner.
Cypress is fundamentally built on a different architecture compared to Testcafe. It supports different types of testing:
- End to End Testing
- Unit Testing
- Integration Testing
- API Testing
Cypress Trends on Github
The data below is gathered from the official Cypress github repository:
- Stars: 32,200
- Forks: 1,900
- Used By: 235,000
- Releases: 386
- Contributors: 288
Cypress Trends on NPM
The data below is gathered from the official Cypress npm:
- Weekly downloads: 2,384,947
- Issues: 1501
- Pending pull requests: 48
- Distribution License: MIT
- Time Travel: Cypress runs on its own window and takes snapshots while tests run. Hover over commands in the Command Log to see exactly what happened at each step.
- Debuggability: Cypress allows direct debugging from Developer Tools. Readable errors and stack traces make debugging fast and efficient.
- Automatic Waiting: In Cypress, testers do not need to provide Explicit Wait. Cypress automatically waits for commands and assertions before moving on. No more async hell.
- Spies, Stubs, and Clocks: This feature helps to verify and control the behaviour of functions, server responses, or timers.
- Network Traffic Control: Easily control, stub, and test edge cases without involving the server. Stub network traffic as it is required.
- Consistent Results: Since Cypress uses its own browser control strategy, it is comparatively faster, more consistent, and enables reliable tests that are flake-free.
- Screenshots and Videos: Screenshots are taken automatically on failure. One can take videos of the entire test suite when run from the CLI.
- Cross browser Testing: Cypress supports running tests within New Edge, Firefox, and Chrome-family browsers.
Limitations of Cypress
- Multiple Tab: Cypress does not support multiple tabs or allow switching between Parent and Child windows.
- Native Mobile Apps: Cypress does not support native mobile apps automation.
- IFrame Support : Cypress support for iframe is limited.
- Parallel Test Execution: Cypress doesn’t support parallel testing on the same or multiple browsers.
- Single Origin Tests: Testers cannot create tests under different origins or URLs. It must always be inline with single origins.
- Selector Support: Cypress supports only CSS selectors natively but there are third party packages which can be pluggable with Cypress to use XPath.
- Assertion Libraries: Cypress supports only Mocha, Chai assertion libraries. However these are sufficient for most test scripts.
TestCafe is mainly used for End-to-End Testing but it can be used for API testing as well.
Since TestCafe is built on NodeJS, one needs to install the NodeJS runtime executables in order to run scripts. Testcafe doesn’t open its own window for debugging like cypress does, but it provides the Live Mode feature which usually works well enough for debugging.
TestCafe Trends on Github
The data below is gathered from the official TestCafe github repository:
- Stars: 9,000
- Fork: 624
- Releases: 345
- Used by: 8,700
- Contributors: 98
TestCafe Trends on NPM
The data below is gathered from the official TestCafe npm:
- Weekly Downloads: 244,431
- Issues: 435
- Pull Requests: 11
- Distribution License: MIT
- Super Easy setup: TestCafe is easy and quick to set up. Anyone who knows the basics can do it on their own.
- No third-party dependency: TestCafe doesn’t depend on any third-party libraries like webdriver, or external jars etc.
- Easy Test Script writing: TestCafe command chaining techniques make teams more productive. 20 lines of code in other frameworks can be just written in 10 to 12 lines using TestCafe syntax.
- Mock Requests: TestCafe helps to emulate HTTP responses to feed sample data to an app, troubleshoot connectivity errors, and cheat downtime.
- Multiple Tab Support: Unlike Cypress, Testcafe provides functionalities like switching between windows and multiple tab support.
- iframe Support: Testcafe supports iframes and one can switch to and from iframes in their tests.
- Parallel Testing: With concurrency mode enabled, TestCafe tests can be run in parallel.
- Automated Waiting: TestCafe waits automatically for elements to appear. There’s no need to insert External Waits.
- Cross Browser Testing: Testcafe supports all major browsers like old and new Edge, Firefox, IE, and all Chrome family browsers.
- Debuggability: Testcafe provides Live Mode which helps to visualize individual actions on the browser for easier debugging.
- Screenshots: TestCafe supports taking screenshots for tests using built-in screenshot commands.
Limitations of TestCafe
- Assertion Libraries: TestCafe supports built-in assertion libraries only.
- Selector Support: By default, TestCafe supports only CSS selectors.
- Execution of Tests: Browsers are not aware that they are running in test mode. So, in some edge cases, automation control can be disrupted. It’s also quite hard to debug possible issues.
Cypress and TestCafe: Key Similarities
|Selector Support||CSS Selectors||CSS Selectors|
|Does it use Selenium Webdriver?||No||No|
|Cross Browser Testing||Yes||Yes|
|Native Mobile Application Support||No||No|
|Modern and Old Web Architecture Application||Yes, Supported||Yes, Supported|
|Premium Features||Cypress Dashboard||Test Café Studio|
|Native XPath Support||No||No|
|Screenshot/Videos for tests||Yes||Yes|
|CI/CD setup complexity||Easy||Easy|
Cypress vs TestCafe: Key Differences
|Setup Complexity||Easy||Easy. Download node packages and start writing scripts|
|Assertion Libraries||Mocha, Chai||Built-in assertion libraries|
|Multiple Tab/Window Support||No Native Support for multiple tabs or windows||Supports multiple tabs and windows|
|iframe Support||Limited Support for iframes||Supports iframes|
|File Upload Feature||Possible with third party libraries||Supports file upload|
|Debuggability||Provides Cypress Window for easy debugging||Provides Live Mode for easy debugging|
|Parallel/Concurrent Browser Testing||Only one browser session at the time||Supports parallel browser testing|
|Reporters||Default Reporter is Spec, Extendable Junit, Mocha supported reporter and custom reporters||Default reporter is Spec, Extendable Junit list, minimal, xUnit, Json and community supported custom reporters|
|Documentation & Community Support||Well written documentation, growing community||Good documentation, community support is less compared to Cypress|
|Premium Features||Cypress Dashboard||TestCafe Studio|
Although Cypress and Testcafe both are modern testing frameworks with a rich set of features, each have their own pros and cons. They differ considerably in terms of architecture and performance.
Instead of just switching to one of the frameworks, gather the test automation requirements at organization level and evaluate each framework against specific organization requirements to choose the correct framework. Both frameworks are popular and have evolved a lot compared to where they started, making them both legitimate choices.
What are some similar open-source tools for Test Automation?
- Playwright: Microsoft’s new introduction to automation testing.
- NightWatchJS: End to End Testing solution written in NodeJS.
- Selenium Webdriver: Selenium core libraries for test automation.
- Puppeteer: Puppeteer is a Node library that provides a high-level API to control headless Chrome.
Note: List of above tools gathered from protractor survey and other sources.
Bear in mind that Cypress testing and TestCafe testing must be executed on real browsers for accurate results. Start running tests on multiple of the latest browsers across various operating systems with BrowserStack. Use instant, hassle-free parallelization to get faster results without compromising on accuracy. Detect bugs before users do by testing software in real user conditions with BrowserStack.
Test on Real Browsers and Devices Free