testing-workshop-cypress
testing-workshop-cypress copied to clipboard
End-to-end testing workshop with Cypress
testing-workshop-cypress
A full day testing workshop complete with application, exercise tests and speaker slides for Cypress.io
Requirements
- Any computer: Mac, Windows, Linux
- Node 12.0.0+ (LTS), check GH workflow file
- git
In order to get the code and install dependencies
git clone [email protected]:cypress-io/testing-workshop-cypress.git
cd testing-workshop-cypress
npm install
If necessary, install dependencies inside TodoMVC folder
cd todomvc
npm install
Quick check ✅
You can test the installation by starting TodoMVC in the first terminal window
cd todomvc
npm start
and you should see in the terminal
> json-server --static . data.json --middlewares ./node_modules/json-server-reset
\{^_^}/ hi!
Loading data.json
Loading ./node_modules/json-server-reset
Done
Resources
http://localhost:3000/todos
Home
http://localhost:3000
Note for Windows users: if npm start
throws an error, it is probably due to cd todomvc; ...
first command in the npm start
script. In this case change the working folder to "todomvc" and run npm start
from there.
From the second terminal window you should be able to open Cypress in the root of the project with
$ npm run cy:open
> [email protected] cy:open /git/testing-workshop-cypress
> cypress open
Tip
You can use the installed start-server-and-test utility to start the app, open Cypress and then shutdown the app when you exit Cypress.
$ npm run dev
Application 💾
Vue.js + Vuex + REST server application that we are going to test is in the folder todomvc
. This application and its full testing is described in this blog post. The application should run fine without network access.
Slides 🖥
See the presentation at https://testing-workshop-cypress.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 "link" in the table below.
Content 🗂
Beginner
topic | folder | contents | slides | |
---|---|---|---|---|
🔗 | Introduction, TodoMVC application | todomvc | intro.md | link |
🔗 | Loading page | 00-start | 00-start | link |
🔗 | cypress open vs cypress run |
01-basic | 01-basic | link |
🔗 | Adding items test, cypress.json file |
02-adding-items | 02-adding-items | link |
🔗 | Selector Playground | 03-selector-playground | 03-selector-playground | link |
🔗 | Reset database using cy.request |
04-reset-state | 04-reset-state | link |
🔗 | Spy and stub XHR requests, fixtures | 05-xhr | 05-xhr | link |
🔗 | Access application code and data | 06-app-data-store | 06-app-data-store | link |
Intermediate
topic | folder | contents | slides | |
---|---|---|---|---|
🔗 | Setting up E2E tests on CI | 07-ci | 07-ci | link |
🔗 | Setting up Cypress Dashboard | 07-ci | 08-dashboard | link |
🔗 | Test reporters | - | 09-reporters | link |
🔗 | Configuration | - | 10-configuration | link |
🔗 | Retry-ability | 11-retry-ability | 11-retry-ability | link |
🔗 | Custom commands | 12-custom-commands | 12-custom-commands | link |
Advanced
topic | folder | contents | slides | |
---|---|---|---|---|
🔗 | Page Objects vs App Actions | 13-app-actions | 13-app-actions | link |
🔗 | Fixtures | 14-fixtures | 14-fixtures | link |
🔗 | Debugging | 02-adding-items/demo.js | 15-debugging | link |
🔗 | Preprocessors | 16-preprocessors | 16-preprocessors | link |
🔗 | Component testing | 17-component-testing | 17-component-testing | link |
🔗 | Backend code | 18-backend | 18-backend | link |
🔗 | Code coverage | 19-code-coverage | 19-code-coverage | link |
🔗 | Stubbing methods | 20-stubbing | 20-stubbing | link |
The end | - | end | link |
For speakers 🎙
This workshop can take all day, but you can pick the sections you are interested in teaching at will and customize it into any time duration. Everyone is coding for the most part, except for CI and the Cypress Dashboard sections, where the usage was shown via slides and actual sites.
During the workshop, keep the todomvc
app running in one shell, while each section 01-basic
, 02-...
, 03-...
etc. has its own Cypress and specs subfolders cypress/integration/...
. Usually a spec has several tests with placeholder comments. The workshop attendees are expected to make the tests pass using the knowledge from the slides and hints (and Cypress documentation). Note that most folders have a prepared spec.js
file and an answer.js
file. The answer.js
file is ignored by Cypress using a setting in cypress.json
.
The only exception is the folder 00-start
. This is a folder for students to see how Cypress scaffolds example specs when you open Cypress for the very first time. In this folder students should execute...
cd 00-start
npm run cy:open
...and see the list of created example specs.
The slides are generated using Reveal.js from Markdown sources in the slides folder. You can show the slides locally by running
npm run slides:dev
The slides are deployed to Netlify automatically, see https://testing-workshop-cypress.netlify.app/
Additional information 🗃
- https://www.cypress.io/
- https://docs.cypress.io/
- https://docs.cypress.io/api/api/table-of-contents.html