Set up faster, easier, end-to-end testing with CircleCI and Cypress

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
Agenda
1. Introductions
2. Intro to CircleCI & Orbs
3. Cypress Product Overview
4. Cypress + CircleCI Orbs
5. Q&A

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

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

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

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

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

How CircleCI Uses Cypress (cont’d)

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

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
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
Fast, easy and reliable testing for anything
that runs in a browser.
$ npm install cypress
https://github.com/cypress-io/cypress MIT License

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
👏 Cypress Orb 👏 Let us, the tool’s authors
write CI conﬁguration for running it.

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

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

21
tip: use CircleCI CLI tool
New features
New executors
Bug ﬁxes

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

23
The effective conﬁg
$ circleci conﬁg process circle.yml

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)

25
Static conﬁg check
version: 2.1
orbs:
cypress: cypress-io/cypress@1
workflows:
build:
jobs:
- cypress/run:
recording: true
$ circleci conﬁg 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
Look at the Orb’s documentation
Ohhh, it is “record: true”!

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

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
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
Examples, examples,
examples
…, examples, examples,
examples, and a couple
more examples
Lessons learned: write more examples

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 conﬁg

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
Tip: store test artifacts on Circle
version: 2.1
orbs:
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
Tip: store test artifacts on Circle
version: 2.1
orbs:
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 conﬁg

35
version: 2.1
orbs:
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
version: 2.1
orbs:
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
https://circleci.com/gh/cypress-io/cypress-example-todomvc-redux/

38
https://circleci.com/gh/cypress-io/cypress-example-todomvc-redux/

39
CircleCI workﬂow link in Cypress Dashboard

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
https://circleci.com/gh/cypress-io/workflows/cypress/tree/develop
Even more - each build kicks off test projects that
report back via status checks

42
We 💝 Circle workﬂow 2.1 syntax
Commands ❤
Jobs ❤
Orbs ❤
Executors are ok
https://github.com/cypress-io/cypress-test-node-versions/blob/master/circle.yml

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
Conclusions
Run full end-to-end tests in a real browser
on your CI with a single line
version: 2.1
orbs:
workflows:
build:
jobs:
- cypress/run

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

Set up faster, easier, end-to-end testing with CircleCI and Cypress

More Related Content

What's hot (14)

Similar to Set up faster, easier, end-to-end testing with CircleCI and Cypress (20)

Recently uploaded (20)

Set up faster, easier, end-to-end testing with CircleCI and Cypress