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:giovannigiordano/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 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 dev

Slides 🖥

See the presentation at https://gitpitch.com/giovannigiordano/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 🗂

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
	The end	-	end	link

Additional information 🗃

• https://www.cypress.io/
• https://docs.cypress.io/
• https://docs.cypress.io/api/api/table-of-contents.html