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)

« Start at the beginning

‹ End-to-end Testing with Cypress Series: 06 DRY (Don't Repeat Yourself)

End-to-end Testing with Cypress Series: 08 DRY Test Setup ›

Jeremy Fairbank

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