cypress-workshop-ci

A workshop that teaches you how to run Cypress on major CI providers

Warning: ⚠️ this is not an introduction to Cypress testing workshop, only how to successfully run Cypress on CI. If you need to refresh your Cypress skills, check out the testing-workshop-cypress

Requirements

You will need:

• git to clone the repository
• Node v12+ to install and run locally
• 👉 fork the cypress-io/cypress-workshop-ci-example now 👈

Create free accounts

• GitHub https://github.com/
• CircleCI https://circleci.com/
• Netlify https://www.netlify.com/
• Cypress Dashboard https://dashboard.cypress.io/

Slides 🖥

See the presentation at https://cypress-workshop-ci.netlify.app/. Every section of the presentation has a subfolder in the slides folder with a Markdown file. The Markdown is rendered into HTML using Vite and Reveal.js combination. You can open the presentation by clicking on "view slides" links in the table below.

Content 🗂

topic	Markdown	view slides
Introduction	intro	intro slides
Generic CI	generic-ci	generic ci slides
GitHub Action	github-action	github action slides
Circle CI Orb	circleci	circleci slides
Netlify Build plugin	netlify-build	netlify build slides

Self-paced workshop

This workshop should have all the content necessary to learn how to run Cypress on continuous integration service. Use the example application and follow the written steps above. I suggest starting with the introduction and then picking one of the topics matching your situation. If you get stuck, or something is unclear, do not hesitate to open a GitHub issue in this repository to improve this workshop.

Content index

1. Introduction slides
   1. requirements
   2. example repo cypress-io/cypress-workshop-ci-example
   3. NPM scripts and commands
   4. Cypress binary and info
2. Running Cypress on generic CI slides
   1. GitHub CI workflow
   2. caching dependencies
   3. waiting for the server to start
   4. storing test artifacts on CI
   5. recording tests on Cypress Dashboard
3. Cypress GitHub Action slides
   1. installing and running Cypress using action
   2. building the application
   3. action versions
   4. run tests in parallel
   5. split workflow into jobs
4. Cypress CircleCI Orb slides
   1. running the tests
   2. recording the test artifacts
   3. saving the workspace
   4. separate the install job from the test job
   5. testing in parallel
5. Cypress Netlify plug slides
   1. deploy project on Netlify
   2. run E2E tests after deploy
   3. recording test results
   4. run E2E tests before build
   5. set up Cypress GitHub Integration
   6. set up GitHub status checks

Example application

We will test the example application from the repo cypress-io/cypress-workshop-ci-example. You should fork that repo under your GitHub account and use with each CI provider.