Testing Web Apps with Cypress

Steve Kinney

Steve Kinney

Temporal
4 hours, 41 minutes CC
Testing Web Apps with Cypress

Course Description

Cypress is the fastest and easiest way to write end-to-end tests for your client-side applications. Learn the selector engine, test runners, assertion library, and write your own custom commands. Seed your database using Tasks in Node.js, and mock and stub out network requests, so you're not relying on external APIs that you don't control. Finally, integrate your Cypress tests with your CI/CD pipeline using GitHub Actions!

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: March 8, 2022

Topics

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 18 minutes
  • Introduction
    Steve Kinney begins the course by introducing Cypress and highlighting a few of the key features. Cypress offers end-to-end testing for any browser-based web application. It offers time traveling, real time reloads, and automatic waiting. A walkthrough of the course repository is also included in this segment.
  • Setup Cypress & Code
    Steve discusses the ways Cypress can be installed and run. Cypress runs in a separate application. The first time it's opened, both a cypress directory and a cypress.json file are created in the project. A number of example test files are also added to the project.

Testing Basics

Section Duration: 1 hour

Aliases

Section Duration: 23 minutes

Complex Inputs

Section Duration: 25 minutes

Generating Tests

Section Duration: 34 minutes

Form Validation

Section Duration: 15 minutes

Tasks & Commands

Section Duration: 26 minutes

Network Requests & Sessions

Section Duration: 48 minutes
  • Network Requests & Intercept
    Steve introduces the intercept method which allows Cypress to catch network requests to a particular API. An interception can either test if a network request occurs or replace the response from the request with mock data.
  • Testing Search
    Steve uses an intercept to help test the search text field. After a search query is submitted, the intercept verifies the network request is sent. Additional test check the query parameters in the url of the request object.
  • Fixtures
    Steve explains that fixtures is the dummy data that replaces a response during an API call. Fixtures are useful when tests are not checking the result of an API call, but rather how the application handles the data. Fixtures can be hard-coded within a test or be loaded from an external JSON file.
  • Intercept Practice
    Steve demonstrates a few additional network request test examples and allows some time for students to complete a few additional challenges.
  • Testing Cookies & Sessions
    Steve walks through a few ways to test cookie and session data. The getCookie and setCookie methods read and write the cookie data to the browser. Mocking the cookie data can helpful when saving data from an API call is not required.

Mocking & Continuous Integration

Section Duration: 18 minutes
  • Mocking In Depth
    Steve walks through some additional examples for mocking requests and data within Cypress. Requests can be intercepted based on the type of request such as GET or POST. Full API requests can be stubbed eliminating the need for the endpoint to be available during the test.
  • Cypress Studio
    Steve demonstrates Cypress Studio which writes tests based on actions performed in the user interface. When the command generator is selected, any actions performed within the interface are written in the test file.
  • Continuous Integration
    Steve demonstrates how continuous integration works with Cypress. The command `npx cypress run` opens a headless version of the browser to run the tests. All tests are executed with the results displayed in the command line.

Wrapping Up

Section Duration: 7 minutes
  • Wrapping Up
    Steve wraps up the course answering audience questions about managing keys/secrets, automating a subset of tests within a test suite, reviewing Cypress Studio videos, and acceptable testing durations.
I could not have asked for a better introduction to Cypress testing than this class: "Testing Web Apps with Cypress" by Steve Kinney on Frontend Masters!
Shahlo Seidmedova

Shahlo Seidmedova

SSeidmedova

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now