Dilpreet Johal

Posted on Apr 18, 2022

Cypress vs WebdriverIO | Which one to pick?

#javascript #testing #webdev #automation

In this article, I will go over one of the most common questions that I get asked and that is – what is the difference between Cypress & WebdriverIO and which one should you pick? We will cover everything from top features, to framework limitations to browser support and a lot more…

Language Support & Popularity

Framework	Cypress	WebdriverIO
Language Support	JavaScript / TypeScript	JavaScript / TypeScript
GitHub Stars	~38K	~7.5K
Downloads (npm)	~3.5M	~1M
Releases	1-2 weeks	Weekly

Both Cypress & WDIO supports JavaScript / TypeScript languages
In terms of popularity, Cypress is doing bit better than WDIO as per GitHub stars and NPM downloads
Both Cypress & WDIO are actively maintained with weekly / bi-weekly releases

Key Features

Cypress	WebdriverIO
Beginner friendly setup	Beginner friendly setup (customizable)
Tests are easy to read & understand	Tests are easy to understand for JS users
Not dependent on Selenium Webdriver	Uses custom implementation of Webdriver
Interactive test runner	CLI test runner only
Built-in wait and retries	Built-in wait and retries
API testing supported	Need external libraries

Both Cypress and WDIO have pretty straightforward setup. Although, with WDIO you get lot more customization option when setting up your project
Cypress tests are more readable when compared to WDIO. WebdriverIO async-await syntax can be confusing for non-JS users
One of the unique things with Cypress is that it has no dependency with Selenium Webdriver making it more faster and stable vs WebdriverIO uses custom implementation of the Webdriver APIs
Cypress comes with an interactive test runner which is quite user friendly and of the most loved features of it. On the other hand, WDIO uses CLI test runner like many other frameworks
Both Cypress and WDIO have built-in wait and retry functionality when searching for elements on DOM
With Cypress, you have built-in API testing support vs with WDIO you can set it up with external library

Limitations

Cypress	WebdriverIO
Limited browser support	Async-await syntax can be confusing for beginners
Cross-origin restrictions	Difficult to debug tests
Multi-tab and multi-window not supported	No paid features
Built-in parallelization not supported	Lots of customization can be overwhelming

Cypress:

One of the major limitations of Cypress is limited browser support (will go over this in detail later in the article)
With Cypress, each individual test can run on single super domain only i.e you cannot access google.com and apple.com within same test.
Cypress does not support multi-tab or multi-browser at the same time
While Cypress supports parallelization, it is part of their paid plan. Free option only has limited no. of runs
Cypress in general is not as customizable compared to WDIO (some of this is also intentional to make it beginner friendly)

WebdriverIO:

With new WebdriverIO changes, you need to write tests using async-await which can be confusing for beginners
It’s bit difficult to debug WebdriverIO tests compared to Cypress
WebdriverIO is fully open-source projects and does not provide any paid features or support
While WebdriverIO does support lots of customization options, it might get overwhelming for beginners to set everything up

Browser Support

Cypress	WebdriverIO
Supports Chromium family (Chrome, Edge, Electron, Brave) and Firefox	Supports all major browsers (Chrome, Firefox, Edge, IE and Safari)

As mentioned earlier, one of the major drawbacks currently with Cypress is that it does not support Safari. It supports all the major browsers though.
On the other hand, WebdriverIO has support all major browsers including which is one of key reasons to pick WebdriverIO over Cypress

Native Mobile Support

Cypress	WebdriverIO
No support 🙁	Possible using Appium

Cypress is built only for Web and will not have any support for native apps on the other hand WebdriverIO can be easily integrated with Appium to automate Mobile apps.

If you are interested in learning WebdriverIO with Appium, feel free to checkout my course on Udemy.

Technical Differences

Features	Cypress	WebdriverIO
Locators Support	CSS Selector, (XPath plugin)	CSS Selector, XPath
iFrame Support	Difficult to work with	Easy to switch to iFrame
Shadow Dom	Supported	Supported
Network Interception	Built-in	Configurable
Google Lighthouse	External Plugin	Built-in (DevTools Service)

Cypress has default support for CSS Selectors but can work with Xpath using external plugin. WDIO supports both CSS and XPath by default
Due to cross origin restrictions, its difficult to work with iFrames in Cypress. On the other hand, with WDIO it’s fairly easy to switch to iFrames
Both Cypress and WDIO has support for Shadow DOMs
Cypress has built-in support for network interception and with WDIO it is configurable with an external service
WDIO has built-in Google lighthouse integration for performance report using DevTools service and for Cypress, you can do the same with an external plugin

Miscellaneous differences

Features	Cypress	WebdriverIO
Test Framework	Mocha, Cucumber (external)	Mocha, Jasmine, Cucumber
Parallelization	Possible with paid plan	Built-in
Reporters	Spec, Mocha, Custom	Spec, Allure, Report Portal, etc..
CI/CD	Possible with major CI/CD	Possible with major CI/CD
Documentation	Intuitive and Opinionated	Good documentation
Community Support	Growing Community	Decent Community Support

Cypress only support Mocha test framework but does have support for Cucumber as an external plugin. WDIO on the other hand supports Mocha, Jasmine and Cucumber built-in
Parallelizing tests with Cypress is possible with paid plan only but with WDIO its built-in and free
Cypress supports Spec, Mocha and Custom reporting and WDIO supports bunch of reporters such as Spec, Allure, Report Portal etc..
Both Cypress and WDIO can be easily integrated with major CI/CD tools
In terms of documentation, Cypress docs are really intuitive and beginner friendly. With WDIO, you get decent documentation but can be confusing for beginners
Cypress has a growing community and is quite active on Github and Gitter. Similarly, WDIO has a good community support as well active on both Github and Gitter

Which one to pick?

So that was all the major differences and similarities between Cypress and WebdriverIO. Now the question is which one to pick for your next automation project? Well the answer is – It Depends

What you should rather be asking is – What are the requirements? Understand the requirements first.

For example, if the requirement is to run tests in Chrome and Safari as that’s where the majority of the users are then probably it’s better to go with WebdriverIO. Or, may be you one suite for Web and Mobile, then again it’s a better choice to go with WebdriverIO.

On the other hand, if the requirement, is to execute tests on chromium based browsers only and you need a good dashboard that can give you an overview of all your tests, then probably its better to go with Cypress if the team is ok to go with a paid option.

To conclude, both frameworks are great and have their own pros/cons but its up-to you to look at what exactly you need for your next automation project based on your project requirements and then make a decision accordingly by referring to this article.

To learn more in detail about the differences and similarities between Cypress and WebdriverIO, checkout this video –

Check out my courses on Udemy to get started with Web and Mobile automation with WebdriverIO -

Latest comments (2)

Kevin Lamping • May 2 '22

I disagree that Cypress tests are more readable. While they may look "cleaner" without the async/awaits, because of the way Cypress manages their custom promises, you're more likely to end up with nested callbacks (aka pyramids of doom).

Cypress also has the issue that most of the time you can't use variables like you would in regular JavaScript. Here's an example:

Cypress:

it('adds numbers via aliases', () => {
  cy.visit('public/index.html')
  cy.get('[name=a]').invoke('val').then(parseInt).as('a')
  cy.get('[name=b]').invoke('val').then(parseInt).as('b')
  cy.get('#result')
    .invoke('text')
    .then(parseInt)
    .as('result')
    .then(function () {
      expect(this.a + this.b).to.eq(this.result)
    })
})

WebdriverIO:

it('adds numbers via aliases', () => {
  await browser.url('public/index.html')

  const a = parseInt(await $('[name=a]').getValue());
  const b = parseInt(await $('[name=b]').getValue());

  const result = parseInt(await $('#result').getText());

  expect(a + b).toEqual(result);
})

To me, the readability of the WDIO code is so much nicer, even with the awaits. You also don't need to know that when you use as('b'), it assigns that to this. Instead, you use variables just like JavaScript intended.

Dilpreet Johal • May 3 '22

Hey Kevin,
Thanks for reading the article and providing your feedback!
In the example you provided above, WDIO provides great helper methods such as .getValue or .getText which makes code readable vs on the other hand with Cypress you don't have that which sometimes tend to make the code look bit more complicated.
However, my point was made from beginners point of view, if they are reading the code without JS background, Cypress would seem bit more readable than WDIO for basic commands which are used majority of the time such as click, type, select, check and so on, as you do not have to use async await for any of those commands.
At the end, its a matter of personal preference and both have their pros and cons in their own way :)

DEV Community

Cypress vs WebdriverIO | Which one to pick?

Language Support & Popularity

Key Features

Limitations

Browser Support

Native Mobile Support

Technical Differences

Miscellaneous differences

Which one to pick?

Latest comments (2)

Read next

PYTHON FUNCTIONS

Making Disabled Buttons more Accessible

Promices and Async Await

Litestyle CSS: A Lightweight Alternative to Full-Fledged Frameworks