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 · World Congress 2025

1:05 min

Cypress internal architecture and test execution constraints

Luca Micieli · World Congress 2023

More from JavaScript Congress

The Eternal Sunshine of the Zero Build Pipeline thumbnail
50:10
almost 5 years ago

The Eternal Sunshine of the Zero Build Pipeline

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

Teini - an extremely small webshop leveraging awesome and free tech

Christian K

Native Web Apps: Are We There Yet? thumbnail
44:40
almost 5 years ago

Native Web Apps: Are We There Yet?

Maxim Salnikov

Modern Web Development with Nuxt3 thumbnail
41:43
almost 5 years ago

Modern Web Development with Nuxt3

Alexander Lichter

Making neural networks portable with ONNX thumbnail
54:49
almost 5 years ago

Making neural networks portable with ONNX

Ron Dagdag

JavaScript the Grumpy Parts thumbnail
46:08
almost 5 years ago

JavaScript the Grumpy Parts

Rob Richardson

Related videos

Measure and improve frontend performance by using test automation thumbnail
25:38
World Congress 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 • almost 3 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
World Congress 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 • almost 5 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.