Giter Club home page Giter Club logo

cypress-example-kitchensink's Introduction

Kitchen Sink renovate-app badge semantic-release

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

To see the kitchen sink application, and to view the Cypress API commands demonstrated by the app, visit example.cypress.io.

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

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

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 Docker example
AppVeyor appveyor.yml AppVeyor CI
CircleCI .circleci/config.yml CircleCI
cypress-io/github-action using-action.yml Cypress GHA status
GitHub Actions single.yml Single tests status
GitHub Actions parallel.yml Parallel tests status

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

CI Workflow Examples

This table shows additional examples of CI workflows. With the exception of GitHub Actions workflows, these are not 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.

CI Provider Basic Config Full Parallel Config Docker example
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 codeship-services.yml
GitHub Actions chrome.yml
GitHub Actions chrome-docker.yml
GitLab basic/.gitlab-ci.yml .gitlab-ci.yml
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.

Run Tests

Local testing

To run the tests from this repo on your local machine, first make sure your machine meets the Cypress System Requirements, including the installation of Node.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.git
cd cypress-example-kitchensink
npm ci # install dependencies
npm run local:run # run Cypress headlessly

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

npm run local:open

As an alternative to using the local:open and local: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 to http://localhost:8080.

Then in a separate terminal window execute either

npx cypress run # for headless mode

or

npx cypress open # for headed interactive mode

Script and server structure

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

The start script spawns a webserver using the npm module serve and displays the Kitchen Sink App on port 8080.

CI Testing

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

Documentation

Support

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

Contributing

Check out the Contributing Guideline.

Changelog

See Releases.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.