Cypress Testing in Depth

Reliable E2E Testing Empowers Change Management

We'll work through realistic scenarios together to boost your team's ability to write reliable E2E tests. Take strategic steps to ensure success in your change management goals.

Learn as a Team

Create shared understanding of effective Angular use as a team - everyone on the same page.

Immediate Answers

Our live instructors answer questions and help with your code, whether online or in person. Bring your laptop!

Enterprise Focus

Your team gets realistic Angular experience building enterprise features.

Move Faster

Learn in a few days what could take months to learn on your own or from a series of incohesive online courses.

Future Ready

Our curriculum examples are kept up-to-date by our instructors - full-time expert developers at Oasis Digital.

Proven Results

We've trained thousands of developers at hundreds of companies you'll recognize.

Who benefits from Testing with Cypress

Decision Makers

Expand your team's unit testing strategy within complex projects.

Experienced Developers

Get started with E2E tests. Learn best practices for automated testing in enterprise applications.

E2E Testers

Expand your knowledge base and deep dive into current best practices.

Still using Protractor?

Protractor is deprecated as of summer 2023. Most teams are moving to Cypress for an ergonomic and effective replacement. Contact Oasis Digital for assistance migrating.

Cypress Testing 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

Skills you'll learn

Installing and getting started with Cypress
Cypress test basics
Grow a Cypress test-suite
Automate excecution of E2E test-suite
Scale E2E testing with Cypress

Private Team Training

Upskill developer teams with instructor-led training online or at your location, U.S. or globally. Class content is customized to match your team's environment and needs.

Up to 30 developers can learn together, with multiple instructors for immersive workshop sessions. Accomodate larger teams with multiple classes.

Package Builder with pricing

Individual Class Tickets

Online: Buy a ticket to join us for live, instructor-led, public classes. Ask questions, get help, and workshop your code in real-time.

For tickets, see our list of class dates.

What students are saying

With a second instructor helping the students, things moved along.... Mixing lab work with lectures. There's no substitute for hands-on work.

This class is very good. The content flowed as fast as we could consume it. I can't wait to use this knowledge in my next application!

This was an awesome class- I've been using Angular for almost a year but haven't gone through any training, and this helped fill a whole lot of knowledge gaps. I feel much more confident and am excited to put what I learned to use!

The class was very informative and engaging. The instructor was knowledgeable in answering questions as well as providing use cases and the best practices. The workshops provided an opportunity to learn hands-on while still receiving feedback. I truly enjoyed learning.

This class offered a space to interact and learn more in depth than you could from just reading documentation or watching videos. I liked being able to interact with instructors and ask specific questions. Really helped me understand way more than I have been able to learn on my own.

The instructor was probably the best I have ever experienced.Deeply knowledgeable about all of the subject matter, able to answer every question (including a handful that he was uncertain about). Very well spoken.

The Angular boot camp was extremely helpful. helped me get from no Angular knowledge to a point where I could dive in and begin to understand my organization's code.

Great overview, easy-to-understand examples, very knowledgeable instructor who was able to answer just about everything we asked him. Never felt at any point that it was going too fast or too slow. Learned a ton of useful information without feeling overwhelmed.

With a second instructor helping the students, things moved along.... Mixing lab work with lectures. There's no substitute for hands-on work.

This class is very good. The content flowed as fast as we could consume it. I can't wait to use this knowledge in my next application!

Years using
Angular

4000+

Developers
trained

20+

Years in
business

200+

Classes
Taught

Meet your instructors

Every instructor is also a contributor to our curriculum and proven Angular expert.

Paul Spears

Paul leads our Angular training and curriculum team. His passion for effective class structure and pedagogy allows him to spread state-of-the-art Angular techniques as a speaker and panelist.

John Baur

John leads development projects, focusing on regular delivery and team orchestration. He specializes in sanding rough edges and reducing speed bumps that slow the learning progress.

Zachary Kipping

Zachary is a front-end heavy, full stack developer who loves learning about the shiniest new technologies.

Lance Finney

Lance has been an Angular developer since 2015, and a Java developer for over a decade. He specializes in powerful Angular add-ons including NgRx and ag-grid.

Joshua Demetri

Joshua is a software developer working with web applications in the Angular framework. He also has experience with large enterprise applications.

David Moore

David is a mobile and web developer. He's been programming computers since the 1990s, and enjoys working on puzzles in the front-end enterprise space. He's written for several technical publications.

FAQs

How closely do the classes follow the outlines?

We always cover many key topics. In private group classes we adjust the content to match your group's requests.

Are the online classes the same as the in-person classes?

The contents are the same; we strive to offer the same "magic" in-person and online, helping students one-on-one as needed. Still, there are inherent advantages to attending in person. Learn more from our online-vs-in-person blog post.

Should our team attend a public class, or a private on-site class?

We offer group discounts for 4 or more tickets. If you have 6 or more developers, it may be more economical to bring an instructor to you. In private classes, the instructor can tailor the class topics to your team's needs, and discuss specific use cases in more depth.

Are more advanced classes available?

Yes! Angular Boot Camp covers introductory through intermediate topics, while our other other classes cover more advanced and related tools and topic in the Angular ecosystem.

Do the classes cover server-side API / data services?

Angular Boot Camp covers how to call server-side APIs, while our other classes and consulting services go in depth on full stack development.

Can students receive a Certificate of Completion?

Yes, we can issue a certificate on request; please inquire by email after your class is complete.

Is an AngularJS 1.x class still available?

Demand for 1.x live training is not sufficient for ticketed classes, but we occasionally teach it for private groups.

Do you cover Node.js in Angular Boot Camp?

We discuss Node.js, and assist with installation, as Node.js powers the Angular development tools. If you want to dive deeper, we recommend our Node.js/TypeScript class.

Do the classes cover HTML and CSS?

Students should already be familiar with HTML and CSS, but we cover the basics in the context of the HTML DOM which Angular manipulates. We recommend the extensive free or inexpensive HTML and CSS materials online, but also often assist teams to make best use of HTML and CSS (including SCSS) at scale.

How about code review and project assistance?

Our private Angular Boot Camp classes often include additional days of customized training, with code review, project launch or design assistance.

What should students bring to class?

Students should bring a laptop with Chrome and their preferred editor or IDE. We'll provide more preparation details after sign-up.

Upcoming Training Dates

Public classes are currently online-only. Private on-site engagements are available now.

Loading event schedule...

Private Training Inquiry

Need more assistance?

Oasis Digital offers a full spectrum of software development and consulting services:

Add-on code review / consulting days
Classes on other topics
Customized training and mentoring
Rapid MVP development
Build a complex application