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 6+
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

and from the second terminal you should be able to open Cypress with

$ npm run cy:open

> testing-workshop-cypress@1.0.0 cy:open /git/testing-workshop-cypress
> cypress open

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 🖥

https://gitpitch.com/cypress-io/testing-workshop-cypress with the starting file in PITCHME.md presented using GitPitch. The pitch file includes files from the slides folder. Students should open the presentation slides and follow along. You can also show each section separately by clicking on the "slides" link in the table below. The full presentation includes all these presentations.

Content 🗂

topics	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
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
Page Objects vs App Actions	13-app-actions	13-app-actions	link
Fixtures and backend	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
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 can be shown directly via the presentation link above. The Markdown files in slides folder also has a little bit of speaker notes.

shawn-dsz/testing-workshop-cypress