DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Cypress vs WebdriverIO | Which one to pick?
Dilpreet Johal
Dilpreet Johal

Posted on

Cypress vs WebdriverIO | Which one to pick?

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β€Š-β€Š

Top comments (2)

Collapse
 
klamping profile image
Kevin Lamping

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)
    })
})
Enter fullscreen mode Exit fullscreen mode

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);
})
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
 
dilpreetjohal profile image
Dilpreet Johal

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 :)

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. πŸ‘€

β†’ Join the Hackathon <-