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.

Prerequisites / requirements

  • Experience in software development
  • Experience with Angular or a similar (we can offer this as a longer class, for non-Angular developers)
  • Editor and other tools to work on JavaScript source code.
  • A computer - this is a hands-on workshop.
  • Ability to install software, including Node, NPM, and packages.

Proven results

We have trained thousands of developers at hundreds of companies, including numerous global leaders.

Two ways to learn

1) Training for your team,
available now

For corporate groups and other organizations, we offer live in-person or online instruction. These teams typically have advanced needs, so we provide customized, hands-on assistance.

Before each class, our instructors listen to your needs in depth and adjust the agenda. We can follow-up a class with consulting assistance, or combine multiple classes into a longer workshop week.

Private Training Inquiry
(We'll also email about upcoming events and offerings; stop the messages anytime with just a click.)

2) Live-instructor public classes,
coming soon

Want to attend as an individual or small group? We are creating public, open enrollment versions of many of our classes, including this one.

Unlike canned video training, live instructor online classes offer frequent opportunities for detailed Q&A discussion.

This class isn't quite ready yet, but follow us on social media (bottom of the page) or keep an eye on our website for announcements. We will show the schedule of upcoming open enrollment class dates prominently.

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

Instructors

Oasis Digital instructors have extensive experience with both Angular and numerous surrounding technologies; here are some of them. The specific instructor(s) assigned to your class will depend on which class or class topics (we customize!) are put together, availability, additional consulting needs, etc.

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 is conducted by our expert trainers, in real time. The trainers can answer questions, assist with trouble students are having, etc. We strive to offer as much of the in-person experience as possible, online.
Q: Are there open enrollment public classes?
A: We currently only offer an open-enrollment "public" class for our flagship Angular Boot Camp.
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.