End-to-end testing with Cypress series: 02 Getting Started

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 ›