cypress-io/testing-workshop-cph

End-to-end testing workshop with Cypress at CopenhagenJS

testing-workshop-cph

End-to-end testing workshop with Cypress.io at CopenhagenJS / ngCopenhagen

Requirements ⚙️

• Any computer: Mac, Windows, Linux
• Node 6+
• git

In order to get the code and install dependencies

git clone [email protected]:cypress-io/testing-workshop-cph.git
cd testing-workshop-cph
npm install

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.

Slides 🖥

https://gitpitch.com/cypress-io/testing-workshop-cph 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.

Content 🗂

Strike through for topics we are going to skip.

topics	folder	slides
Introduction, TodoMVC application	todomvc	intro.md
cypress open vs cypress run	cypress/integration/01-basic	01-basic.md
Adding items test, cypress.json file	cypress/integration/02-adding-items	02-adding-items.md
Selector Playground	cypress/integration/03-selector-playground	03-selector-playground.md
Reset database using cy.request	cypress/integration/04-reset-state	04-reset-state.md
Spy and stub XHR requests, fixtures	cypress/integration/05-xhr	05-xhr.md
Access application code and data	cypress/integration/06-app-data-store	06-app-data-store.md
Setting up E2E tests on CI	cypress/integration/07-ci	07-ci.md
Setting up Cypress Dashboard	cypress/integration/07-ci	08-dashboard.md
The end	-	end.md

For speakers 🎙

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 slides can be shown directly via the presentation link above. The Markdown files in slides folder also has a little bit of speaker notes.

testing-workshop-cph's Issues

"cd todomvc; npm start" does not work on Windows

Need a different solution to start TodoMVC server from the root folder

Rework basic section

• starting with a failed test is weird
• the test is too small?
• the test is not a good demo for timeout option

Fix missing images

Some images were in subfolders, that were now merged

like ![First test run](04-reset-state/img/passing-test.png)

make app work completely offline

app uses unpkg external urls, should just use local modules if possible

Investigate Windows spec wildcard issue

A user on Windows could not run npm run test command due to wildcard in spec

"test": "cypress run --spec 'cypress/integration/07-ci/*'",

Can we avoid slashes in the command?

Also I wonder if a command without a wildcard works.

"basic": "cypress run --spec 'cypress/integration/01-basic/spec.js'"

Check todomvc start up

Had troubles starting the server using npm start - error cannot find ../package.json?

Remove 00-start part

It is confusing to open Cypress from another folder, just to see specs and start new staff