Transcript

In this video, get started with writing end-to-end tests with Cypress. After you follow along with this video, you will be able to create a Cypress end-to-end test suite for your own application and add basic tests to it.

You will learn how to:

  • set up a demo application to test against
  • install Cypress and initialize a new Cypress end-to-end test suite
  • create a new Cypress end-to-end test file
  • use Cypress commands and default assertions to create your first test
  • how to view test run results

Cypress Version Notice

At the time this video was recorded, Cypress was at version 7.5.0. Since then Cypress has released newer versions. Test Double recommends still installing Cypress 7.5.0 as the video directs, but the test suite in this video should still run with newer versions of Cypress. Should you run into any issues installing Cypress, Test Double can only offer support if you install version 7.5.0.

Initializing Test Suite Notice

After running npx cypress open, you may see a message that no version of Cypress is installed in your computer’s apps. If that happens, you can run npx cypress install to install the Cypress app, and then run npx cypress open after that.

00:00
(bouncy music)
00:03
Welcome back to Test Double's intro course
00:06
on End-to-end Testing with Cypress.
00:09
In the last video,
00:10
you learned what end-to-end testing and Cypress are.
00:13
Let's take your knowledge further
00:15
by working hands on with Cypress.
00:18
In this video, you will install Cypress,
00:21
initialize a test suite,
00:23
and write your first test.
00:25
But before you get started,
00:26
you need something to actually test.
00:29
A new startup has been moving a bit too fast,
00:32
building their new Agile project management software,
00:35
yams or yet another management solution.
00:39
After breaking too many things,
00:40
they brought you in to help them get a better handle
00:43
on their application through end-to-end testing.
00:46
They've given you complete control
00:48
over what testing should look like
00:50
and eagerly await your recommendations.
00:53
Let's get started.
00:55
You'll first need a copy of the app to run on your machine.
00:58
The app source code is hosted on GitHub,
01:01
so, first, head over to this URL.
01:04
Later in this course, you will learn
01:05
how to set up continuous integration to run Cypress tests.
01:10
So instead of cloning this repo,
01:12
you'll want to fork it instead.
01:15
Click on the Fork link,
01:17
then select your GitHub user
01:19
from your available user/organizations.
01:24
You should now be on your forked copy of the repo.
01:27
Now you can clone your repo
01:28
with whatever GitHub workflow you're used to.
01:31
I like to copy the SSH URL and clone from my local terminal.
01:41
Once you have a local copy of the app,
01:43
follow the instructions in the README
01:45
to install dependencies and run the application.
01:49
We won't cover installing the dependencies in this video,
01:52
so feel free to pause while you do that.
01:55
Resume the video once you have the backend
01:57
and frontend running.
01:59
If you have any issues installing dependencies
02:01
or running the app, please open an issue
02:04
on Test Double's original copy of the repo.
02:07
Now that you have the backend and frontend running,
02:10
you should see something like this:
02:12
a project board with five columns
02:14
and two example cards in the Backlog
02:17
and In Progress columns.
02:19
You can add new tasks by clicking on Add Task
02:22
in one of the columns.
02:24
You should see this form with the status pre-filled.
02:28
You can give it a title, description, estimate,
02:31
and any blockers.
02:34
After clicking Save,
02:35
the new card should appear on the board.
02:38
You can also click on the card to edit it
02:41
and move it to a different column.
02:50
Now that you've verified the app runs,
02:52
you can start testing with Cypress.
02:55
Stop the backend server in the yams_api folder.
02:58
Then from the yams_api folder,
03:01
start up the server in a more appropriate environment
03:03
for testing with one of the options mentioned
03:06
in the project README,
03:07
depending on how you set up the backend.
03:10
Here, I'm using Docker.
03:12
Once the server boots up, refresh the browser
03:15
to make sure you see an empty project board.
03:19
Next, you need to install Cypress.
03:21
Technically, Cypress has already been added to the app
03:24
for you to ensure we're working with the same version,
03:27
but let's install it anyway
03:29
so you get the full picture
03:30
of setting up a Cypress test suite.
03:33
Change to the frontend yams folder and run this command.
03:38
You install it with npm as a dev dependency
03:41
since it isn't needed in the production build.
03:44
You also specify the version with the @ symbol
03:48
to again maintain version consistency.
03:51
After installation finishes,
03:53
run this command to initialize the Cypress test suite.
03:57
npx is a utility installed with npm
03:59
to simplify running any node package binaries.
04:03
It favors locally installed ones in node modules first.
04:07
So this will call the Cypress binary
04:09
in your node_modules/.bin folder,
04:12
passing in the command open.
04:15
You should see a message like this.
04:18
Eventually the Cypress app should open up.
04:21
You should see a message
04:22
that Cypress has created a folder structure for you
04:25
with example test files also known as spec files.
04:29
Dismiss the modal
04:30
and click on one of the example spec files.
04:34
A new browser window should open.
04:36
You should see a list of test descriptions on the left
04:39
and a page from example.cypress.io on the right.
04:43
Cypress will run each spec on the left one after the other.
04:48
You should see it interact
04:49
with the page on the right very rapidly.
04:52
Once it completes, you should see a check mark
04:54
next to each test description indicating the test passed.
04:58
Now that you've verified you can run Cypress,
05:01
it's time to write your first real test.
05:04
Close the browser window
05:05
or click on Stop on the Cypress window
05:08
to end running the spec file.
05:10
Leave the Cypress window open
05:12
and transition back to your terminal.
05:15
In a new terminal window, inspect your yams folder.
05:19
You should see some new things added by Cypress.
05:22
You should have a Cypress folder
05:24
and a cypress.json file.
05:26
Feel free to inspect the Cypress folder.
05:29
It contains multiple subfolders
05:31
for holding your spec files and other supporting files.
05:34
Specs are contained within the integration subfolder.
05:38
Ignore the cypress.json file for now.
05:40
We'll look at it in a later video.
05:43
Inside the Integration subfolder,
05:45
create a new file called tasks.spec.js
05:49
and open it in your preferred text editor.
05:53
Cypress uses Mocha.js' BDD syntax for writing spec files.
05:58
Add a describe call first,
06:00
passing in a top-level string description of tasks
06:03
and an anonymous function.
06:05
Notice that I'm not using an arrow function here.
06:10
We'll dive more into why in a later video.
06:12
Inside the anonymous function, add a call to it,
06:15
passing in a string test description
06:18
and another anonymous function.
06:20
Inside the nested function, add this code and save.
06:26
Every Cypress spec file has access
06:28
to a global C-Y or cy object.
06:32
This cy object exposes a ton of methods known as commands
06:36
that instruct Cypress to do something.
06:39
The visit command tells Cypress
06:41
to visit a URL in the browser.
06:43
In this case, you tell Cypress
06:45
to visit the locally running dev server for yams.
06:49
Go back to the Cypress window and scroll to the bottom.
06:52
Cypress uses a file watcher to check for any new spec files
06:56
and adds them to the list.
06:58
You should see your task.spec.js file in the list.
07:02
Click on it.
07:04
The Cypress browser window should open
07:06
and run the single test.
07:09
You should see the yams board
07:10
and the webpage on the right.
07:12
Visiting the page you want to test is important,
07:15
but you need to actually verify
07:17
the page has what you expect on it.
07:20
Let's verify that the Backlog status column exists.
07:24
Add this code under the visit command.
07:28
These are selector commands.
07:30
The get command accepts a DOM selector
07:32
using jQuery-like syntax.
07:35
The contains command accepts a string
07:37
to search for HTML elements that contain the provided text.
07:42
Notice that you you can change some Cypress commands.
07:45
Here you call contains after get.
07:48
Essentially you're telling Cypress to look for an h2 tag
07:52
that contains the text backlog.
07:55
Save and go back to the Cypress browser window.
07:59
The test should automatically rerun after saving and pass.
08:03
On the left, you should see a log
08:04
of the different commands that were run.
08:07
There is an entry for the visit command
08:09
and another entry and sub-entry
08:11
for the get and contains commands.
08:14
If you're familiar with other testing frameworks,
08:16
you typically use whatever helpers it provides
08:19
to make explicit assertions about the behavior
08:22
of whatever is under test.
08:24
Cypress has explicit assertions,
08:26
but here you use what are known as default assertions.
08:30
Default assertions are implicit.
08:33
The get and contains commands both find elements in the DOM
08:37
and blow up if they fail to find those elements
08:39
in a sufficient amount of time,
08:42
so these commands effectively function as assertions too.
08:46
Your test will fail
08:47
if they cannot find what you're looking for.
08:50
Try that out by changing the text backlog in contains
08:54
to something else like not found and then saving.
08:59
The test should rerun and eventually fail
09:01
because it cannot find the text not found.
09:05
Change the text back to backlog
09:07
and then let's verify the other status columns exist.
09:12
Copy the chained get and contains commands
09:15
and replace the expected text
09:17
with that of the other column headers.
09:19
Save the file, and you should see the test run again
09:22
and see more commands in the log,
09:25
checking for the other headers.
09:27
Great work, you just wrote your first Cypress test.
09:31
Let's recap what you learned in this video.
09:34
You used npm to install Cypress,
09:37
you used npx and the Cypress binary to start the Cypress app
09:42
and initialize your first Cypress test suite,
09:45
you used JavaScript and Mocha.js' BDD syntax
09:48
to write your first test,
09:50
and you also learned about Cypress commands
09:53
and default assertions.
09:55
You're now ready to create a Cypress test suite
09:58
for your own projects, but we won't stop there.
10:01
In the next video,
10:02
you will learn about testing real-world user scenarios.
10:06
(bouncy music)

« Start at the beginning

‹ End-to-end Testing with Cypress Series: 01 Welcome

End-to-end Testing with Cypress Series: 03 Real-world Tests ›

Jeremy Fairbank

Hash An icon of a hash sign Code Name
Agent 0029
Location An icon of a map marker Location
Maui, HI