README.md

Cypress Continuous Integration Workshop

How to run Cypress on popular CI services

Code at github.com/bahmutov/cypress-workshop-ci

Jump to: Generic CI, GitHub Action, CircleCI, Netlify Build

---

Gleb Bahmutov, PhD

• Sr Director of Engineering at Mercari US
• Ex-Distinguished Engineer at Cypress
• @bahmutov
• https://glebbahmutov.com
• https://glebbahmutov.com/blog/tags/cypress/
• slides.com/bahmutov/decks/cypress-io
• cypress.tips
• https://www.youtube.com/glebbahmutov
• cypress-workshop-basics, cypress-workshop-socketio-chat

---

What we are going to cover

1. How to correctly run Cypress on any CI
2. How to easily run Cypress on GitHub Actions
3. How to easily run Cypress on CircleCI
4. How to easily run Cypress on Netlify Build

---

Warning: ⚠️ this is not an introduction to Cypress testing workshop, only how to successfully run it in CI. If you need to refresh your Cypress skills, check out bahmutov/cypress-workshop-basics

✅ This workshop includes all the slides and links I am showing, so you can return to it later

---

Logistics

Time 🕰

• total workshop duration ~4 hours over two days
• 5 minute break after each hour

Remote Workshop 🖥

• I will go through all steps
• you try to follow along by doing the same steps

Questions ⁉️

• post to chat, I will try to answer them along the way

---

Requirements

You will need:

• git to clone the repository
• Node v12+ to install and run locally
• 👉 fork the bahmutov/cypress-workshop-ci-example now 👈

(or use degit, see the next slide 👇)

+++

Alternative: use degit

$ npx degit bahmutov/cypress-workshop-ci-example ci-example
$ cd ci-example
$ git init
$ git add .
$ git commit -m "first commit"

Then create a new repo on GitHub and push the code there.

---

Create free accounts

• GitHub https://github.com/
• CircleCI https://circleci.com/
• Netlify https://www.netlify.com/
• Cypress Dashboard https://dashboard.cypress.io/

---

Forked example repo

+++

Clone to local machine

git clone [email protected]:bahmutov/cypress-workshop-ci-example.git ci-example
cd ci-example

---

Inspect the application

$ ls -l
total 384
-rw-r--r--  1 gleb  staff     163 Mar 17 12:47 README.md
drwxr-xr-x  3 gleb  staff      96 Mar 17 12:47 cypress
-rw-r--r--  1 gleb  staff     116 Mar 17 12:47 cypress.json
-rw-r--r--  1 gleb  staff     597 Mar 17 12:47 index.html
-rw-r--r--  1 gleb  staff  177299 Mar 17 12:47 package-lock.json
-rw-r--r--  1 gleb  staff     865 Mar 17 12:47 package.json

It is a static site build with 11ty

+++

Look at the NPM scripts

$ npm run
Lifecycle scripts included in ci-example:
  start
    eleventy --serve

available via `npm run-script`:
  build
    eleventy
  cy:open
    cypress open
  cy:run
    cypress run

+++

Look at cypress.json

$ cat cypress.json
{
  "fixturesFolder": false,
  "supportFile": false,
  "pluginsFile": false,
  "baseUrl": "http://localhost:8080"
}

+++

Look at cypress/integration

$ cat cypress/integration/spec.js

/// <reference types="cypress" />

describe('Example site', () => {
  it('loads', () => {
    cy.visit('/')
    cy.contains('h1', 'cypress-workshop-ci-example').should('be.visible')
  })

  it('navigates to README', () => {
    cy.visit('/')
    cy.contains('a', 'README').click()
    cy.location('pathname').should('equal', '/README/')
  })

  it('goes directly to README', () => {
    cy.visit('/README')
    cy.contains('h2', 'README')
  })

  it('redirects to README/', () => {
    cy.visit('/README/')
    cy.contains('h2', 'README')
  })
})

---

Install dependencies

Use either npm i or npm ci

$ npm i
...
> [email protected] postinstall /Users/gleb/git/ci-example/node_modules/cypress
> node index.js --exec install


Cypress 6.7.1 is installed in /Users/gleb/Library/Caches/Cypress/6.7.1

added 570 packages from 551 contributors and audited 570 packages in 9.072s

+++

💡 Cypress binary

• NPM modules are installed in node_modules
• Cypress Electron binary is installed where?

$ npx cypress info
Displaying Cypress info...
...
Application Data: /Users/gleb/Library/Application Support/cypress/cy/development
Browser Profiles: /Users/gleb/Library/Application Support/cypress/cy/development/browsers
Binary Caches: /Users/gleb/Library/Caches/Cypress

Cypress Version: 6.7.1
System Platform: darwin (19.6.0)
System Memory: 17.2 GB free 270 MB

📚 docs at on.cypress.io/command-line#cypress-info

+++

How do I run the site locally?

• from the terminal npm start
  • the app starts at localhost:8080

$ npm start

> [email protected] start /Users/gleb/git/ci-example
> eleventy --serve

Writing _site/README/index.html from ./README.md.
Writing _site/index.html from ./index.html.
Wrote 2 files in 0.17 seconds (v0.11.1)
Watching…
[Browsersync] Access URLs:

       Local: http://localhost:8080
    External: http://10.0.0.126:8080

          UI: http://localhost:3001
 UI External: http://localhost:3001

[Browsersync] Serving files from: _site

+++

What does the app build?

• output folder _site
• production build npm run build

$ npm run build

> [email protected] build /Users/gleb/git/ci-example
> eleventy

Writing _site/README/index.html from ./README.md.
Writing _site/index.html from ./index.html.
Wrote 2 files in 0.10 seconds (v0.11.1)

+++

Run tests locally

While the application is running in one terminal, from the second terminal exeucute npm run cy:open

---

Goal for Continuous Integration

Build the app and run the tests on CI

• on every commit
• on every pull request

Goal 🥅 is to have the full confidence in the deployed application

Jump to: Generic CI, GitHub Action, CircleCI, Netlify Build