Introducing the Cypress Real World App

June 11, 2020

•

By The Cypress Team

We recently open-sourced the Cypress Real World App (RWA) project on GitHub. The RWA is an example payment application for demonstrating real-world usage of Cypress testing methods, patterns, practices, and workflows.

You can use this app to learn, experiment, tinker, and practice application testing with Cypress. We consistently heard from our community that users needed a fully-formed, realistic, and relatable demonstrations of Cypress in practice. Users desired guidance beyond ad-hoc recipes and simple demo apps to leverage the capabilities of Cypress fully.

Motivated by the community feedback, we set out to build an application that was sufficiently-complex yet approachable. We aimed to accomplish and demonstrate the following:

  • Easy & Quick Setup. There are no additional dependencies to install. The RWA uses lowDB, a JS-based JSON database, so no need to fuss with a database setup. Just clone, install and run.
  • 100% Code Coverage. The app is instrumented for code coverage-reporting and achieves full coverage for backend and frontend code purely with E2E tests.
  • Responsive Testing. All test suites run in desktop and mobile viewports in CI. To check out testing in mobile viewports, just run yarn cypress:open:mobile.
  • Cross-browser Testing. All test suites are tested in Chrome and Firefox in CI.
  • Cypress-specific Practices. We demonstrate practices that are unique to or made easy with Cypress, such as tapping into the state of your app, programmatic authentication, advanced custom commands, and more techniques to help you compose efficient tests.
  • Database Seeding. Test data generation and database reseeding during testing. We also demonstrate how to compose E2E tests by directly querying the database for fetching test data or to make assertions.
  • CI Best Practices. The RWA is tested on every pushed commit with a CI configuration that is readable and powerful. It handles parallelization, multi-viewport jobs, cross-browser jobs, and code-coverage reporting. You can view all the CI runs within the Cypress Dashboard.

The current state of the RWA is simply a starting point, and it serves as a foundation for the development of various prescriptive and in-depth guides:

  • Test Organization & Approach: Effective test writing, test organization, scalable patterns, and best practices.
  • Data Initialization: Methodologies for initializing data at the database and application layer for testing.
  • Authentication: Practices for testing various authentication methods.
  • and more specialized guides.

If you're interested in these guides, make sure to subscribe to our newsletter or follow the updates on Twitter.

We hope you find this project useful for learning testing and Cypress. We've got more in store, and value your feedback. Get started with the RWA today:

  1. Clone: git clone https://github.com/cypress-io/cypress-realworld-app.git
  2. Install: yarn install
  3. Start the app: yarn start
  4. Start testing: yarn cypress:open

Happy Testing!

Check-out RWA on GitHub