Cypress vs WebdriverIO: Key Differences

Automation Testing is quickly becoming a permanent part of the Software Development Life Cycle. The list of automation tools in the modern world is quite exhaustive. Many organizations prefer to choose NodeJS based modern web automation tools since they support automation of Single Page applications like Angular, React, Vue, etc. 

Cypress and WebdriverIO are quite popular in the automation world. Both are unique in their architecture and feature offerings, and both support automation testing of modern web applications. 

This article will discuss the differences and similarities between Cypress and WebdriverIO, allowing QAs to make an informed decision about choosing one for their pipelines. 

Why Compare Cypress and WebdriverIO?

Cypress and WebdriverIO both are trending frameworks in the market. As mentioned before, both support the automation of modern web applications and share a lot of similarities. WebdriverIO has existed for quite a long time, and over the years it has evolved, adding necessary new features such as Native Apps Testing and Video Recording.

Cypress’s initial release was in the year 2014. Since then, a lot of new user-friendly features were added, making Cypress a major contender in testing circles. So it’s worth comparing Cypress and WebdriverIO.

It’s common for QAs to ask the question: “What is the difference between Cypress and WebdriverIO and which one to choose?” The only way to answer it is to explore the features, differences, and similarities of both.

What is Cypress?

Cypress framework is the popular end-to-end automation framework. It is built on NodeJS and provides the ability to write the automation scripts using JavaScript and Typescript programming languages. Cypress quickly gained users because of its unique features such as debuggability, stable test runs, time travel, automatic waiting, and screen capture.

But like any other automation framework, Cypress also has some limitations like iFrame Support, multiple window support, cross-origin restriction, etc. Cypress is an open-source framework that comes with an MIT license. One can just install Cypress npm node packages and start testing.

Cypress Trends

• Stars:32.7K
• Fork:1.9K
• Used By:250K
• Contributors:289
• Weekly Downloads: 2,491,295

Data Source: Cypress Github and NPM

Key Features of Cypress

• Easy to Set Up: Cypress is easy to set up. Simply install Cypress node packages and start testing.
• Debugging: Cypress provides various ways to debug and analyze the test scripts. Cypress provides debuggability features like readable stack trace, console logs, pause test, and browser developer tools control.

• Multi-Level Testing: Cypress is not limited to browser-based end-to-end testing flows. It also supports unit testing, integration testing, and API testing.
• Screenshots: Cypress provides the option to take screenshots of tests as a configurable option. The screenshot option is available for both headful and headless mode.
• Video recording: Testers can record the test on video and replay it to see how their tests are executed.
• Auto Wait: Cypress automatically waits for elements to load before executing commands and assertions. Testers usually do not need to specify additional waits.
• Spies, Stubs, and Clocks: Cypress provides the feature to verify, analyze and control server responses, timers, and functions.
• Network Control: With Cypress, testers can stub network traffic as needed which helps to test edge case scenarios.
• Stable Results: Unlike other frameworks, Cypress executes commands directly within the browser window, which provides more control and leads to more consistent test results.
• Faster Execution: Cypress executes commands directly within the browser so it’s faster compared to the Selenium-based framework. However, this depends on application performance as well.
• Interactive Window: In headed mode, Cypress executes tests in the interactive window and captures screenshots after the execution of each command. So after execution, testers can navigate to executed commands and check what has happened in every test.
• Cross-browser support: Cypress Supports Chromium-based browsers like Edge, Chrome, Electron, and Firefox.
• Community Support: Cypress is bolstered by robust community support.
• Learning and Documentation: Cypress provides good documentation so anyone aware of JavaScript can learn and implement the framework.
• Cypress Dashboard: Cypress offers a commercial solution that offers an in-depth analysis of tests in a single dashboard.

Limitations of Cypress

• Cross-Origin Restriction: Cypress doesn’t allow multiple origin website navigations within a single test.
• Multi-Tab/Window Restriction: Cypress doesn’t support testing multiple tabs or windows. That means testers cannot switch to and from one window to another.
• iFrame Support: Automating iFrame based scenarios using Cypress is challenging.
• Locators: While Cypress supports CSS selectors, it doesn’t come with Xpath locator support. Testers need to rely on an additional plugin to use Xpath.
• Assertion Libraries: Cypress comes with only Mocha, Chai assertion libraries.
• Auto waiting: Though Cypress claims it automatically waits for elements, there are cases where it doesn’t work.
• Async/await: If you use async/await for your Cypress test it might behave unexpectedly.
• Browser Support: Currently Cypress supports only Chromium Family and Firefox. So testers cannot use Cypress to test other browsers like Safari.
• Single Sessions: Testers can’t use multiple sessions or open multiple instances in Cypress.
• CI/CD integration: If testers are using third-party hosted agents for Cypress pipeline execution, the installation of Cypress itself will take a considerable amount of time.
• Page Object Pattern: Page Object Pattern is not encouraged by Cypress even though it is still achievable with some customization.
• File upload and download: File upload and download is a pain in Cypress. Testers often need to rely on third-party packages to make it easy.

What is WebdriverIO?

WebdriverIO framework is an end-to-end testing framework, owned by a non-profit organization called OpenJS foundation and follows W3 recommendations for architectural designs. It is a NodeJS based application that provides the ability to test applications using JavaScript/TypeScript. 

WebdriverIO can be configured to use Webdriver Protocol or ChromeDevTools Protocol. Mostly WebdriverIO is used with WebdriverProtocol since it provides rich features like cross browser testing. WebdriverIO is completely open-source. Unlike Cypress, it doesn’t offer any commercial option.

WebdriverIO Trends

• Stars: 6.9K
• Forks:2K
• Contributors:371
• Used By:34.2K
• Weekly Downloads: 850,955

Data Source: WebdriverIO Github and NPM

Features of WebdriverIO

• Easy to Set up: WebdriverIO follows a simple setup process. Just install node packages using npm and start testing
• Customization: WebdriverIO is highly extendable so users can customize the framework as they need
• Cross Browser Testing: WebdriverIO supports multiple browsers such as Chrome, Edge, Firefox, Internet Explorer, and Safari.
• Native Mobile Application Testing: WebdriverIO framework can be extended to test native mobile applications.
• Cross-Origin Support: WebdriverIO doesn’t restrict origins. Origin doesn’t matter much as testers can automate them unconditionally.
• Multiple Tab/Window Support: WebdriverIO Supports switching to and from multiple windows and tabs.
• iFrame Support: WebdriverIO doesn’t restrict in terms of iFrame. Testers can automate iframe-based scenarios using simple web driver commands.
• Reporters: WebdriverIO supports more than dozens of reporters.
• Testing Framework/Assertions: WebdriverIO supports Mocha, Jasmine, and Cucumber test frameworks.
• Parallel Testing: Testers can configure WebdriverIO to launch multiple instances and execute tests parallelly.
• Screenshots: WebdriverIO can be configured to take screenshots of tests.
• Video: Though WebdriverIO doesn’t support video recording out of the box it can be configured to do so.
• Pipeline Integration: WebdriverIO tests can be integrated into CI Systems like Jenkins, Azure, etc.
• Selectors: It supports various types of selectors including CSS and Xpath.
• Page Object Pattern: WebdriverIO Framework can be easily configured to Page Object Model.
• File Upload and Download: WebdriverIO supports File Upload and Download features.

Limitations of WebdriverIO

• Selenium Limitation Still Exists: WebdriverIO is a custom implementation of Selenium. So, any challenges testers face with Selenium apply to WebdriverIO.
• Confusing Syntax: Though WebdriverIO is a Javascript-based framework, the syntax can be confusing for beginners.
• Network Interception: Network control / Network interception is challenging in Webdriver.
• Typescript Integration: WebdriverIO supports Typescript, but the setup is usually time-consuming.
• Documentation: Some parts of WebdriverIO documentation can seem obtuse and confusing for beginners.

Key Similarities between Cypress and WebdriverIO

Key Differences between Cypress and WebdriverIO

Open Source Frameworks Similar to Cypress and WebdriverIO

• NightwatchJS: A complete NodeJS Based framework for end to end testing
• TestCafe: An End to end testing framework with customized and unique architecture
• Playwright: A new open-source automation tool from Microsoft
• SeleniumWebdriver: Automation testing framework with highly customizable Selenium core libraries
• Puppeteer: NodeJS library that provides high-level API to control Chrome browser

Note: Lists are random and not ranked.

The comparison detailed in this article should help testers and QA managers with making a research-based, fact-driven decision about which framework to choose for their software testing operations.

However, regardless of the framework chosen, tests must be run on real browsers, devices, and operating systems. In the absence of an in-house device lab, find a cloud-based testing platform like BrowserStack offering real browsers and devices for testing on the cloud.

BrowserStack’s cloud Selenium grid offers access to a real device cloud of 3000+ real browsers and devices for automated Selenium testing. Testers can also run Cypress testing on 30+ browser versions with instant, hassle-free parallelization. In other words, testers can utilize BrowserStack’s infrastructure to get 100% accurate results in real user conditions.