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.

Matching moments

Introduction to end-to-end testing with Cypress
00:04 MIN

Introduction to end-to-end testing with Cypress

Testing web3 applications

Audience Q&A on testing strategies
51:22 MIN

Audience Q&A on testing strategies

Yes, You Need to Unit Test your JavaScript. Here's How.

Writing end-to-end tests for injection attacks
08:08 MIN

Writing end-to-end tests for injection attacks

Plants vs. Thieves: Automated Tests in the World of Web Security

Using end-to-end tests for performance monitoring
05:26 MIN

Using end-to-end tests for performance monitoring

Measure and improve frontend performance by using test automation

Q&A on Web3 testing tools and security practices
44:24 MIN

Q&A on Web3 testing tools and security practices

Testing web3 applications

Writing end-to-end tests for injection vulnerabilities
08:08 MIN

Writing end-to-end tests for injection vulnerabilities

Plants vs. Thieves: Automated Tests in the World of Web Security

Automating Google Lighthouse audits with Cypress
12:29 MIN

Automating Google Lighthouse audits with Cypress

Measure and improve frontend performance by using test automation

Solving Web3 testing challenges with Synpress
25:32 MIN

Solving Web3 testing challenges with Synpress

Testing web3 applications

Featured Partners

Related Videos

See all videos
Let's get visual - Visual testing in your project44:59

Let's get visual - Visual testing in your project

Ramona Schwering

Advanced Cypress: custom assertions and tasks08:33

Advanced Cypress: custom assertions and tasks

Luca Micieli

Testing web3 applications53:58

Testing web3 applications

Soumaya Erradi

Let's get visual - Visual testing in your project54:23

Let's get visual - Visual testing in your project

Ramona Schwering

The 2025 State of JavaScript Testing28:33

The 2025 State of JavaScript Testing

Daniel Afonso

Fighting test flakiness with time machines50:28

Fighting test flakiness with time machines

Filip Hric

TDD for Vue.js Developers58:26

TDD for Vue.js Developers

Markus Oberlehner

Measure and improve frontend performance by using test automation25:38

Measure and improve frontend performance by using test automation

Ramona Schwering

Related Articles

View all articles
DC
Daniel Cranney
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering
DC
Daniel Cranney
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
Inside last week’s Dev Digest 195 . 👎 No more external likes 🤗 Needy programs 📉 The worst selling Microsoft product 🟨 JavaScript engines zoo 🍞 No more toasts! 🤖 Messing with bots 👔 Beware of fake job interviews 🗞️ Join over 150,000 developers alread...
Dev Digest 195: End of Likes, JavaScript’s a Zoo, and Messing with Bots!
S
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
DC
Daniel Cranney
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects
JavaScript is the backbone of web development, powering everything from small websites to large-scale enterprise applications. However, as projects grow in complexity, maintaining JavaScript code can become increasingly difficult. This is where TypeS...
Exploring TypeScript: Benefits for Large-Scale JavaScript Projects

From learning to earning

Jobs that call for the skills explored in this talk.