PITCHME.md

Cypress Workshop: Basics

• github.com/bahmutov/cypress-workshop-basics

Jump to: 00-start, 01-basic, 02-adding-items, 03-selector-playground, 04-reset-state, 05-network, 06-app-data-store, 07-ci, 08-retry-ability, 09-custom-commands, 10-component-testing, end

+++

Author: Gleb Bahmutov, PhD

• Ex-VP of Engineering at Cypress
• Ex-Distinguished Engineer at Cypress
• actively using Cypress since 2016
• gleb.dev
• @bahmutov
• https://glebbahmutov.com/blog/tags/cypress/ 300+ Cypress blog posts
• https://www.youtube.com/glebbahmutov 500+ Cypress videos
• cypress.tips with links, search, my courses
• Cypress Tips monthly newsletter

+++

cypress.tips/courses

---

What we are going to cover 1/2

• example TodoMVC
  • web app, data store, REST calls
• basic page load test
• selector playground
• resetting state before the test
• any questions

+++

What we are going to cover 2/2

• network spying and stubbing, fixtures
• running E2E tests on CI / Test Replay
• retry-ability and flake-free tests
• custom commands
• component testing
• any questions

---

Schedule 🕰

• Unit 1: 08.30am - 10.00am ☕️
• Unit 2: 10.30am - 12.00pm
• Lunch Break: 12.00pm to 1.00pm
• Unit 3: 1.00pm - 2.30pm ☕️
• Unit 4: 3.00pm - 4.30pm
• time for questions during the workshop and after each section

+++

Poll 1 🗳️: have you used Cypress before?

• This is my first time
• Using for less than 1 month 👍
• Using it for less than 1 year 👍👍
• Using for longer than 1 year ❤️
• Using for longer than 2 years ❤️❤️

---

Poll 2 🗳️: have you used other E2E test runners?

• Selenium / Webdriver
• Protractor
• TestCafe
• Puppeteer / Playwright
• Something else?

---

Poll 3 🗳️: what unit testing tool do you use?

• Jest
• Mocha
• Ava
• Tap/Tape
• node:test
• Something else?

---

Last poll 🗳️: Do you use TypeScript

• no
• a little
• half of the time
• all the time

---

How efficient learning works

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

Tip: this repository has everything to work through the test exercises.

bahmutov/cypress-workshop-basics

+++

🎉 If you can make all "cypress/e2e/.../spec.js" tests work, you know Cypress.

Tip 💡: there are about 90+ tests to fill with code, see them with "npm run names" command by using "find-cypress-specs"

---

Requirements

You will need:

• git to clone this repo
• Node v16+ to install dependencies

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

---

Repo organization

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

Note: We are going to keep the app running, while switching from spec to spec for each part.

+++

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

• 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?

Note: The students should open DevTools and look at XHR requests that go between the web application and the server. Also the students should find todomvc/data.json file with saved items.

---

Note: This app has been coded and described in this blog post https://www.cypress.io/blog/2017/11/28/testing-vue-web-application-with-vuex-data-store-and-rest-backend/

+++

This app has been coded and described in this blog post https://www.cypress.io/blog/2017/11/28/testing-vue-web-application-with-vuex-data-store-and-rest-backend/

---

End of introduction

➡️ Pick the next section or go to the 00-start chapter