Basics of end-to-end testing with Cypress.io test runner
Web sites that do not work are bad. Full end-to-end automated tests are the best way to gain the confidence that the entire system will work when the real user visits the site. This workshop introduces you to the Cypress.io Test Runner and teaches writing realistic tests that are readable, reliable, and fast.
This workshop covers the topics relevant to both beginners and experienced Cypress users. Over the half or full-day workshop we will cover the following topics through the hands-on exercises:
- Installing Cypress and writing the first test
- Cypress documentation, examples, and recipes
- Selecting the DOM elements and interacting with the page
- Controlling the application state
- Removing test flake
- Spying and stubbing the network communication from tests
- Running Cypress tests on Continuous Integration system
- Factoring out pieces of tests into custom commands
This workshop will be very useful for every web developer and every tester looking to automate web application testing. Only a minimal knowledge of JavaScript is required, although previous experience with web programming and browser DevTools is very helpful.
- Any computer: Mac, Windows, Linux
- Node 12.0.0+ (LTS), see my Node install video, and my Node versions using NVM video
- git
Check the Node version
$ node -v
# for example v14.17.1
$ npm -v
# for example 6.14.13
In order to get the code and install NPM dependencies
git clone [email protected]:bahmutov/cypress-workshop-basics.git
cd cypress-workshop-basics
npm installIf necessary, install dependencies inside TodoMVC folder
cd todomvc
npm installYou can test the installation by starting TodoMVC in the first terminal window
npm startand 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
Done
Resources
http://localhost:3000/todos
Home
http://localhost:3000
If you open your browser and type "localhost:3000" you should see the web application running:
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/cypress-workshop-basics
> cypress openYou should see the Cypress Desktop window appear and show the list of test files (specs).
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 devThe terminal will show the server start command, the URL to check, and the test command before you see Cypress Desktop window open.
$ npm run dev
> [email protected] dev /cypress-workshop-basics
> start-test 3000 cy:open
1: starting server using command "npm run start"
and when url "[ 'http://localhost:3000' ]" is responding with
HTTP status code 200 running tests using command "npm run cy:open"
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.
The slides are deployed to GitHub Pages and can be seen at https://glebbahmutov.com/cypress-workshop-basics/.
The slides can be seen locally by running npm run slides and opening localhost:3100. The content for the slides comes from the Markdown files in the slides folder. Read Presentations with Reveal.js and Vite for technical details.
| Topic | The Markdown | See the slides |
|---|---|---|
| Introduction | intro.md | link |
| Loading and testing the page | 00-start | link |
cypress open vs cypress run |
01-basic | link |
Adding items test, cypress.json file |
02-adding-items | link |
| Selector Playground and Cypress Studio | 03-selector-playground | link |
Reset the database using cy.request |
04-reset-state | link |
| Control the network requests | 05-xhr | link |
| Access the application code and data | 06-app-data-store | link |
| Running E2E tests on CI | 07-ci | link |
| Retry-ability and flake prevention | 08-retry-ability | link |
| Custom commands | 09-custom-commands | link |
| The end | end | link |
Take a short quiz
You can learn everything in this repository without an instructor telling you what to do. Start the application, open Cypress, open the slides (see above), and follow the slides! Every section has learning objects, full set of instructions, and exercises to perform on your own.
There are even the answers, but you would not cheat by looking at them, would you?
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 are generated using Reveal.js from Markdown sources in the slides folder. You can show the slides locally by running
npm run slidesNote: always use relative paths to images from the slides Markdown, like
- https://www.cypress.io/
- https://docs.cypress.io/
- https://glebbahmutov.com/cypress-examples/
- https://cypress.tips/
- https://www.youtube.com/glebbahmutov
- https://slides.com/bahmutov
If your organization is interested in learning about Cypress in depth, please contact me. Besides this "Cypress Basics" workshop, I also regularly teach the following workshop.
- https://github.com/bahmutov/cypress-workshop-ci
- https://github.com/bahmutov/cypress-workshop-socketio-chat
Of course, I can customize a workshop to your needs, if necessary. Please let me know by getting in touch; you can email me at gleb.bahmutov at gmail.com.
Gleb Bahmutov has PhD in Computer Science and has worked at Cypress.io for four years as VP of Engineering and Distinguished Engineer, and was heavily involved in all areas of the Test Runner development, as well as Cypress Dashboard features, plugin writing, and CI integration. He has spoken about Cypress approximately a hundred times at meetups and conferences, wrote 100s of blog posts about testing, and has recorded more than 150 Cypress videos available for free on his YouTube channel. Today, Gleb is still heavily using Cypress at a large company making sure its web applications are always working correctly.