A payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows.
๐ฌ Note from maintainersThis 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
Features
Getting Started
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.
๐ฉ NoteYou 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
.
Prerequisites
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.
Installation
yarn install
Run the app
yarn dev
Start Cypress
yarn cypress:open
Tests
Type | Location |
---|---|
api | cypress/tests/api |
ui | cypress/tests/ui |
unit | src/__tests__ |
Database
-
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.
Additional NPM Scripts
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
Code Coverage Report
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=true
and wait for the test run to complete. - Once the test run is complete, you can view the report at
coverage/index.html
.
License
This project is licensed under the terms of the MIT license.
โจ
Contributors 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!