bahmutov / cypress-workshop-basics

Basics of end-to-end testing with Cypress.io test runner

Home Page:https://glebbahmutov.com/cypress-workshop-basics/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

cypress-workshop-basics

ci status badges status slides status CircleCI

cypress-workshop-basics renovate-app badge cypress version

Basics of end-to-end testing with Cypress.io test runner

Introduction

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.

Topics

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

Target audience

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.

Requirements

Check the Node version

$ node -v
# for example v18.13.0
$ npm -v
# for example 8.19.3

Clone the repo

In order to get the code and install NPM dependencies, first clone my repo to your local machine.

git clone git@github.com:bahmutov/cypress-workshop-basics.git

Cloning into ...

Tip: if you are having permission problems cloning using the git@github.com:bahmutov/cypress-workshop-basics.git URL, try using HTTPS URL to clone the same repo:

git clone https://github.com/bahmutov/cypress-workshop-basics.git

Cloning into ...

Install NPM dependencies

Change the working folder to the cloned repository folder

cd cypress-workshop-basics

The cloned repo has the file package.json with all NPM dependencies. Let's install these NPM dependencies

npm install

If necessary, install dependencies inside TodoMVC folder.

cd todomvc
npm install

Quick check ✅

You can test the installation by starting TodoMVC in the first terminal window

npm start

and 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:

TodoMVC application running in the browser

From the second terminal window you should be able to open Cypress in the root of the project with

$ npm run cy:open

> cypress-workshop-basics@1.0.0 cy:open /git/cypress-workshop-basics
> cypress open

You should see the Cypress Desktop window appear and show the list of test files (specs).

Cypress Desktop

Tip

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 dev

The 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

> cypress-workshop-basics@1.0.0 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"

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. The application should run fine without network access.

If you are looking for the application by itself, check out bahmutov/testing-app-example.

Slides

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.

Contents

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-network 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
Component testing 10-component-testing link
The end end link

Take a short quiz

For self-guided learning

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?

For speakers

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 slides

Note: always use relative paths to images from the slides Markdown, like

![Post new item response](./img/post-item-response.png)

Additional information

Other workshops

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.

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.

Author

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.

About

Basics of end-to-end testing with Cypress.io test runner

https://glebbahmutov.com/cypress-workshop-basics/


Languages

Language:JavaScript 97.0%Language:HTML 2.9%Language:CSS 0.0%