End-to-end testing with Cypress series: 07 DRY for speed
- Publish Date
- Authors
- Jeremy Fairbank
- Location
- Maui, HI, USA
Transcript
In this video, learn how creating similar Cypress tests can slow down your end-to-end test suite. Find out how to measure the runtime of your end-to-end test suite, consolidate similar Cypress tests to speed up your test suite, and learn the tradeoffs between combining end-to-end tests and keeping them separate.
- 00:00
- (bright music)
- 00:03
- Welcome back to Test Double's intro course
- 00:06
- on end-to-end testing with Cypress.
- 00:08
- In the previous video,
- 00:10
- you learned about the DRY principle,
- 00:12
- learned how duplication affects tests,
- 00:14
- and reduced some duplication
- 00:16
- in the existing Yams test suite.
- 00:19
- In this video,
- 00:20
- you will learn how to use DRY to speed up a test suite.
- 00:23
- You will:
- 00:24
- add another happy path test,
- 00:26
- measure test run times,
- 00:29
- consolidate appropriate tests
- 00:31
- to speed up your test suite,
- 00:33
- and learn the trade offs
- 00:34
- of combining similar tests or keeping them separate.
- 00:38
- Boot up the back-end server Cypress environment,
- 00:41
- front-end dev server, and Cypress itself.
- 00:45
- Also ensure you're running the tasks.spec.js file
- 00:49
- in Cypress.
- 00:50
- To understand the value in using DRY to speed up tests,
- 00:54
- let's consider another user scenario.
- 00:57
- While using Yams to manage projects,
- 01:00
- a user will want to be able to move a task
- 01:02
- to a new column that is updated status.
- 01:06
- This is a critical feature for Yams,
- 01:08
- so let's add a happy path test for moving a task.
- 01:12
- In order to move a task,
- 01:14
- a user must edit the task to change its status,
- 01:17
- so the flow will look similar to updating a task.
- 01:22
- Copy the previously added update task test
- 01:26
- and change the description.
- 01:31
- Use it.only here to temporarily only run this test.
- 01:36
- Update the second comment to say Move task.
- 01:40
- Remove the newTitle variable.
- 01:44
- Replace changing the title
- 01:46
- with changing the status to PR review.
- 01:49
- Click on the dropdown by its id
- 01:52
- and click on the option by its text, PR review.
- 01:58
- Also replace checking for the titles
- 02:01
- with a more specific assertion
- 02:03
- to verify the task title is in the PR review column.
- 02:08
- Here we use the DOM id to the PR review column
- 02:12
- and then confirm it contains the title.
- 02:15
- Save the file.
- 02:17
- You should see the new test run,
- 02:18
- creating the task, updating its status,
- 02:21
- and thereby moving it to the different column.
- 02:25
- This is another great happy path test,
- 02:27
- but let's consider the cost
- 02:30
- of duplicating the update task test
- 02:33
- to create this new test.
- 02:35
- As I've mentioned in previous videos,
- 02:38
- end-to-end tests are slow.
- 02:40
- Let's see that in action.
- 02:42
- Make sure you're still using it.only for this new test.
- 02:46
- Go to the update task test
- 02:49
- and replace it with it.only and save.
- 02:53
- Both tests should run since they're using it.only.
- 02:58
- Look at this section of the Cypress browser window.
- 03:02
- This is the elapsed time in seconds
- 03:04
- for the tests that were run.
- 03:07
- On average for me,
- 03:08
- each test takes a little over three seconds.
- 03:11
- That run time may not seem like a lot,
- 03:13
- but as you add more tests to the test suite,
- 03:16
- it quickly adds up,
- 03:17
- creating a test suite that may take several minutes
- 03:21
- or longer to run.
- 03:23
- Slow test suites slow down your productivity
- 03:26
- and developer tool chain.
- 03:28
- The longer your tests take to run,
- 03:30
- the slower your feedback will be when test driving code,
- 03:33
- and the longer builds or regression test feedback
- 03:36
- will take in CI.
- 03:38
- Sometimes when writing end-to-end tests,
- 03:41
- you need to strike a balance
- 03:42
- between testing your most critical user scenarios
- 03:46
- while limiting the number of actual tests.
- 03:49
- In the previous examples
- 03:51
- of updating a task and moving a task,
- 03:54
- each test essentially follow the same user flow.
- 03:57
- Click on a card,
- 03:59
- update some fields in the form,
- 04:01
- save, and verify the changes are reflected on the board.
- 04:05
- Given that the flow is similar for each path,
- 04:08
- there's no reason why a user wouldn't update a task
- 04:11
- and move it at the same time too.
- 04:14
- So this would be a great chance to combine both tests
- 04:18
- into one test that does both things
- 04:21
- and shaves off time from the test suite.
- 04:23
- Let's do that.
- 04:25
- Change it.only back to it for the previous two tests.
- 04:30
- Create a new test with it.only
- 04:32
- that covers both actions.
- 04:34
- Copy over the call to visit
- 04:37
- and the task creation block of code
- 04:39
- from one of the previous tests.
- 04:42
- Next copy the update task code
- 04:45
- and make these adjustments.
- 04:48
- Change the comment.
- 04:51
- From the move task test,
- 04:53
- copy over the portion that changes the status
- 04:56
- and place it after typing in the new title.
- 05:00
- Update the verification of the updated title
- 05:04
- to make sure it's in the new column.
- 05:07
- Save the file.
- 05:09
- The new combined tests should run and pass.
- 05:12
- You should see the updated task
- 05:14
- with the new title in the PR review column.
- 05:17
- More importantly,
- 05:19
- even though this test may run a bit slower
- 05:21
- than either one of the previous two tests,
- 05:24
- overall it should be faster
- 05:26
- than the combined run time of those two tests.
- 05:29
- And you're still covering two important user scenarios
- 05:33
- with this single test.
- 05:35
- Great work.
- 05:36
- Remove the two separate tests and replace it.only
- 05:40
- with it for the combined test.
- 05:43
- Let's recap what you accomplished in this video.
- 05:46
- You added another happy path test for moving a task.
- 05:50
- You use Cypress to measure the runtime of tests.
- 05:54
- You consolidated two similar happy path tests
- 05:57
- to speed up your test suite.
- 05:59
- And you learn the trade offs
- 06:01
- of combining similar tests or keeping them separate.
- 06:04
- You're now able to analyze your own test suite
- 06:07
- and discover opportunities to combine tests
- 06:10
- where it makes sense in order to speed up the performance.
- 06:14
- In the next video, you will learn other areas
- 06:16
- where duplication makes tests unmaintainable.
- 06:19
- You will learn to use test helpers,
- 06:21
- such as beforeEach
- 06:23
- and configure Cypress in order to reduce duplication.
- 06:27
- (bright music)
‹ End-to-end Testing with Cypress Series: 06 DRY (Don't Repeat Yourself)
Jeremy Fairbank
- Status
- Double Agent
- Code Name
- Agent 0029
- Location
- Maui, HI