Training »

Cypress Testing In Depth

Class length: 2 days (customizable)

This class aims to offer a definitive, detailed, deep explanation of how to use Cypress for E2E browser testing of typical large or complex application. We start with the basics and move quickly to cover realistic scenarios and challenges.

In the past many developers and teams found E2E testing difficult, and in some cases blamed their toolset. Cypress emerged with an ergonomic toolset - yet still, E2E testing at scale can be tedious and fragile. Here you'll learn practices to minimize difficulties.

For best compatibility with the current trends in front-end development, we present all examples in TypeScript; of course it is possible to remove the types and code Cypress using JavaScript.

Cypress and the content of this class are applicable regardless of what front end language, library, or framework you choose - React, Angular, Vue, Svelte, or many others.

Who Should Attend?

  • Decision makers looking to expand use of E2E testing.
  • "Developer in test" getting started with E2E automated testing, or expanding to test increasingly complex systems.
  • Non-developer testers are welcome, but will find Cypress testing requires considerable code-centric work.

You must be familiar with:

  • Software development
  • Angular, or a similar framework (we can offer this as a longer class, for non-Angular developers)
  • Editor and other tools to work on JavaScript source code.

Bring your computer---this is a hands-on workshop

Proven results

We've trained thousands of developers at companies like yours

Topic outline

  • Introduction and background
    • Oasis Digital introduction, student introduction
    • What are automated tests, and why E2E?
    • An Angular-specific testing pyramid
      • Non-angular unit tests
      • Unit tests, for code in Angular services
      • Integration tests, spanning services or client/server
      • Component tests, for the most complex widgets
      • E2E scenario-based automated browser tests
      • Human testing
    • Why Cypress for Angular E2E testing?
    • Web Platform refresher
      • HTML and the DOM, Document Object Model
      • CSS, including CSS selectors for testing
  • E2E technology and terminology
    • TypeScript, the language used throughout
    • JavaScript execution environments
    • NPM, the package manager
    • Cypress, the E2E testing tool
    • Chai, the assertion language
    • Browsers, including headless
    • Development tools
      • IDE / editor
      • Browser development tools (Chrome, Firefox, etc)
      • Cypress UI - built on Electron
  • Cypress test basics
    • Test cases
    • Test suites
    • Controlling navigation
    • Selectors
    • Cypress is Asynchronous
    • Cypress Chainables
    • Expectations
    • Automatic waiting/retry
  • Hands-on - Getting Started
    • Installing Node, NPM
    • Adding Cypress
    • Configuring Cypress
    • Your first test
    • Testing a button
    • Testing navigation
    • Testing a form
    • Loading data with HTTP
  • A philosophy of E2E automated browser testing
    • Test like a user
    • Detailed instructions
    • Asynchronicity
    • Visibility of system status enables robust testing
    • Black box
    • Tests are code
    • Robust testing improves the visibility of system status
    • To mock or not to mock
  • Growing a Cypress test suite (Hands-on)
    • "Page objects" - use functions and custom commands
      • Minimize stateful page objects
    • Organizing test suites
    • Naming tests and suites
    • The right level of granularity
    • Test features in isolation
    • Testing use cases (user stories) that span features.
    • Building use cases over time; extending versus starting anew.
    • Server stubbing
      • When to stub and when to communicate with the server
    • Abstractions for complex UIs
    • Maintaining clean tests and suites
      • Keep low-level testing APIs out of your tests to the extent reasonable
      • Yet keep your test explicit
    • Fail quickly, saving turnaround time.
  • Automating the System Under Test
    • What's in an environment and how many should I have
    • Resetting the system under test
    • Automated builds
    • Automated deployment
    • Database refresh vs data-tolerant test suites
    • Automated / CI execution of an E2E test suite
  • Scaling Cypress Testing
    • Multiple browsers - Is one enough?
    • Multiple operating systems - how many is enough?
    • Cypress parallelization
  • Problems and Solutions (Hands-on)
    • Timing fragility
    • Explicit waiting
    • Login CAPTCHAs and 2FA
    • Feature change fragility
    • Selecting the Target Elements
    • Timeouts, one of the worst aspects of E2E browser testing
    • Retry Gotchas
    • Unreliability
    • Post-mortem analysis - logging and screenshots
    • Animated routes and widget
    • Animated data
    • Compounding frustrations and developer fatigue
  • Resources
  • Additional topics
    • Sources of slowness
    • Cypress developmenet and evolution
    • Alternatives to Cypress
    • Waiting for a condition versus checking the condition
    • Organized according to the users' understanding of the system
    • Reusable units of testing
    • Driving system design from tests
    • Continuous E2E testing during development
    • What should I test?
    • Data-driven testing
    • System simulation testing
    • Alternatives to Chai
    • Test reports, including screen captures

Meet your instructors

Your instructors will depend on your custom requests, availability, consulting needs, etc.

Private group classes

For corporate groups and other organizations, we offer live in-person or online events. Our instructors listen to your needs in depth and adjust the agenda. We can include with consulting assistance, or combine topics into a longer workshop week.

Training Interest / Inquiry
... (select above to continue)

Training FAQs

Q: Is this taught in person?
A: We offer training both in-person and online via remote conferencing.
Q: How does the remote option work?
A: Much like an in-person class, it's conducted by our expert instructors in real time. The instructors answer questions, assist students, etc. We strive to offer as much of the in-person experience as possible, online.
Q: Can the content be customized?
A: For private team classes, we *always* discuss your goals, the class contents, any specials areas for extra coverage, etc. in advance. We customize both the contents and length (number of days) to your needs.
Q: Can we schedule a private class any time?
A: Our classes are taught by developers who use the subject technologies in their daily work, so we don't assign "any" available developer/trainer to any particular class, but only to classes with a strong experience and knowledge match. Please contact us to arrange a date.