End-to-end testing with Cypress series: 08 DRY test setup
- Publish Date
- Authors
- Jeremy Fairbank
- Location
- Maui, HI, USA
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:
- 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)
Jeremy Fairbank
- Status
- Double Agent
- Code Name
- Agent 0029
- Location
- Maui, HI