End-to-end testing with Cypress series: 08 DRY test setup

In this video, learn how duplicated test setup steps can make Cypress end-to-end test suites unmaintainable. Discover how to use helper functions like beforeEach and how to configure Cypress with the cypress.json file in order to simplify and reduce repeated test setup.

---

Additional resources:

• Configuring Cypress: https://docs.cypress.io/guides/references/configuration

---

00:00

(gentle music)

00:03

Welcome back to Test Double's intro course

00:06

on end-to-end testing with Cypress.

00:08

In the last video, you learned how redundant tests

00:11

can violate the DRY principle and slow down test suites.

00:15

You then discovered how to combine tests

00:17

to reduce duplication and speed up tests.

00:21

In this video, you will explore fixing a couple

00:23

of other issues with duplication.

00:26

You will use beforeEach to simplify repeated setup

00:30

and configure Cypress with cypress.json

00:33

to remove hard coded duplicate values.

00:36

Boot up the back-end server Cypress environment,

00:39

front-end dev server, and Cypress itself.

00:42

Also, ensure you're running

00:44

the tasks.spec.js file in Cypress.

00:48

Analyzing the spec file,

00:49

you may have noticed that each test first calls

00:52

the visit command going to the project page route URL.

00:57

Adding this line to every new test can get repetitive,

01:01

and if you ever change the path for the project page,

01:04

then you will have to update each test.

01:07

You can instead make visiting the project page

01:10

something that automatically runs

01:11

before every test in this file,

01:13

so you don't have to duplicate it in every test.

01:17

At the top of the file,

01:18

right inside the describe anonymous function, add this code.

01:23

This is the beforeEach function in Mocha JS.

01:27

It accepts and runs a function argument

01:29

before every test within the same scope.

01:32

In this case, the scope would be any test

01:35

that's also within the top level describe.

01:38

If a beforeEach is added to a nested describe,

01:42

then it will only run for tests within that nested describe.

01:46

Bringing things back to Yams,

01:48

thanks to this beforeEach,

01:50

Cypress will run the visit command

01:52

before each test inside the describe.

01:55

Cypress will also ensure the visit command completes

01:58

before it attempts to run a subsequent test, try it out.

02:02

Remove the duplicated visit commands

02:05

from each test and save.

02:07

You should see each test still visit the project page first

02:11

and then run through the commands in the test itself.

02:14

If you expand one of the tests on the left hand side

02:17

of the Cypress browser window, you should see a new section

02:21

in the command log for any commands that were run

02:24

inside a beforeEach.

02:26

Inside there, you should see the visit command.

02:30

That's a great, easy win.

02:32

Another potential duplication problem

02:34

is hard coding localhost,

02:36

and the port 3000 in the visit command.

02:40

Imagine you have multiple spec files that all refer

02:43

to that host name and port,

02:45

and then you need to change the port.

02:47

You would have to search for every instance of the URL

02:51

and update each file.

02:53

That could be time consuming.

02:55

Instead, let's configure Cypress to automatically

02:58

know the base URL for the app,

03:00

so tests don't have to be concerned

03:02

with the host name and port.

03:04

I briefly mentioned in an earlier video

03:07

that when you initialize a Cypress test suite

03:09

Cypress creates a cypress.json file

03:12

in the root directory of your app.

03:14

The cypress.json file lets you configure different aspects

03:18

of your test suite.

03:19

As the file extension suggests, the configuration is written

03:23

with JSON.

03:24

Open up that file in your editor.

03:26

You should see an empty object.

03:28

Add a key for baseUrl

03:30

with a value set to the local dev server's base URL.

03:35

If baseUrl is set, Cypress will automatically use

03:39

that as the base URL for any URL paths you provide

03:43

to the visit command.

03:45

Save the file.

03:46

Your Cypress browser window should close

03:48

and the list

03:50

of spec files should refresh in the Cypress app window.

03:53

Configuration changes can impact what files

03:56

need to be run,

03:57

so this is why Cypress basically reboots.

04:01

Switch back to the tasks spec file in your editor.

04:04

Replace the URL passed into the visit command

04:07

with the root path, a single forward slash, and save.

04:11

Back in the Cypress app window,

04:13

open up tasks.spec.js.

04:17

The test should run and pass,

04:18

just as before, visiting the base URL at the root path.

04:23

As you've learned, leveraging the tools available

04:26

with Mocha JS and Cypress lets you easily clean

04:29

up tests and remove duplication,

04:31

which can save you time and maintainability in the future.

04:35

If you'd like to learn more

04:36

of the configuration options available in cypress.json

04:39

visit this URL.

04:42

Let's recap what you learned in this video.

04:46

You used beforeEach to automatically visit a URL

04:49

before each test, and you configured Cypress

04:52

with Cypress JSON to remove hard coding

04:55

the same base URL in every spec file.

04:59

You've now learned many of the ways duplication appears

05:02

in Cypress test suites and how to resolve those issues

05:05

with reusable functions, test consolidation,

05:08

and existing testing framework helpers and configuration.

05:13

You're now ready to DRY up and configure

05:15

your own test suite.

05:17

In the next set of videos, you will learn more

05:19

about the importance of running your test fully

05:22

end to end using a real backend API,

05:25

see an overview of some ways to control the data return

05:28

from your API in a consistent manner,

05:31

and when and how you should compromise

05:33

and use mocks to return data from an API.

05:36

(gentle music)

« Start at the beginning

‹ End-to-end testing with Cypress series: 07 DRY for speed