Uploaded March 2022 | Updated September 2026, 2 weeks ago
In this video, add your first real-world, happy path end-to-end test with Cypress to the demo application. After watching this video, you will be able to identify happy paths in your own applications and write Cypress end-to-end tests that mimic the flow of a real user.
You will also:
- use Cypress commands such as `click` and `type` for interacting with forms
- use other kinds of selectors with Cypress’ `get` command
- learn the best kinds of selectors to use with `get` and why CSS classes are not good selector candidates
Chapters
00:00 Intro
00:09 Recap of previous video
00:14 Goals for writing your first Cypress happy path end-to-end test
00:33 Reminder instructions for installing and running demo app
00:47 Reminder to run the previous tasks.spec.js file
00:57 How to identify the first candidate happy path end-to-end test
01:12 Open spec file and start writing new test
01:25 How to find elements by text with the contains command
01:50 Matching actual text in the DOM, not CSS transformed text
02:16 How Cypress matches text with case sensitivity
02:26 Cypress alternatives to match text with case insensitivity
02:36 Use Cypress’ `click` command to click elements
02:40 Cypress commands like `click` are child commands
02:55 Save file to run new test and perform Cypress `click` command
03:03 Order of end-to-end tests in Cypress test results
03:11 Reviewing the result of clicking
03:15 Inspect the app inside Cypress using browser devtools
03:35 Using devtools to identify attributes to use to select an element
03:42 Mention of Cypress’ selector playground for inspecting elements
04:04 Selecting an element by an HTML attribute with Cypress `get` command
04:15 Using Cypress child command `type` to type text like a real user
04:29 Save file to rerun end-to-end test and see text typed into input
04:35 Challenges with database persistence and running end-to-end tests multiple times
05:05 Type unique titles to avoid selecting results from previous test runs
05:38 Save file to rerun end-to-end test and see Cypress type unique title
05:42 Using devtools in Cypress to find a selector for a select element
05:59 Recommendations for kinds of selectors to use
06:11 Issues with using CSS classes for selecting elements
06:23 Accounting for when selecting by text could be error-prone
06:36 Using specific attributes like `id` for selecting elements
06:55 Selecting and clicking the select element by `id`
07:06 Finding and clicking a select option element by its text
07:13 Save file to rerun end-to-end test and see Cypress select an option
07:21 Using devtools to find a selector for a textarea element
07:35 Selecting textarea by HTML attribute and typing a description
07:45 Save file to rerun end-to-end test and see Cypress type a description
07:49 Using devtools to find a selector for another select element
08:05 Finding select element by `id` attribute and clicking
08:11 Finding and clicking a select option element by its text again
08:17 Save file to rerun end-to-end test and see Cypress select an option again
08:23 Selecting a button by text and clicking it
08:33 Reminder about selecting text by case sensitivity
08:42 Save file to rerun end-to-end test and see saved task with success message
08:55 Adding a Cypress assertion to verify a task was created
09:21 Determining a selector to verify the specific task was created
09:30 Using `id` to select the project column that should contain the new task
09:41 Reminder of using unique titles to avoid selecting tasks from previous tests
09:51 Save file to rerun end-to-end test and verify task was created properly
10:04 Recapping what you learned
10:29 Conclusion and next video teaser
Find out more about Test Double at link.testdouble.com/more-info
In this video, add your first real-world, happy path end-to-end test with Cypress to the demo application. After watching this video, you will be able to identify happy paths in your own applications and write Cypress end-to-end tests that mimic the flow of a real user.
You will also:
- use Cypress commands such as `click` and `type` for interacting with forms
- use other kinds of selectors with Cypress’ `get` command
- learn the best kinds of selectors to use with `get` and why CSS classes are not good selector candidates
Chapters
00:00 Intro
00:09 Recap of previous video
00:14 Goals for writing your first Cypress happy path end-to-end test
00:33 Reminder instructions for installing and running demo app
00:47 Reminder to run the previous tasks.spec.js file
00:57 How to identify the first candidate happy path end-to-end test
01:12 Open spec file and start writing new test
01:25 How to find elements by text with the contains command
01:50 Matching actual text in the DOM, not CSS transformed text
02:16 How Cypress matches text with case sensitivity
02:26 Cypress alternatives to match text with case insensitivity
02:36 Use Cypress’ `click` command to click elements
02:40 Cypress commands like `click` are child commands
02:55 Save file to run new test and perform Cypress `click` command
03:03 Order of end-to-end tests in Cypress test results
03:11 Reviewing the result of clicking
03:15 Inspect the app inside Cypress using browser devtools
03:35 Using devtools to identify attributes to use to select an element
03:42 Mention of Cypress’ selector playground for inspecting elements
04:04 Selecting an element by an HTML attribute with Cypress `get` command
04:15 Using Cypress child command `type` to type text like a real user
04:29 Save file to rerun end-to-end test and see text typed into input
04:35 Challenges with database persistence and running end-to-end tests multiple times
05:05 Type unique titles to avoid selecting results from previous test runs
05:38 Save file to rerun end-to-end test and see Cypress type unique title
05:42 Using devtools in Cypress to find a selector for a select element
05:59 Recommendations for kinds of selectors to use
06:11 Issues with using CSS classes for selecting elements
06:23 Accounting for when selecting by text could be error-prone
06:36 Using specific attributes like `id` for selecting elements
06:55 Selecting and clicking the select element by `id`
07:06 Finding and clicking a select option element by its text
07:13 Save file to rerun end-to-end test and see Cypress select an option
07:21 Using devtools to find a selector for a textarea element
07:35 Selecting textarea by HTML attribute and typing a description
07:45 Save file to rerun end-to-end test and see Cypress type a description
07:49 Using devtools to find a selector for another select element
08:05 Finding select element by `id` attribute and clicking
08:11 Finding and clicking a select option element by its text again
08:17 Save file to rerun end-to-end test and see Cypress select an option again
08:23 Selecting a button by text and clicking it
08:33 Reminder about selecting text by case sensitivity
08:42 Save file to rerun end-to-end test and see saved task with success message
08:55 Adding a Cypress assertion to verify a task was created
09:21 Determining a selector to verify the specific task was created
09:30 Using `id` to select the project column that should contain the new task
09:41 Reminder of using unique titles to avoid selecting tasks from previous tests
09:51 Save file to rerun end-to-end test and verify task was created properly
10:04 Recapping what you learned
10:29 Conclusion and next video teaser
Find out more about Test Double at link.testdouble.com/more-info
