/cypress-example-kitchensink

Forked from https://github.com/cypress-io/cypress-example-kitchensink. This is an example app used to showcase Cypress.io testing.

Primary LanguageHTMLMIT LicenseMIT

Kitchen Sink renovate-app badge semantic-release

This is an example app used to showcase Cypress.io testing. The application uses every API command in Cypress for demonstration purposes. Additionally this example app is configured to run tests in various CI platforms. The tests are also heavily commented. For a full reference of our documentation, go to docs.cypress.io.

To see the kitchen sink application, visit example.cypress.io.

CI Status

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

CI Provider Workflow Build Status
AppVeyor appveyor.yml AppVeyor CI
CircleCI .circleci/config.yml CircleCI
cypress-io/github-action using-action.yml Cypress GHA status
GitHub Actions parallel.yml Parallel tests status
Netlify netlify.toml Netlify Status

You can find all CI results recorded on the Cypress Cloud Cypress Cloud

CI Workflow Examples

This table shows additional documentation-only examples of CI workflows. These are not live examples as in the table above and they may require modification before use.

CI Provider Basic Config Full Parallel Config
AWS Amplify amplify.yml
AWS CodeBuild basic/buildspec.yml buildspec.yml
Azure Pipelines basic/azure-ci.yml azure-ci.yml
Buddy.works buddy.yml
Buildkite .buildkite/pipeline.yml
CircleCI basic/.circleci/config.yml
CloudBees CodeShip Pro basic/codeship-pro
GitHub Actions single.yml
GitLab basic/.gitlab-ci.yml .gitlab-ci.yml
Heroku CI basic/app.json
Jenkins basic/Jenkinsfile Jenkinsfile
Semaphore 2.0 basic/.semaphore.yml .semaphore/semaphore.yml
Travis CI basic/.travis.yml .travis.yml

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

CI Workshop with Cypress

The Cypress team has created a full workshop showing how to run Cypress on popular CI providers. Find the workshop at github.com/cypress-io/cypress-workshop-ci.

CI Community Examples

CI Link
IBM Cloud CI (legacy) Cloud Foundry
GitLab CI (legacy) Example caching when installing using Yarn
CodeFresh (legacy) bahmutov/cypress-codefresh-example

Help + Testing

If you get stuck, here is more help:

1. Fork this repo

If you want to experiment with running this project in Continuous Integration, you'll need to fork it first.

After forking this project in Github, run these commands:

## clone this repo to a local directory
git clone https://github.com/<your-username>/cypress-example-kitchensink.git

## cd into the cloned repo
cd cypress-example-kitchensink

## install the node_modules
npm install

## start the local webserver
npm start

The npm start script will spawn a webserver on port 8080 which hosts the Kitchen Sink App.

You can verify this by opening your browser and navigating to: http://localhost:8080

You should see the Kitchen Sink App up and running. We are now ready to run Cypress tests.

# launch the cypress test runner
npm run cy:open

shortcut: you can use command npm run local:open that uses start-server-and-test to start local server and open Cypress. When you close Cypress, the local server is stopped automatically. Similarly you can use npm run local:run to start the server, run Cypress tests headlessly and close the server.

2. Install & write tests in Cypress

Follow these instructions to install and write tests in Cypress.

Contributing

Check out the Contributing Guideline.

Changelog