Cypress vs WebdriverIO | Which one to pick?
Tags: javascript, testing, webdev, automation
Published: 2022-04-18 12:30:31

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](https://www.udemy.com/course/appium-webdriverio-mobile-automation/?referralCode=70179964D63962225A04), 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 –**

{% youtube hhtclmRlAA0 %}

Check out my courses on Udemy to get started with Web and Mobile automation with WebdriverIO - 
- [WebdriverIO Complete Beginner Course ](https://www.udemy.com/course/webdriverio-complete-beginner-course/?referralCode=5190D58FC784B9F4E1AD)
- [Mobile Automation with Appium 2.0 and WebdriverIO](https://www.udemy.com/course/appium-webdriverio-mobile-automation/?referralCode=70179964D63962225A04)