End-to-end testing workshop with Cypress at CopenhagenJS
End-to-end testing workshop with Cypress.io at CopenhagenJS / ngCopenhagen
In order to get the code and install dependencies
git clone git@github.com:cypress-io/testing-workshop-cph.gitcd testing-workshop-cphnpm install
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.
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.
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 |
| 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 |
| cypress/integration/07-ci | 08-dashboard.md | |
| The end | - | end.md |
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.