This document discusses setting up end-to-end testing with CircleCI and Cypress using CircleCI Orbs. It introduces CircleCI and Cypress, demonstrates how to run Cypress tests on CircleCI, and describes the benefits of using the Cypress Orb which allows running Cypress tests with a single line of configuration. The Cypress Orb handles caching dependencies, running tests in parallel containers, and validating configuration. It provides examples of storing artifacts, coverage reports, and linking CircleCI workflows in the Cypress Dashboard. In conclusion, the Cypress Orb makes it easy to run full browser tests on CI with a minimal configuration.

1. 1
CircleCI + Cypress Orbs:
Set up faster, easier, end-to-end testing with CircleCI and Cypress
Vinny Thanh
Solutions Engineer, CircleCI
Gleb Bahmutov
VP of Engineering, Cypress

2. 2
Agenda
1. Introductions
2. Intro to CircleCI & Orbs
3. Cypress Product Overview
4. Cypress + CircleCI Orbs
5. Q&A

3. Gleb Bahmutov
VP of Engineering, Cypress
Vinny Thanh
Solutions Engineer, CircleCI

4. Our mission is to make it as easy as
possible to go from idea to delivery.

5. Intro to CircleCI
● Founded in 2011, now at 300+ employees across 5 continents
● We help teams build better software, quicker, more reliably
● We’re currently the world’s largest shared CI/CD platform
● Built for the Cloud - 1M+ builds per day run on our platform

6. Where CircleCI sits in the toolchain:
Future support: VCS-Agnosticism
CREATION ORCHESTRATION LOGISTICS
Collaborate Deliver Run
Source Control Build • Test • Deliver Monitor • Operate
CODE COMMIT SHIP TO PRODUCTION
...and more+ various partners & integrations

7. Quick Demo

8. How CircleCI Uses Cypress
...
steps:
- restore_cache:
keys:
- v1-dependency-cypress-{{ checksum "yarn.lock" }}
- v1-dependency-cypress
...
- save_cache:
key: v1-dependency-cypress-{{ checksum "yarn.lock" }}
paths:
- /home/circleci/.cache/Cypress
...
- run: yarn test:e2e:run
- store_artifacts:
path: cypress/videos

9. How CircleCI Uses Cypress (cont’d)

10. How CircleCI Uses Cypress (cont’d)

11. 11

12. 12

13. 13
Existing Integrations
Partner orbs CircleCI orbs
CircleCI Orbs: 58 Partner Orbs: 81 Total Community Orbs: 1600+

14. 14
Blog posts, documentation, and more:
○ Main Orbs Splash Page: circleci.com/orbs
○ Orb Intro Docs: circleci.com/docs/2.0/orb-intro
○ Orb Creation Docs: circleci.com/docs/2.0/creating-orbs
○ Orb Usage Docs: circleci.com/docs/2.0/using-orbs
○ Reusable Config: circleci.com/docs/2.0/reusing-config
○ Orbs Blog Posts: circleci.com/blog/tag/orbs
Or, dive right in:
○ CircleCI Hello World: circleci.com/docs/2.0/hello-world/
○ Config: circleci.com/docs/2.0/configuration-reference/
○ Orb Registry: circleci.com/orbs/registry
○ GitHub Topic: github.com/topics/circleci-orbs (use it!)
Get support:
○ Ask the community: discuss.circleci.com/c/orbs
○ Talk to support: support.circleci.com/hc/requests/new
○ Become a CircleCI Technology Partner:
circleci.com/partners/technology
Links, resources,
examples, etc.

15. 15
Agenda
1. Cypress + CircleCI Orbs
a. Typical tests and running on CI
b. Orb history and features
c. Comparison to other tools
2. Q&A

16. 16
Fast, easy and reliable testing for anything
that runs in a browser.
$ npm install cypress
https://github.com/cypress-io/cypress MIT License

17. 17
Fast, easy and reliable testing
… on CI ?!
$ npx cypress open
$ npx cypress run
What about installing OS and NPM dependencies (and
caching them), and passing options, and running containers in
parallel?!
Loooong list of examples at
https://on.cypress.io/ci
Run Cypress tests on CI
Run Cypress interactively

18. 18
👏 Cypress Orb 👏 Let us, the tool’s authors
write CI configuration for running it.

19. 19
👏 Cypress Orb 👏 Let us, the tool’s authors
write CI configuration for running it.
https://slides.com/bahmutov/circleci-cypress-orb
https://www.youtube.com/watch?time_continue=59&v=J-xbNtKgXfY

20. 20
https://circleci.com/orbs/registry/orb/cypress-io/cypress

21. 21
tip: use CircleCI CLI tool
New features
New executors
Bug fixes

22. 22
Lessons learned: put a useful example first
My opinion: the above config should
cover 90% of use cases
https://github.com/cypress-io/circleci-orb

23. 23
The effective config
$ circleci config process circle.yml
https://github.com/cypress-io/circleci-orb

24. 24
Lessons learned: show common cases
1. Useful example right away
2. Useful example with
parameter
3. A common complex
example (install in 1 job,
then run 3 parallel test
jobs)
https://github.com/cypress-io/circleci-orb

25. 25
Static config check
version: 2.1
orbs:
cypress: cypress-io/cypress@1
workflows:
build:
jobs:
- cypress/run:
recording: true
$ circleci config validate circle.yml
I want to record results to Cypress Dashboard
$ circleci config validate circle.yml
Error: Error calling workflow: 'build'
Error calling job: 'cypress/run'
Unexpected argument(s): recording

26. 26
Look at the Orb’s documentation
Ohhh, it is “record: true”!

27. 27
Cypress Dashboard
# set CYPRESS_RECORD_KEY
# in CircleCI environment
# or security context 👏
- cypress/run:
record: true
https://on.cypress.io/dashboard-introduction

28. 28
Cypress Dashboard: parallelization
- cypress/install:
build: 'npm run build'
- cypress/run:
requires:
- cypress/install
record: true
parallel: true
parallelism: 4
https://on.cypress.io/parallelization

29. 29
Cypress Dashboard: parallelization
- cypress/install:
build: 'npm run build'
- cypress/run:
requires:
- cypress/install
record: true
parallel: true
parallelism: 15
https://on.cypress.io/parallelization

30. 30
Examples, examples,
examples
…, examples, examples,
examples, and a couple
more examples
Lessons learned: write more examples

31. 31
Lessons learned: write more examples
https://github.com/cypress-io/circleci-orb/blob/master/src/orb.yml
All examples are in the source of
the orb
We process each example to
validate its config

32. 32
Lessons learned: write recipes
Longer than examples to
show real-world use
https://github.com/cypress-io/circleci-orb/blob/master/docs/recipes.md

33. 33
Tip: store test artifacts on Circle
version: 2.1
orbs:
cypress: cypress-io/cypress@1
workflows:
build:
jobs:
- cypress/run:
store_artifacts: true
Store Cypress error screenshots and test run videos on CircleCI
https://github.com/cypress-io/circleci-orb/blob/master/docs/examples.md#artifacts

34. 34
Tip: store test artifacts on Circle
version: 2.1
orbs:
cypress: cypress-io/cypress@1
workflows:
build:
jobs:
- cypress/run:
yarn: true
command: yarn test:e2e:run
store_artifacts: true
...
steps:
- restore_cache:
keys:
- v1-dependency-cypress-{{ checksum "yarn.lock" }}
- v1-dependency-cypress
...
- save_cache:
key: v1-dependency-cypress-{{ checksum "yarn.lock" }}
paths:
- /home/circleci/.cache/Cypress
...
- run: yarn test:e2e:run
- store_artifacts:
path: cypress/videos
Remember “How CircleCI Uses
Cypress”?
Equivalent entire config

35. 35
version: 2.1
orbs:
cypress: cypress-io/cypress@1
workflows:
build:
jobs:
- cypress/run:
post-steps:
- store_artifacts:
path: mochawesome-report
Store any artifacts on Circle
Store custom test reports
https://github.com/cypress-io/circleci-orb/blob/master/docs/examples.md#any-artifacts

36. 36
version: 2.1
orbs:
cypress: cypress-io/cypress@1
workflows:
build:
jobs:
- cypress/run:
name: full tests
start: npm start
command: NODE_ENV=test npm run cypress:run
post-steps:
# store the created coverage report folder
# you can click on it in the CircleCI UI
# to see live static HTML site
- store_artifacts:
path: coverage
Store code coverage reports on Circle!
https://github.com/cypress-io/cypress-example-todomvc-redux

37. 37
Store code coverage reports on Circle!
https://circleci.com/gh/cypress-io/cypress-example-todomvc-redux/

38. 38
Store code coverage reports on Circle!
https://circleci.com/gh/cypress-io/cypress-example-todomvc-redux/

39. 39
CircleCI workflow link in Cypress Dashboard

40. 40
https://circleci.com/gh/cypress-io/workflows/cypress/tree/develop
Is built mostly on CircleCI
Windows builds (32 and 64) are moving to Circle too

41. 41
https://circleci.com/gh/cypress-io/workflows/cypress/tree/develop
Is built mostly on CircleCI
Even more - each build kicks off test projects that
report back via status checks

42. 42
Is built mostly on CircleCI
We 💝 Circle workflow 2.1 syntax
Commands ❤
Jobs ❤
Orbs ❤
Executors are ok
https://github.com/cypress-io/cypress-test-node-versions/blob/master/circle.yml

43. 43
Cypress Orb vs Others
Cypress CircleCI Orb Cypress GitHub Action Cypress Netlify Plugin
Caching and test
execution
✅ ✅ ✅
Single line config ✅ − ✅
Total parameters 23 17 4
Control number of
parallel containers
✅ − −
Separate install
and test jobs
✅ ✅ −
Validate config ✅ − −
Repository cypress-io/circleci-orb cypress-io/github-action cypress-io/netlify-plugin-cypress

44. 44
Conclusions
Run full end-to-end tests in a real browser
on your CI with a single line
version: 2.1
orbs:
cypress: cypress-io/cypress@1
workflows:
build:
jobs:
- cypress/run

45. 45
Thank you!
Time for Q&A

46. 46
Contact us with questions!
marketing-tech@circleci.com
https://link.cypress.io/circle
Fill out this survey and get a free Cypress T-Shirt
gleb@cypress.io
@bahmutov