WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
JavaScript Congress • Nov 23, 2021

Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS

Anna Mcdougall

Tired of configuring timeouts and manual waits? Discover how Cypress simplifies React end-to-end testing with intuitive chainable commands and visual time-travel debugging.

Pause
Mute Enter Fullscreen
#1 about 3 min

Introduction and transitioning into the tech industry

Background on the presenter and introducing the goal of teaching Cypress basics to beginners.

#2 about 2 min

Understanding the purpose of end to end testing

Examining how full user paths validate the entire application experience as opposed to mocking unit functions.

#3 about 3 min

Advantages of using Cypress for testing workflows

Key features like time travel, automatic waiting, and cross-browser support make creating tests smoother.

#4 about 2 min

Installing Cypress and initializing the test environment

Adding the framework to an npm project and launching the interactive graphical user interface.

#5 about 2 min

Exploring the target application for front end tests

Reviewing the Mad Libs input form and login flow that will act as the testing target.

#6 about 2 min

Determining which user journeys to test with Cypress

Analyzing the trade-off between testing every individual interaction versus prioritizing essential user flows.

#7 about 2 min

Structuring front end tests with arrange act and assert

Configuring page state, triggering user behaviors, and validating outcomes builds reliable component tests.

#8 about 3 min

Organizing tests using describe and it blocks

Creating test suites and resetting environments using specific hook functions to isolate scenarios.

#9 about 3 min

Visiting a webpage and opening the cypress interface

Executing the visit command and discovering how simulated browsers process test steps live.

#10 about 3 min

The danger of passing tests without explicit assertions

Untested script actions display as passing unless specific expected behaviors and outcomes are continuously evaluated.

#11 about 4 min

Simulating user typing and clicking with Cypress commands

Selecting unique input fields and stringing together actions to replicate full usage flows.

#12 about 4 min

Validating element attributes and structures with Cypress assertions

Checking header visibilities, reading internal elements, and explicitly confirming the length of rendered arrays.

#13 about 2 min

Deciding between comprehensive full flows and incremental steps

Discussing test scope philosophy and how larger bundled interactions optimize testing pipeline efficiency.

#14 about 5 min

Gathering mock submission inputs for a dynamic test

Collecting crowdsourced array parameters to inject as payload variations into the testing simulation run.

#15 about 5 min

Running automated background operations before typing mapped values

Setting up context using wrapper methods and populating repetitive inputs using explicitly matched identifiers.

#16 about 3 min

Verifying conditional unblocking mechanisms inside reactive input forms

Affirming that interface submit buttons successfully enable once bound constraints are appropriately populated.

#17 about 2 min

Executing explicit content checks on procedurally generated views

Ensuring that dynamically constructed output strings match formatted injection variables extracted earlier.

#18 about 2 min

Session summary and brief recap of learned testing concepts

A swift reiteration summarizing syntax models and available architectural tooling referenced earlier.

#19 about 2 min

Intercepting backend responses natively using Cypress network methods

Responding to audience questions regarding stubbing external requests and bypassing actual API connections during UI testing.

#20 about 4 min

Organizing code bases for scalability across testing suites

Reviewing patterns for isolating repetitive functionality and building maintainable enterprise layout conventions.

#21 about 2 min

Balancing arrange act and assert bounds across complex tests

Maintaining reasonably scoped actions per logic path minimizing code scroll bloat.

#22 about 3 min

Refactoring unstable html selectors toward human readable properties

Replacing rigid structure locators with a semantic plugin approach ensuring readable test intentions.

Matching moments

2:50 min

Introduction to end-to-end testing with Cypress

Soumaya Erradi · LIVE

3:48 min

Analyzing test automation challenges and the Cypress timeline

Filip Hric · LIVE

2:23 min

Keeping up with Web3 testing tools

Soumaya Erradi · LIVE

3:27 min

Choosing between Puppeteer and Cypress for browser tasks

Miki Lombardi · JS Congress

3:01 min

Exploring the expansion of end-to-end testing utility suites

Daniel Afonso Daniel Afonso · WWC 2025

1:05 min

Cypress internal architecture and test execution constraints

Luca Micieli · WWC 2023

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
over 4 years ago

The Eternal Sunshine of the Zero Build Pipeline

Teini - an extremely small webshop leveraging awesome and free tech thumbnail
40:45
over 4 years ago

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
over 4 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
over 4 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
over 4 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
over 4 years ago

JavaScript the Grumpy Parts

Rob Richardson

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki
Paweł Matynia
Open session

World Congress 2026 North America

Reinventing Testing Practices in the AI Era

Eric Deandrea

Java Champion & Senior Principal Software Engineer, IBM

Eric Deandrea
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

Agents Can't Iterate Against Tests That Lie

Rocky Warren

Senior Staff Software Engineer at Clipboard

Rocky Warren

Related videos

Measure and improve frontend performance by using test automation thumbnail
25:38
WWC 2023 • almost 3 years ago

Measure and improve frontend performance by using test automation

Ramona Schwering

Fighting test flakiness with time machines thumbnail
50:28
LIVE • over 2 years ago

Fighting test flakiness with time machines

Filip Hric

Testing web3 applications thumbnail
53:58
LIVE • over 2 years ago

Testing web3 applications

Soumaya Erradi

How not to test thumbnail
43:07
WWC 2021 • about 5 years ago

How not to test

Golo Roden

Let's get visual - Visual testing in your project thumbnail
44:59
JS Congress • over 4 years ago

Let's get visual - Visual testing in your project

Ramona Schwering

TDD for Vue.js Developers thumbnail
58:26
LIVE • over 3 years ago

TDD for Vue.js Developers

Markus Oberlehner

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.