Need advice about which tool to choose?Ask the StackShare community!

Cypress

2.4K
2K
+ 1
115
Storybook

1.4K
641
+ 1
0
Add tool

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:

  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

Advice on Cypress and Storybook
Yildiz Dila
testmanager/automation tester at medicalservice · | 5 upvotes · 275.8K views
Needs advice
on
CypressCypress
and
ProtractorProtractor

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...

See more
Replies (2)
Kevin Emery
QE Systems Engineer at Discovery, Inc. · | 4 upvotes · 170.2K views
Recommends
on
CypressCypressProtractorProtractor

I've used both Protractor and Cypress extensively. Cypress is the easier and more reliable tool, whereas Protractor is the more powerful tool. Your choice of tool should depend on your specific testing needs. Here are some advantages and disadvantages of each tool:

Cypress advantages:

  • Faster

  • More reliable (tends to throw fewer intermittent false failures)

  • Easier to read code (handles promises gracefully)

Cypress disadvantages:

  • Cannot switch between browser tabs

  • Cannot switch to iFrames

  • Cannot specify clicks or keypresses explicitly as if a real user was interacting

  • Cannot move the mouse to specific co-ordinates

  • Sometimes has trouble switching between different top-level domains, so not good for testing external links

  • Cypress is a newer tool with less extensive documentation and less community support

Protractor advantages:

  • More powerful because it is Selenium-based - it can switch between tabs, it can handle external links to other domains, it can handle iFrames, simulate keypresses and clicks, and move the mouse to specific co-ordinates within the browser.

  • More extensive community support and documentation

Protractor disadvantages:

  • Slower and more brittle - in general there is a higher likelihood of cryptic and/or intermittent errors which may cause your tests to fail even though there is nothing wrong with your application

  • For highly experienced automation engineers, the fundamental "brittle" nature of Selenium can be worked around - it can be reliable but only if you really know what you are doing

  • Less graceful handling of promises - relies on async/await or .then to manage the order of execution. Therefore it is a bit harder to read the code.

  • Harder to set up, and the method of setup impacts its reliability. For example, a hub/node configuration where the selenium jar is on a different physical machine than the browser under test will cause unreliability in your tests. Not everyone knows about this type of thing, so it's common to find Selenium frameworks that are set up poorly.

It's probably better to use Cypress if

  • you're at a smaller company and have a close relationship with developers who can help write hooks or stubs in their code to assist your testing

  • you don't need to do things like switch between tabs or test links to external top-level domains

It's probably better to use Protractor if

  • You might need to switch between tabs or test external links to other domains within the scope of your framework

  • You want to use a more accurate simulation of how a real user interacts with a browser (i.e. click at this location, type these keys)

  • You're at a company where you won't have any support from developers in writing hooks or stubs to make their code more testable in a less powerful framework like Cypress

See more
Jian Wang
Web Engineer at sentaca · | 1 upvotes · 199.1K views
Recommends

Please try Handow, the e2e tool basing on Puppeteer.

Gherkin syntax compatible

Chrome/Chromium orentied, driven by Puppeteer engine

Complete JavaScript programming

Create test suites rapidly without coding (or a little bit), basing on built-in steps library

Schedule test with plans and arrange stories with sequential stages

Fast running, execute story groups in parallel by multi-workers

Built-in single page report render

Cover page view, REST API and cookies test

https://github.com/newlifewj/handow

http://demo.shm.handow.org/reports

See more
Decisions about Cypress and Storybook
Shared insights
on
CypressCypressJestJest

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.

See more
Manage your open source components, licenses, and vulnerabilities
Learn More
Pros of Cypress
Pros of Storybook
  • 29
    Open source
  • 22
    Great documentation
  • 20
    Simple usage
  • 18
    Fast
  • 10
    Cross Browser testing
  • 9
    Easy us with CI
  • 5
    Npm install cypress only
  • 2
    Good for beginner automation engineers
    Be the first to leave a pro

    Sign up to add or upvote prosMake informed product decisions

    Cons of Cypress
    Cons of Storybook
    • 21
      Cypress is weak at cross-browser testing
    • 14
      Switch tabs : Cypress can'nt support
    • 12
      No iFrame support
    • 9
      No page object support
    • 9
      No multiple domain support
    • 8
      No file upload support
    • 8
      No support for multiple tab control
    • 8
      No xPath support
    • 7
      No support for Safari
    • 7
      Cypress doesn't support native app
    • 7
      Re-run failed tests retries not supported yet
    • 7
      No support for multiple browser control
    • 5
      $20/user/thread for reports
    • 4
      Adobe
    • 4
      Using a non-standard automation protocol
    • 4
      Not freeware
    • 3
      No 'WD wire protocol' support
      Be the first to leave a con

      Sign up to add or upvote consMake informed product decisions

      What is Cypress?

      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.

      What is Storybook?

      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.

      Need advice about which tool to choose?Ask the StackShare community!

      What companies use Cypress?
      What companies use Storybook?
      Manage your open source components, licenses, and vulnerabilities
      Learn More

      Sign up to get full access to all the companiesMake informed product decisions

      What tools integrate with Cypress?
      What tools integrate with Storybook?

      Sign up to get full access to all the tool integrationsMake informed product decisions

      Blog Posts

      What are some alternatives to Cypress and Storybook?
      Selenium
      Selenium automates browsers. That's it! What you do with that power is entirely up to you. Primarily, it is for automating web applications for testing purposes, but is certainly not limited to just that. Boring web-based administration tasks can (and should!) also be automated as well.
      TestCafe
      It is a pure node.js end-to-end solution for testing web apps. It takes care of all the stages: starting browsers, running tests, gathering test results and generating reports.
      Puppeteer
      Puppeteer is a Node library which provides a high-level API to control headless Chrome over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome.
      WebdriverIO
      WebdriverIO lets you control a browser or a mobile application with just a few lines of code. Your test code will look simple, concise and easy to read.
      Jest
      Jest provides you with multiple layers on top of Jasmine.
      See all alternatives