testing-workshop-cypress

[![CircleCI][ci-badge]][ci-url] [![renovate-app badge][renovate-badge]][renovate-app]

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 git@github.com: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

> testing-workshop-cypress@1.0.0 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 🎙

[](https://app.netlify.com