1.
1
TOPIC
Building reliable
web applications
using Cypress
@mauricedb

2.
Who am I?
@mauricedb
@mauricedb
@mauricedebeijer
Maurice de Beijer

3.
@cloudgen_verona
#CodeGen2021

4.
4
Agenda
• What is Cypress and why should you care?
• End 2 end versus unit testing
• Getting started with Cypress
• Accessible queries using Cypress Testing Library
• Cypress and AJAX requests
• Using visual regression testing
• Cypress testing and a CI server
• Dealing with flaky Tests

5.
5
What is Cypress and why should you care?

6.
6
Cypress.io
• Cypress is a front end testing tool
• Built for the modern web
• Tests are easy to write
• Using simple JavaScript
• Time Travel runner lets you inspect test at each step
• Click on a step to see the state of the browser
• Automatic waiting for elements
• Makes tests more resilient
• Video recording of running test
• Helps debugging failing tests on the CI server

7.
7

8.
8
Cypress.io
• Lets you fake the network
• Or use the real backend as appropriate
• Automatically retry
• Run flaky tests multiple times
• Many standard and 3rd party extensions
• Or write your own in JavaScript
• Can run in Docker containers
• Consistent cross platform behavior
• Runs inside the browser
• Not based on Selenium

9.
9
Running Cypress tests

10.
10
End to End versus Unit testing

11.
11
The traditional testing pyramid
Manual
End to End
Integration testing
Unit testing

12.
12
Both windows are fine
Source

13.
13
A sturdy latch
Source

14.
14
A better testing pyramid for the web
Manual
End to End
Integration testing
Unit testing

15.
15
Getting started with Cypress

16.
16
Getting started with
Cypress
Install Cypress
• Using `npm install cypress –save-dev`
Start Cypress
• Using `npx cypress open`
No drivers or servers required

17.
17
Basic Cypress tests

18.
19
Cypress Testing Library

19.
20
Accessible queries using Cypress Testing Library
The more your tests resemble the way your software
is used, the more confidence they can give you.
(Kent C. Dobbs)
• Test the application like a user would use it
• Avoid implementation details in your tests
• Adds commands to select elements based on:
• Aria roles & labels of elements
• Labels associated with input elements
• Placeholder text
• ARIA = Accessible Rich Internet Applications

20.
21
Find a table cell using it’s ARIA role

21.
22
Finding an input element by using it’s label

22.
23

23.
25
Improve tests with ARIA attributes
• Some elements don’t have a useful label
• For example a movie row
• Add an `aria-label` to query it as needed
• Often better then a selector class, id or data-testid

24.
26
Adding an ARIA label

25.
27
Searching for the ARIA label

26.
29
Cypress and AJAX requests

27.
30
Cypress and AJAX requests
• By default the application will run as normal
• The real backend services will be called
• Using `cy.intercept()` you can change that
• Either call the API and use the same result in your test
• Or intercept and mock the whole request

28.
31
Both have pros & cons
Real AJAX requests
Slower responses
Harder to control data
Often requires a DB reset
Often not an option with
external API’s
Tests the real application
Mock AJAX requests
Faster responses
Easy control over data
Doesn’t test the
backend services

29.
33
Visual Regression Testing

30.
34
Using Visual Regression Testing
Visual regression testing ensures the UI is unchanged
• Testing by selecting/manipulating elements proves the
application works
• But not that a user can actually use it
• You might have a white button on a white background
• The button is there and works
• But the user can’t see it

31.
35
Visual Regression Testing
Pros
• Checks that the
appearance is
unchanged
• Complete check even for
elements you don’t think
about
• Validate elements like
the browsers canvas
Cons
• Hard to do if you don’t
control the data
• Difficult cross platform
because of small
rendering differences (CI)

32.
37
Faking standard functions
• Stubs allow you to modify functions
• Including standard JavaScript functions
• Using the cy.stub()
• Control how time passes
• For setInterval(), setTimeout, Date.now() or new Date()
• Using the cy.clock()

33.
38
Faking Math.random()

34.
40
Continuous Integration

35.
41
Cypress testing and a CI server
• Execute the `cypress run` command
• GitHub actions make testing the application easy
• Use cypress-io/github-action@2
• For CI servers that are not directly supported
• Use the start-server-and-test NPM package

36.
42
GitHub Action to run Cypress tests

37.
43
Visual Regression Testing and the CI Server
• The best way is to use a Docker container
• Standard container images like cypress/included:6.3.0
• Works cross platform and on the CI server
• Tip: Add --env failOnSnapshotDiff=false to cypress open
• Avoids a local run from failing on snapshot differences

38.
44
GitHub Action for Visual Regression Testing

39.
46
Flaky Tests

40.
47
Flaky Tests
• Sometimes tests are not as reliable as you would like
• The same test fails occasionally
• Automatic retries will help pass the test
• Retry a failing test one or more times
• Often a sign that there is an issue
• Can be the test or the application

41.
48
Enable retries

42.
49
Cypress Dashboard - Runs

43.
50
Cypress Dashboard - Flaky Tests

44.
51
Conclusion
• Cypress is a great tool for End to End testing
• More reliable then relying on unit testing and manual testing
• Great infrastructure
• Useful dashboard to record runs
• Many plugins and extensions
• Write tests that use the application as users would
• Cypress Testing Library helps a lot
• Use visual regression tests where appropriate
• But don’t forget to test the application behavior

45.
Thank you
Any questions?
@mauricedb @mauricedb @mauricedebeijer