A workshop that teaches you how to run Cypress on major CI providers
Warning:
You will need:
gitto clone the repository- Node v12+ to install and run locally
- 👉 fork the bahmutov/cypress-workshop-ci-example now 👈
- GitHub https://github.com/
- CircleCI https://circleci.com/
- Netlify https://www.netlify.com/
- Cypress Dashboard https://dashboard.cypress.io/
See the presentation at https://glebbahmutov.com/cypress-workshop-ci/. 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.
| 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 |
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.
- Introduction slides
- requirements
- example repo bahmutov/cypress-workshop-ci-example
- NPM scripts and commands
- Cypress binary and info
- Running Cypress on generic CI slides
- GitHub CI workflow
- caching dependencies
- waiting for the server to start
- storing test artifacts on CI
- recording tests on Cypress Dashboard
- Cypress GitHub Action slides
- installing and running Cypress using action
- building the application
- action versions
- run tests in parallel
- split workflow into jobs
- Cypress CircleCI Orb slides
- running the tests
- recording the test artifacts
- saving the workspace
- separate the install job from the test job
- testing in parallel
- set up Cypress GitHub Integration
- Cypress Netlify plug slides
- deploy project on Netlify
- run E2E tests after deploy
- recording test results
- run E2E tests before build
- set up Cypress GitHub Integration
- set up GitHub status checks
We will test the example application from the repo bahmutov/cypress-workshop-ci-example. You should fork that repo under your GitHub account and use with each CI provider.
I have created this repo originally while working at Cypress.io, see cypress-io/cypress-workshop-ci
Gleb Bahmutov has PhD in Computer Science and has worked at Cypress.io for four years as VP of Engineering and Distinguished Engineer, and was heavily involved in all areas of the Test Runner development, as well as Cypress Dashboard features, plugin writing, and CI integration. He has spoken about Cypress approximately a hundred times at meetups and conferences, wrote 100s of blog posts about testing, and has recorded more than 150 Cypress videos available for free on his YouTube channel. Today, Gleb is still heavily using Cypress at a large company making sure its web applications are always working correctly.
If your organization is interested in learning about Cypress in depth, please contact me. Besides this "Cypress Basics" workshop, I also regularly teach the following workshop.
- https://github.com/bahmutov/cypress-workshop-basics
- https://github.com/bahmutov/cypress-workshop-socketio-chat
Of course, I can customize a workshop to your needs, if necessary. Please let me know by getting in touch; you can email me at gleb.bahmutov at gmail.com.