Course Overview

Cypress is one of the most popular JavaScript End-To-End (E2E) Testing Libraries. E2E testing is a critical part of modern web application development. Combined with unit testing, E2E provides an automated way to ensure web applications work as intended helping to ensure customer satisfaction and developer confidence in the programming of the application.

In this 3-day, hands-on course, you will learn how you can apply sound E2E Testing principles so you and your team can deliver value as fast as your customers need and expect.

Key Learning Areas

Attendees will acquire first-hand experience using Cypress and its features.

You will learn:

  • How you, your team, or your company should utilize Cypress
  • Understand the concept and application of E2E Testing
  • How to Setup and configure Cypress
  • How to Run Cypress Tests
  • E2E Testing Best Practices

Each course module consists of a lecture followed by a hands-on lab designed to reinforce the principles presented during the lecture.

Course Outline

JavaScript End-To-End and Component Testing

  • What is End-To-End (E2E) Testing?
  • What is E2E Testing?
    • Benefits of E2E Tests
    • Considerations for E2E Tests
    • Common Scenarios for E2E Tests
  • What is Component Testing?
    • Benefits of Component Tests
    • Considerations for Component Tests
    • Common Scenario for Component Tests
  • Comparison of Testing Types
  • Why Cypress?

Cypress Setup

  • Setup a Cypress Project
    • Install Cypress
    • Configure Cypress with React/Angular
  • Folder Structure
    • Configuring Folder Structure
    • Spec Files
    • Fixture Files
    • Asset Files
    • Plugins Files
    • Support Files
    • Troubleshooting
  • Cypress App
    • The Launchpad
    • The Spec Explorer
    • Project Runs
    • Test Runner
    • Command Log
    • Preview Pane
    • Selector Playground
    • Keyboard Shortcuts
    • Debugging

Writing and Running Tests

  • Writing Tests
    • Test Structure
    • Hooks
    • Excluding and Including Tests
    • Test Isolation
    • Test Configuration
    • Dynamically Generate Tests
    • Assertion Styles
  • Querying Elements
    • Cypress is like jQuery
    • Cypress is not like jQuery
    • Querying by Text Content
    • When Elements are Missing
  • Actionability, Interacting with Elements
    • Visibility
    • Disability
    • Detached
    • Readonly
    • Animations
    • Covering
    • Scrolling
    • Coordinates
  • Chains of Commands
    • Interactive with Elements
    • Asserting about Elements
    • Subject Management
    • Commands are Asynchronous
    • Commands Run Serially
    • The Cypress Command Queue
  • Assertions
    • Asserting in English
    • When to Assert?
    • Default Assertions
    • List of Assertions
    • Writing Assertions
    • Implicit Subjects
    • Explicit Subjects
  • Return Values
    • Return Values
    • Closures
    • Debugging
    • Variables
  • Aliases
    • Sharing Context
    • Elements
    • Intercepts
    • Requests
  • Conditional Testing
    • What are Conditional Tests?
    • Situations where conditional tests are impossible
    • Strategies to handle common scenarios of conditional testing
    • DOM Stability
    • Server-Side Rendering
    • Client-Side Rendering
    • A/B campaign
    • Welcome wizard
    • Element existence
    • Dynamic text
  • Debugging

Who Benefits

This course is primarily designed for software developers who want to learn how to work with Cypress to implement JavaScript E2E testing. Coding is done in JavaScript. The class is taught using React, Angular, or Vue.

To work along with the labs, attendees must have the following:

  • A modern web browser like Microsoft Edge, Chrome, or Firefox. Internet Explorer is NOT supported
  • A version of Windows, macOS, or Linux that can run Visual Studio Code
  • Local Administrative permissions to install additional tools such as the Git command-line tools, NPM packages, and other required lab tools

Prerequisites

Intermediate JavaScript web programming experience. React or Angular experience. If students do not have JavaScript web programming, a primer course is recommended. If students do not have React or Angular experience, a primer course is recommended.