Chrome video recording, mouse improvements and more - see what's new in Cypress 3.6!

Learn more

Applications

Improve this doc

Below is a list of complete applications tested in Cypress.

Name JS Description
Kitchen Sink Vanilla Showcases every single Cypress command
TodoMVC React Compares the official TodoMVC Selenium tests to Cypress
Realworld React Full end-to-end tests for the gothinkster/realworld “Conduit” app
Phonecat Angular 1.x Compares the official Phonecat Protractor tests to Cypress
PieChopper Angular 1.x Tests a fully featured application with many forms and modals

Kitchen Sink

https://github.com/cypress-io/cypress-example-kitchensink

This is an example app which is used to showcase every command available in Cypress.

kitchensink running

TodoMVC

https://github.com/cypress-io/cypress-example-todomvc

This repo compares Cypress Tests to official TodoMVC Tests. This gives you a good comparison of writing and running tests in Cypress versus vanilla Selenium.

  • Query and make assertions about DOM elements state.
  • Type into an input using cy.type().
  • Create a custom cy.createTodo() command to run multiple cy commands.
  • Click and double click elements using cy.click() and cy.dblclick().
TodoMvc testing in Cypress

TodoMVC Redux

https://github.com/cypress-io/cypress-example-todomvc-redux

A fork the official Redux TodoMVC example. Through a combination of end-to-end and unit tests shows how you can achieve 100% code coverage.

  • Instrument and collect code coverage following the Cypress Code Coverage guide.
TodoMVC Redux application code coverage report

Realworld

https://github.com/cypress-io/cypress-example-realworld

Shows a full blogging application, “Conduit”, with back end code and a database.

  • Create a test user from tests by running database commands via the cy.task() command.
  • Log in using cy.request() and then setting the returned JWT token in localStorage.
  • Test all aspects of writing blog posts, commenting, and marking favorite posts.
  • Collect full stack code coverage using @cypress/code-coverage. Read the Cypress code coverage guide for more details.
Realworld test in Cypress

Phonecat

https://github.com/cypress-io/cypress-example-phonecat

This tests the original Angular Phonecat example app using Cypress.

  • Test redirect behavior of application using .hash().
  • Test loading behavior of app.
Phonecat Angular tutorial app tested in cypress

PieChopper

https://github.com/cypress-io/cypress-example-piechopper

This is a single page application with a decent amount of features. The tests involve a lot of form submissions.

  • Test mobile responsive views using cy.viewport()
  • Test that the app scrolls correctly
  • Check checkboxes using cy.check()
  • Stub responses from our back end using cy.route()
Piechopper app tested in cypress