Introducing the Cypress Real World App

Amir Rustamzadeh — Fri, 12 Jun 2020 13:27:39 +0000

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:

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

Happy Testing!

Introducing Firefox and Edge Support in Cypress 4.0

Amir Rustamzadeh — Thu, 06 Feb 2020 21:20:47 +0000

Today, we're excited to release the highly-anticipated support for Firefox and the new Microsoft Edge browsers in Cypress 4.0. Adding the capability to run Cypress tests in Firefox has been one of the most frequently requested features by the community. So our team has been working hard to provide this feature with the same great developer experience users have come to enjoy and expect from Cypress.

With the power of testing in multiple browsers, comes the responsibility of implementing the right CI strategy to achieve an optimal balance of confidence, performance, and cost. To guide these crucial decisions, we're launching a new Cross Browser Testing Guide with various recommendations to help you implement the right CI strategy for your project and team.

Cypress 4.0 marks a significant milestone in the development of Cypress and sets the stage for an exciting pipeline of capabilities that will continue to elevate the testing experience for everyone.

Install or upgrade (migration guide) to version 4.0 today. Get started by checking out the new Cross Browser Testing Guide. If you're entirely new to Cypress, check out our Getting Started Guide.

DEV Community: Amir Rustamzadeh

Introducing the Cypress Real World App

Introducing Firefox and Edge Support in Cypress 4.0