Cypress vs Storybook

Overview

Cypress

Stacks3.5K

Followers2.0K

Votes115

GitHub Stars49.4K

Forks3.4K

Storybook

Stacks1.9K

Followers643

Votes0

GitHub Stars88.6K

Forks9.8K

Cypress vs Storybook: What are the differences?

Cypress and Storybook are popular tools used in modern web development to enhance the testing and documentation of JavaScript applications. Below are the key differences between Cypress and Storybook:

Purpose and Focus: Cypress is primarily a testing framework designed for end-to-end testing of web applications. It focuses on automating the interaction of a user with the application, simulating real user actions, and verifying the application's behavior. On the other hand, Storybook is a development environment and documentation tool specifically for UI components. It allows developers to isolate, build, and showcase individual components in an interactive sandbox, making it easier to develop and document UI components independently.
Testing Capabilities: Cypress provides a powerful and comprehensive testing API, allowing developers to write tests in JavaScript to simulate user interactions and verify application functionality. It offers features like time-travel debugging, automatic waiting, and real-time reloading during test development. Storybook, on the other hand, is not a testing framework but rather a tool for component-driven development and documentation. It does not run end-to-end tests but focuses on visual testing and component presentation.
Test Environment: Cypress runs tests directly in the browser, enabling it to interact with the application as a user would. This provides a realistic testing environment, ensuring that the tests closely resemble real-world user scenarios. Storybook, on the other hand, renders components in a sandbox environment separate from the application context. It does not simulate end-to-end scenarios like Cypress but instead helps developers visualize and test components in isolation.
Use Cases: Cypress is suitable for projects that require robust end-to-end testing to verify the overall application functionality and user interactions. It excels in ensuring critical flows and interactions are bug-free. On the other hand, Storybook is ideal for projects that heavily focus on component-driven development, UI design, and component documentation. It is a valuable tool for large projects with extensive component libraries and design systems.
Integration with Other Tools: Cypress integrates well with popular testing frameworks and continuous integration tools, making it easy to incorporate into the development workflow. It also has support for popular assertion libraries like Chai and Jest. Storybook integrates with various frameworks and libraries and can be used alongside testing tools like Cypress to showcase and document components.

In summary, Cypress excels in end-to-end testing, providing a realistic user interaction environment for comprehensive application testing. On the other hand, Storybook focuses on component-driven development and documentation, making it easier to develop and showcase UI components independently.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on Cypress, Storybook

Dane

Feb 7, 2020

Needs adviceon

Cypress

Jest

As we all know testing is an important part of any application. To assist with our testing we are going to use both Cypress and Jest. We feel these tools complement each other and will help us get good coverage of our code. We will use Cypress for our end to end testing as we've found it quite user friendly. Jest will be used for our unit tests because we've seen how many larger companies use it with great success.

836k views836k

Comments

Yildiz

testmanager/automation tester at medicalservice

May 12, 2020

Needs adviceon

AngularJS

TypeScript

Cypress

In the company I will be building test automation framework and my new company develops apps mainly using AngularJS/TypeScript. I was planning to build Protractor-Jasmine framework but a friend of mine told me about Cypress and heard that its users are very satisfied with it. I am trying to understand the capabilities of Cypress and as the final goal to differentiate these two tools. Can anyone advice me on this in a nutshell pls...

277k views277k

Comments

Detailed Comparison

Cypress	Storybook
Cypress is a front end automated testing application created for the modern web. Cypress is built on a new architecture and runs in the same run-loop as the application being tested. As a result Cypress provides better, faster, and more reliable testing for anything that runs in a browser. Cypress works on any front-end framework or website.	It is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
Time Travel; Debuggability; Automatic Waiting; Spies, Stubs, and Clocks; Network Traffic Control; Consistent Results; Screenshots and Videos	-
Statistics
GitHub Stars 49.4K	GitHub Stars 88.6K
GitHub Forks 3.4K	GitHub Forks 9.8K
Stacks 3.5K	Stacks 1.9K
Followers 2.0K	Followers 643
Votes 115	Votes 0
Pros & Cons
Pros 29 Open source 22 Great documentation 20 Simple usage 18 Fast 10 Cross Browser testing Cons 21 Cypress is weak at cross-browser testing 14 Switch tabs : Cypress can'nt support 12 No iFrame support 9 No multiple domain support 9 No page object support	No community feedback yet

What are some alternatives to Cypress, Storybook?

Mocha

Mocha is a feature-rich JavaScript test framework running on node.js and the browser, making asynchronous testing simple and fun. Mocha tests run serially, allowing for flexible and accurate reporting, while mapping uncaught exceptions to the correct test cases.

Ant Design

An enterprise-class UI design language and React-based implementation. Graceful UI components out of the box, base on React Component. A npm + webpack + babel + dora + dva development framework.

Jasmine

Jasmine is a Behavior Driven Development testing framework for JavaScript. It does not rely on browsers, DOM, or any JavaScript framework. Thus it's suited for websites, Node.js projects, or anywhere that JavaScript can run.

Jest

Jest provides you with multiple layers on top of Jasmine.

CodeceptJS

It is a modern end to end testing framework with a special BDD-style syntax. The test is written as a linear scenario of user's action on a site. Each test is described inside a Scenario function with I object passed into it.

Angular Universal

It executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

Protractor

Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

Angular Material

Sprint from Zero to App. Hit the ground running with comprehensive, modern UI components that work across the web, mobile and desktop. It allows to create material styled angular apps fast and easy.

AVA

Even though JavaScript is single-threaded, IO in Node.js can happen in parallel due to its async nature. AVA takes advantage of this and runs your tests concurrently, which is especially beneficial for IO heavy tests. In addition, test files are run in parallel as separate processes, giving you even better performance and an isolated environment for each test file.

Ghost Inspector

It lets you create and manage UI tests that check specific functionality in your website or application. We execute these automated browser tests continuously from the cloud and alert you if anything breaks.

Related Comparisons

Purpose and Focus: Cypress is primarily a testing framework designed for end-to-end testing of web applications. It focuses on automating the interaction of a user with the application, simulating real user actions, and verifying the application's behavior. On the other hand, Storybook is a development environment and documentation tool specifically for UI components. It allows developers to isolate, build, and showcase individual components in an interactive sandbox, making it easier to develop and document UI components independently.
Testing Capabilities: Cypress provides a powerful and comprehensive testing API, allowing developers to write tests in JavaScript to simulate user interactions and verify application functionality. It offers features like time-travel debugging, automatic waiting, and real-time reloading during test development. Storybook, on the other hand, is not a testing framework but rather a tool for component-driven development and documentation. It does not run end-to-end tests but focuses on visual testing and component presentation.
Test Environment: Cypress runs tests directly in the browser, enabling it to interact with the application as a user would. This provides a realistic testing environment, ensuring that the tests closely resemble real-world user scenarios. Storybook, on the other hand, renders components in a sandbox environment separate from the application context. It does not simulate end-to-end scenarios like Cypress but instead helps developers visualize and test components in isolation.
Use Cases: Cypress is suitable for projects that require robust end-to-end testing to verify the overall application functionality and user interactions. It excels in ensuring critical flows and interactions are bug-free. On the other hand, Storybook is ideal for projects that heavily focus on component-driven development, UI design, and component documentation. It is a valuable tool for large projects with extensive component libraries and design systems.
Integration with Other Tools: Cypress integrates well with popular testing frameworks and continuous integration tools, making it easy to incorporate into the development workflow. It also has support for popular assertion libraries like Chai and Jest. Storybook integrates with various frameworks and libraries and can be used alongside testing tools like Cypress to showcase and document components.

Cypress vs Storybook