cypress-io / testing-workshop-cypress

End-to-end testing workshop with Cypress
https://testing-workshop-cypress.netlify.app/
479 stars 190 forks source link
cypress cypress-io testing workshop

testing-workshop-cypress

cypress version CircleCI Build status renovate-app badge

A full day testing workshop complete with application, exercise tests and speaker slides for Cypress.io

Requirements

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 startscript. 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 šŸŽ™

Netlify Status

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 šŸ—ƒ