A payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows.
💬 Note from maintainers
This application is purely for demonstration and educational purposes. Its setup and configuration resemble typical real-world applications, but it's not a full-fledge production system. Use this app to learn, experiment, tinker, and practice application testing with Cypress.
Happy Testing
🛠 Built with React, XState, Express, lowdb, Material-UI and TypeScript
⚡️ Zero database dependencies
🚀 Full-stack Express/React application with real-world features and tests
👮♂️ Local Authentication
🔥 Database Seeding with End-to-end Tests
💻 CI/CD + Cypress Dashboard
The Cypress Real-World App (RWA) is a full-stack Express/React application backed by a local JSON database (lowdb).
The app is bundled with example data (data/database.json) that contains everything you need to start using the app and run tests out-of-the-box.
🚩 Note
You can login to the app with any of the example app users. The default password for all users is
s3cret.
Example users can be seen by runningyarn list:dev:users.
The only requirement for this project is to have Node.js version 12 installed on your machine. Refer to the .node-version file for the exact version.
TypeScript will be added as a local dependency to the project, so no need to install it.
yarn installyarn devyarn cypress:open| Type | Location |
|---|---|
| api | cypress/tests/api |
| ui | cypress/tests/ui |
| unit | src/__tests__ |
-
The local JSON database located in data/database.json and is managed with lowdb.
-
The database is reseeded each time the application is started (via
yarn dev). Database seeding is done in between each Cypress End-to-End test. -
Updates via the React frontend are sent to the Express server and handled by a set of database utilities
-
Generate a new database using
yarn db:seed. -
An empty database seed is provided along with a script (
yarn start:empty) to view the application without data.
| Script | Description |
|---|---|
| dev | Starts backend in watch mode and frontend |
| start | Starts backend and frontend |
| types | Validates types |
| db:seed | Generates fresh database seeds for json files in /data |
| start:empty | Starts backend, frontend and Cypress with empty database seed |
| tsnode | Customized ts-node command to get around react-scripts restrictions |
| list:dev:users | Provides id and username for users in the dev database |
For a complete list of scripts see package.json
The Cypress Real-World App uses the @cypress/code-coverage plugin to generate code coverage reports for the app frontend and backend.
To generate a code coverage report:
- Run
yarn cypress:run --env coverage=trueand wait for the test run to complete. - Once the test run is complete, you can view the report at
coverage/index.html.
This project is licensed under the terms of the MIT license.
Thanks goes to these wonderful people (emoji key):
 Kevin Old |
 Amir Rustamzadeh |
 Brian Mann |
 Gleb Bahmutov |
 Ben Hong |
 David Khourshid |
This project follows the all-contributors specification. Contributions of any kind welcome!