Awesome Open Source
Awesome Open Source

testing-workshop-cypress CircleCI Build status GH Actions renovate-app badge

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

Requirements ⚙️

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



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

> [email protected] cy:open /git/testing-workshop-cypress
> cypress open


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 with the starting file in 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 🗂


topic folder contents slides
🔗 Introduction, TodoMVC application todomvc 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


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


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

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.

Every time a new Todo is saved or deleted, it changes file todomvc/data.json. To reset the list back to empty run npm run reset command.

Additional information 🗃

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (67,535) 
testing (914) 
workshop (92) 
cypress (66) 
cypress-io (21) 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising 📦 10
All Projects
Application Programming Interfaces 📦 124
Applications 📦 192
Artificial Intelligence 📦 78
Blockchain 📦 73
Build Tools 📦 113
Cloud Computing 📦 80
Code Quality 📦 28
Collaboration 📦 32
Command Line Interface 📦 49
Community 📦 83
Companies 📦 60
Compilers 📦 63
Computer Science 📦 80
Configuration Management 📦 42
Content Management 📦 175
Control Flow 📦 213
Data Formats 📦 78
Data Processing 📦 276
Data Storage 📦 135
Economics 📦 64
Frameworks 📦 215
Games 📦 129
Graphics 📦 110
Hardware 📦 152
Integrated Development Environments 📦 49
Learning Resources 📦 166
Legal 📦 29
Libraries 📦 129
Lists Of Projects 📦 22
Machine Learning 📦 347
Mapping 📦 64
Marketing 📦 15
Mathematics 📦 55
Media 📦 239
Messaging 📦 98
Networking 📦 315
Operating Systems 📦 89
Operations 📦 121
Package Managers 📦 55
Programming Languages 📦 245
Runtime Environments 📦 100
Science 📦 42
Security 📦 396
Social Media 📦 27
Software Architecture 📦 72
Software Development 📦 72
Software Performance 📦 58
Software Quality 📦 133
Text Editors 📦 49
Text Processing 📦 136
User Interface 📦 330
User Interface Components 📦 514
Version Control 📦 30
Virtualization 📦 71
Web Browsers 📦 42
Web Servers 📦 26
Web User Interface 📦 210