Transcript

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:


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

Jeremy Fairbank

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