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.

Remote

Name of

Name of

Remote
Intermediate
PHP
Java
+1

Matching moments

Introduction to end-to-end testing with Cypress
05:13 MIN

Introduction to end-to-end testing with Cypress

Testing web3 applications

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Audience Q&A on testing strategies
08:48 MIN

Audience Q&A on testing strategies

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

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Lessons on testing, hooks, and framework lock-in
03:03 MIN

Lessons on testing, hooks, and framework lock-in

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Implementing integration and end-to-end tests
04:57 MIN

Implementing integration and end-to-end tests

One-click-to-production: Test and automate your application

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Understanding the Cypress architecture and tasks
01:31 MIN

Understanding the Cypress architecture and tasks

Advanced Cypress: custom assertions and tasks

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Writing end-to-end tests for injection attacks
06:29 MIN

Writing end-to-end tests for injection attacks

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

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Q&A on scaling tests and choosing frameworks
16:15 MIN

Q&A on scaling tests and choosing frameworks

Let's get visual - Visual testing in your project

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Using end-to-end tests for performance monitoring
04:16 MIN

Using end-to-end tests for performance monitoring

Measure and improve frontend performance by using test automation

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.

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

Typescript, React and Atomic Design - a match made in heaven40:05

Typescript, React and Atomic Design - a match made in heaven

Nathalia Rus

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

Let's get visual - Visual testing in your project

Ramona Schwering

Accessibility in React Application30:07

Accessibility in React Application

Julia Undeutsch

One-click-to-production: Test and automate your application31:15

One-click-to-production: Test and automate your application

Bartosz Pietrucha

Yes, You Need to Unit Test your JavaScript. Here's How.1:00:10

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

James Bender

Related Articles

View all articles
SD
Sabina Dapo
New Test
The basic purpose of narrative is to entertain, to gain and hold readers’ interest. However narratives can also be written to teach or inform, to change attitudes / social opinions e.g. soap operas and television dramas that are used to raise topical...
New Test

From learning to earning

Jobs that call for the skills explored in this talk.

Senior QA Engineer

Senior QA Engineer

CheckYeti
Vienna, Austria

Senior
Selenium
JavaScript
Manual Testing
Automated Testing
Frontend Developer

Frontend Developer

JO Media Software Solutions GmBh
Brunn am Gebirge, Austria

Senior
CSS
Angular
JavaScript
TypeScript