Gleb Bahmutov, PhD

What we are going to cover 1/3

As long as ⏳ permits

• example TodoMVC
  • web app, data store, REST calls
• basic page load test
• selector playground
• resetting state
• XHR spying and stubbing, fixtures

What we are going to cover 2/3

As long as ⏳ permits

• CI and Cypress dashboard
• test reporters
• configuration and environment variables
• retry-ability
• debugging
• visual testing

What we are going to cover 3/3

As long as ⏳ permits

• page objects vs app actions
• fixtures and backend
• preprocessors
• component testing
• plugins
• code coverage

Time 🕰

• total workshop duration 3 - 9 hours, depending on the included sections
• short breaks, lunch

Please: if you have experience with Cypress.io, help others during the workshop 🙏

How learning works

1. I explain and show
2. We do together
3. You do and I help

Requirements

You will need:

• git to clone this repo
• Node v10+ to install dependencies
• Node v12 recommended

git clone <repo url>
cd testing-workshop-cypress
npm install

Repo organization

• /todomvc is a web application we are going to test
• all tests are in cypress/integration folder
  • there are subfolders for exercises
    • 01-basic
    • 02-adding-items
    • 03-selector-playground
    • 04-reset-state
    • etc
• keep application todomvc running!

todomvc

Let us look at the application.

• cd todomvc
• npm start
• open localhost:3000

important keep application running through the entire workshop!

It is a regular TodoMVC application.

If you have Vue DevTools plugin

Look at XHR when using the app

Look at todomvc/index.html - main app DOM structure

Look at todomvc/app.js

Questions

@ul

• what happens when you add a new Todo item?
• how does it get to the server?
• where does the server save it?
• what happens on start up? @ulend