Anna McDougall

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

What if you could debug tests by traveling back in time? See how Cypress makes end-to-end testing for your React app simple and powerful.

Watch Tests Go Brrrr! : Getting Started with Cypress in ReactJS
#1about 4 minutes

Understanding end-to-end testing and the benefits of Cypress

End-to-end testing validates the complete user workflow, and Cypress provides features like time travel and automatic waiting to simplify this process.

#2about 9 minutes

Installing Cypress and structuring tests with Arrange-Act-Assert

Learn how to install Cypress using NPM and structure your tests logically with `describe` and `it` blocks following the Arrange-Act-Assert pattern.

#3about 8 minutes

Writing your first Cypress test for a login form

Follow a live-coding session to write a login test using core Cypress commands like `cy.visit`, `cy.get`, `.type()`, and `.click()`.

#4about 6 minutes

Adding assertions and debugging failing tests in Cypress

Validate test outcomes using assertions like `.should()` and `.within()`, and see how Cypress provides clear error messages for debugging.

#5about 9 minutes

Automating form submission with programmatic login

Bypass the UI login for subsequent tests by using `cy.wrap()` for programmatic authentication before filling out a multi-field form.

#6about 5 minutes

Asserting element states and final text results

Complete the test by asserting that a button becomes enabled after form completion and that the correct result text is displayed.

#7about 10 minutes

Q&A on mocking responses and advanced test patterns

Explore advanced topics like mocking backend APIs with `cy.intercept`, organizing test code, and using different selector strategies.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Articles

View all articles
Daniel Cranney, Chris Heilmann
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTML
Inside last week’s Dev Digest 215 . 🗿 Make AI talk like a caveman 🧠 A guide to context engineering for LLMs 🤖 Simon Willison on agentic engineering 🔐 Axios supply chain attack post mortem 🛡️ Designing AI agents to resist prompt injection 🎨 HTML in c...
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTML
SciChart
The Fastest JavaScript Charts - Built for React and Beyond
For most developers, browser charting works fine — until it doesn’t. Once you push beyond tens of thousands of points, add live streaming, or need advanced interactions, the story changes: frame drops, frozen dashboards, memory issues. That’s where S...
The Fastest JavaScript Charts - Built for React and Beyond

From learning to earning

Jobs that call for the skills explored in this talk.

Frontend Developer

Turboneer LLC
Mount Morris, United States of America

Remote
25-40K
Intermediate
React
Vue.js
Angular
+2