Skip to main content

CircleCI

info

What you'll learn

  • How to run Cypress tests with CircleCI as part of CI/CD pipeline
  • How to parallelize Cypress test runs within CircleCI

Basic Setup

The Cypress CircleCI Orb is a piece of configuration set in your .circleci/config.yml file to correctly install, cache and run Cypress with very little effort.

Full documentation can be found at the cypress-io/circleci-orb repo. For the Orb Quick Start Guide and usage cases, view the CircleCI Cypress orb documentation.

A typical project can have:

version: 2.1
orbs:
# "cypress-io/cypress@1" installs the latest published
# version "1.x.y" of the orb. We recommend you then use
# the strict explicit version "cypress-io/cypress@1.x.y"
# to lock the version and prevent unexpected CI changes
cypress: cypress-io/cypress@1
workflows:
build:
jobs:
- cypress/run # "run" job comes from "cypress" orb

Parallelization

A more complex project that needs to install dependencies, build an application and run tests across 4 CI machines in parallel may have:

version: 2.1
orbs:
cypress: cypress-io/cypress@1
workflows:
build:
jobs:
- cypress/install:
build: 'npm run build' # run a custom app build step
- cypress/run:
requires:
- cypress/install
record: true # record results on Cypress Dashboard
parallel: true # split all specs across machines
parallelism: 4 # use 4 CircleCI machines to finish quickly
group: 'all tests' # name this group "all tests" on the dashboard
start: 'npm start' # start server before running tests

In all cases, you are using run and install job definitions that Cypress provides inside the orb. Using the orb brings simplicity and static checks of parameters to CircleCI configuration.

You can find multiple examples at our orb examples page and in the cypress-example-circleci-orb project.

info
Real World Example
New

The Cypress Real World App (RWA) uses the Circle CI Cypress Orb, Codecov Orb, and Windows Orb to test over 300 test cases in parallel across 25 machines, multiple browsers, multiple device sizes, and multiple operating systems with full code-coverage reporting and Cypress Dashboard recording.

Check out the full RWA Circle CI configuration.

Additional Examples

Example .circleci/config.yml v2 config file

version: 2
jobs:
build:
docker:
- image: cypress/base:14.16.0
environment:
## this enables colors in the output
TERM: xterm
working_directory: ~/app
steps:
- checkout
- restore_cache:
keys:
- v1-deps-{{ .Branch }}-{{ checksum "package.json" }}
- v1-deps-{{ .Branch }}
- v1-deps
- run:
name: Install Dependencies
command: npm ci
- save_cache:
key: v1-deps-{{ .Branch }}-{{ checksum "package.json" }}
# cache NPM modules and the folder with the Cypress binary
paths:
- ~/.npm
- ~/.cache
- run: $(npm bin)/cypress run --record --key <record_key>

Example .circleci/config.yml v2 config file with yarn

version: 2
jobs:
build:
docker:
- image: cypress/base:14.16.0
environment:
## this enables colors in the output
TERM: xterm
working_directory: ~/app
steps:
- checkout
- restore_cache:
keys:
- v1-deps-{{ .Branch }}-{{ checksum "package.json" }}
- v1-deps-{{ .Branch }}
- v1-deps
- run:
name: Install Dependencies
command: yarn install --frozen-lockfile
- save_cache:
key: v1-deps-{{ .Branch }}-{{ checksum "package.json" }}
paths:
- ~/.cache ## cache both yarn and Cypress!
- run: $(yarn bin)/cypress run --record --key <record_key>

Find the complete CircleCI v2 example with caching and artifact upload in the cypress-example-docker-circle repo.

RAM Disk

You can speed up Cypress test jobs by using CircleCI RAM disk, read Start CircleCI Machines Faster by Using RAM Disk blog post.