Repository files navigation

This is an example app used to showcaseCypress.io End-to-End (E2E) testing. The application demonstrates the use of mostCypress API commands. Additionally this example app is configured to run E2E tests in various CI platforms.Several workflows demonstrate the CI use ofCypress Docker images which provide convenient, pre-configured compatible environments for Cypress.Thetests are also heavily commented.

To see the kitchen sink application, and to view theCypress API commands demonstrated by the app, visitexample.cypress.io.

For a full reference of our documentation, go todocs.cypress.io.

For an example payment application demonstrating real-world usage of Cypress.io End-to-End (E2E) testing, go to thecypress-io/cypress-realworld-app repository.

The following table lists live workflows from various CI providers. These each independently test the contents of this example repository. They run and record usingCypress Cloud with their results displaying centrally under Cypress CloudProjectId4b7344. Each CI provider shows its build status on its own site:

CI Provider	Workflow	Build Status	Docker example
AppVeyor	appveyor.yml
CircleCI	.circleci/config.yml		✅
cypress-io/github-action	using-action.yml
GitHub Actions	single.yml
GitHub Actions	parallel.yml

You can find all CI results recorded on the Cypress Cloud

This table shows additional examples of CI workflows. With the exception of GitHub Actions workflows, these arenot live examples as in the table above and they may require modification before use. The GitHub Actions workflows are live and they run without recording to Cypress Cloud.

The Cypress documentation pageCI Provider Examples provides some more examples with extensive guides for using Cypress with some of the most popular CI providers.

To run the tests from this repo on your local machine, first make sure your machine meets theCypress System Requirements, including the installation ofNode.js according to the version specified in the file.node-version.

Executing the following instructions will clone the repository, install dependencies and run Cypress:

git clone https://github.com/cypress-io/cypress-example-kitchensink.gitcd cypress-example-kitchensinknpm ci# install dependenciesnpm run local:run# run Cypress headlessly

local:run is apackage.json script that starts a local webserver and then usescypress run to run Cypress headlessly.If you would like to run Cypress tests interactively, then run the following command which usescypress open to run Cypress in headed mode. You can pick individual tests to run.

npm run local:open

As an alternative to using thelocal:open andlocal:run scripts, you can also start the server in one step and then run Cypress in a second step.

npm start# start server on port 8080

You can check that the server is running if you open a web browser and navigate tohttp://localhost:8080.

Then in a separate terminal window execute either

npx cypress run# for headless mode

or

npx cypress open# for headed interactive mode

The scriptslocal:run andlocal:open use thestart-test alias of the npm modulestart-server-and-test to run./scripts/start.js, which starts the webserver, waits for it to become ready, and then launches Cypress.

Thestart script spawns a webserver using the npm moduleserve and displays the Kitchen Sink App on port8080.

If you have Docker installed locally, for instance usingDocker Desktop, you can run the tests from this repo interactively in a Docker container.UseCypress Docker images, which are built with all the prerequisites for running Cypress. They are available asbase,browsers andincluded options fromDocker Hub and theAmazon ECR (Elastic Container Registry) Public Gallery.

As above, start by cloning the repo and installing dependencies:

git clone https://github.com/cypress-io/cypress-example-kitchensinkcd cypress-example-kitchensinknpm ci

NOTE: For simplicity, the Docker examples below use a repository reference such ascypress/base with thelatest version tag. To select an earlier version, replacelatest with an explicit tag, for examplecypress/base:20.15.1. Explicit version tags are recommended for production. Usage is further explained in theTags section of theCypress Docker Images - README.

The following example uses acypress/base image which itself contains no browsers. You will use the Electron browser bundled with Cypress instead. To run the Docker container, execute the following:

docker run -it --rm -v .:/app -w /app cypress/base:latest

When the container prompt appears, enter:

npx cypress install# install Cypress binarynpm run test:ci# start server and run tests in Electron browserexit

With acypress/browsers image you have the additional choice of Chrome, Edge and Firefox browsers. Execute the following:

docker run -it --rm -v .:/app -w /app cypress/browsers:latest

When the container prompt appears, enter:

npx cypress install# install Cypress binarynpm run test:ci# start server and run tests in Electron browsernpm run test:ci:chrome# start server and run tests in Chrome browsernpm run test:ci:edge# start server and run tests in Edge browsernpm run test:ci:firefox# start server and run tests in Firefox browserexit

Thecypress/included images add a full Cypress installation compared tocypress/browsers.Execute the following to run the container with a one-line command, testing with the Chrome browser:

docker run -it --rm -v .:/app -w /app --entrypoint bash cypress/included:latest -c'npm run test:ci:chrome'# use for matching Cypress versions

Replace thelatest tag in the above command using the Cypress version from the repo'spackage.json, if this repository has not yet been updated to the latest released Cypress version.Note that mismatched versions will cause errors.

NOTE: Additional browsers Chrome, Edge and Firefox are only installed inlinux/amd64 architecture imagescypress/browsers andcypress/included. Browsers are not available pre-installed forlinux/arm64 architecture images. The Electron browser, which is built-in to Cypress, is available in all images and architectures.

If you would like to try out running tests in a Continuous Integration (CI) provider then you need to firstfork the repository so that you have your own copy. Refer to theGitHub documentation to set up aliases forremote upstream (to this repo) andremote origin (to your fork) correctly.You will also need to have an account with the CI provider you want to test with.

• Use theCypress Documentation for instructions on how to use Cypress
• Read theCommand Line Guide for run options
• Refer to theAPI documents to understand the Cypress API calls tested in this repo
• ReadInstalling Cypress for step-by-step information on installing Cypress in your own project

• For "how-to" questions and discussions, go to the CypressDiscord Chat and be part of the worldwide user community!

Check out theContributing Guideline.

SeeReleases.