PITCHME.md

☀️ Part 7: Continuous integration

📚 You will learn

• Cypress Docker images for dependencies
• Installing and caching Cypress itself
• How to start server and run Cypress tests
• CircleCI Orb example
• GitHub Actions example
• GitHub reusable workflows

---

Poll: what CI do you use?

• ❤️ GitHub Actions
• 👏 CircleCI
• 👍 Jenkins
• 🎉 Something else

---

Todo if possible

• sign up for free account on CircleCI
• use your fork of https://github.com/bahmutov/testing-app-example

Or make your copy of it using

$ npx degit https://github.com/bahmutov/testing-app-example test-app-my-example
$ cd test-app-my-example
$ npm i
$ npm start
# create GitHub repo and push "test-app-my-example"

---

Open vs Run

• run the specs in the interactive mode with cypress open
• run the specs in the headless mode with cypress run

See https://on.cypress.io/command-line

+++

Set up Cypress

$ npm i -D cypress
$ npx @bahmutov/cly init -b
# add a test or two

---

Set up CircleCI

• sign up for CircleCI
• add your project to CircleCI

+++

Continuous integration documentation

• https://on.cypress.io/continuous-integration
• https://on.cypress.io/ci (alias)

---

On every CI:

• install and cache dependencies
• start todomvc server in the background
• run Cypress using the config file cypress-ci.json

+++

version: 2
jobs:
  build:
    docker:
      - image: cypress/base:12
    working_directory: ~/repo
    steps:
      - checkout
      - restore_cache:
          keys:
            - dependencies-{{ checksum "package.json" }}
            # fallback to using the latest cache if no exact match is found
            - dependencies-
      - run:
          name: Install dependencies
          # https://docs.npmjs.com/cli/ci
          command: npm ci
      - save_cache:
          paths:
            - ~/.npm
            - ~/.cache
          key: dependencies-{{ checksum "package.json" }}
      # continued: start the app and run the tests

+++

# two commands: start server, run tests
- run:
    name: Start TodoMVC server
    command: npm start
    working_directory: todomvc
    background: true
- run:
    name: Run Cypress tests
    command: npx cypress run

+++

Alternative: use start-server-and-test

- run:
  name: Start and test
  command: npm run ci

{
  "scripts": {
    "start": "npm start --prefix todomvc -- --quiet",
    "test": "cypress run --config-file cypress-ci.json",
    "ci": "start-test 3000"
  }
}

---

CircleCI Cypress Orb

A much simpler CI configuration.

version: 2.1
orbs:
  # import Cypress orb by specifying an exact version x.y.z
  # or the latest version 1.x.x using "@1" syntax
  # https://github.com/cypress-io/circleci-orb
  cypress: cypress-io/cypress@1
workflows:
  build:
    jobs:
      # "cypress" is the name of the imported orb
      # "run" is the name of the job defined in Cypress orb
      - cypress/run:
          start: npm start

See https://github.com/cypress-io/circleci-orb

+++

Todo

Look how tests are run in .circleci/config.yml using cypress-io/circleci-orb.

---

Store test artifacts

version: 2.1
orbs:
  # https://github.com/cypress-io/circleci-orb
  cypress: cypress-io/cypress@1
workflows:
  build:
    jobs:
      - cypress/run:
          # store videos and any screenshots after tests
          store_artifacts: true

+++

Record results on Dashboard

version: 2.1
orbs:
  # https://github.com/cypress-io/circleci-orb
  cypress: cypress-io/cypress@1
workflows:
  build:
    jobs:
      # set CYPRESS_RECORD_KEY as CircleCI
      # environment variable
      - cypress/run:
          record: true

https://on.cypress.io/dashboard-introduction

+++

Parallel builds

version: 2.1
orbs:
  # https://github.com/cypress-io/circleci-orb
  cypress: cypress-io/cypress@1
workflows:
  build:
    jobs:
      - cypress/install # single install job
      - cypress/run: # 4 test jobs
          requires:
            - cypress/install
          record: true # record results on Cypress Dashboard
          parallel: true # split all specs across machines
          parallelism: 4 # use 4 CircleCI machines

+++

CircleCI Cypress Orb

Never struggle with CI config 👍

• github.com/cypress-io/circleci-orb
• circleci.com/orbs/registry/orb/cypress-io/cypress
• 📺 CircleCI + Cypress webinar

---

GitHub Actions

• cross-platform CI built on top of Azure CI + MacStadium
• Linux, Windows, and Mac
• Official cypress-io/github-action

+++

jobs:
  cypress-run:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2
      # https://github.com/cypress-io/github-action
      - uses: cypress-io/github-action@v2
        with:
          start: npm start
          wait-on: 'http://localhost:3000'
          config-file: 'cypress-ci.json'

Check .github/workflows/ci.yml

---

GitHub Reusable Workflows

name: ci
on: [push]
jobs:
  test:
    # use the reusable workflow to check out the code, install dependencies
    # and run the Cypress tests
    # https://github.com/bahmutov/cypress-workflows
    uses: bahmutov/cypress-workflows/.github/workflows/standard.yml@v1
    with:
      start: npm start

https://github.com/bahmutov/cypress-workflows

---

Cypress on CI: take away

• use npm ci command instead of npm install
• cache ~/.npm and ~/.cache folders
• use start-server-and-test for simplicity
• store videos and screenshots yourself or use Cypress Dashboard

+++

Todo

Find the CI you use on https://on.cypress.io/continuous-integration and https://github.com/cypress-io/cypress-example-kitchensink#ci-status

---

🏁 Cypress on CI

• presentation CircleCI Orbs vs GitHub Actions vs Netlify Build Plugins CI Setup
• my GitHub Actions blog posts
• my CircleCI blog posts

➡️ Pick the next section