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

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 ›