CI Integration & Reporting — Cypress End-to-End Testing | Sabaoon Academy

Cypress runs headlessly in any CI environment. The two most common setups are the official GitHub Action (which handles browser installation automatically) and the Cypress Cloud dashboard for video recording and parallel runs.

GitHub Actions Workflow

# .github/workflows/cypress.yml
name: Cypress Tests

on: [push, pull_request]

jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Cypress run
        uses: cypress-io/github-action@v6
        with:
          build: npm run build
          start: npm start
          wait-on: 'http://localhost:3000'
          wait-on-timeout: 60

The cypress-io/github-action handles Node setup, caching, and Chrome installation automatically.

Mochawesome HTML Reports

npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator

// cypress.config.js
const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    reporter: 'mochawesome',
    reporterOptions: {
      reportDir: 'cypress/reports',
      overwrite: false,
      html: false,
      json: true,
    },
  },
})

After the run, merge JSON fragments and generate HTML:

npx mochawesome-merge "cypress/reports/*.json" > merged.json
npx marge merged.json --reportDir cypress/reports/final

Screenshots and Video

Cypress captures screenshots on failure automatically. Enable video recording in config:

module.exports = defineConfig({
  e2e: {
    video: true,
    screenshotOnRunFailure: true,
    videosFolder: 'cypress/videos',
    screenshotsFolder: 'cypress/screenshots',
  },
})

Upload artifacts in GitHub Actions:

- name: Upload screenshots
  if: failure()
  uses: actions/upload-artifact@v4
  with:
    name: cypress-screenshots
    path: cypress/screenshots

- name: Upload videos
  if: always()
  uses: actions/upload-artifact@v4
  with:
    name: cypress-videos
    path: cypress/videos

CI Pipeline Overview

Cypress CI pipeline

Ctrl+Enter

HTML

CSS

var stages = [
{ label: 'actions/checkout@v4',            time: '3s'  },
{ label: 'cypress-io/github-action setup', time: '15s' },
{ label: 'npm run build',                  time: '42s' },
{ label: 'npm start + wait-on port 3000',  time: '8s'  },
{ label: 'cypress run (headless Chrome)',  time: '65s' },
{ label: 'Upload screenshots & videos',    time: '4s'  },
];

var container = document.getElementById('stages');
stages.forEach(function(s, i) {
var div = document.createElement('div');
div.className = 'stage';
div.id = 'stage' + i;
div.innerHTML =
  '<div class="dot"></div>' +
  '<span class="label">' + s.label + '</span>' +
  '<span class="time" id="t' + i + '">—</span>';
container.appendChild(div);
});

var current = 0;
var timer = null;

document.getElementById('runBtn').onclick = function() {
if (timer) return;
stages.forEach(function(_, i) {
  document.getElementById('stage' + i).className = 'stage';
  document.getElementById('t' + i).textContent = '—';
});
document.getElementById('status').textContent = '';
current = 0;
this.disabled = true;
runStage();
};

function runStage() {
if (current >= stages.length) {
  document.getElementById('status').textContent = '✓ All stages passed — artifacts uploaded';
  console.log('Pipeline completed: ' + stages.length + '/' + stages.length + ' stages passed');
  document.getElementById('runBtn').disabled = false;
  return;
}
var el = document.getElementById('stage' + current);
el.className = 'stage running';
document.getElementById('status').textContent = 'Running: ' + stages[current].label;

var delay = 400 + Math.random() * 600;
timer = setTimeout(function() {
  el.className = 'stage passed';
  document.getElementById('t' + current).textContent = stages[current].time;
  console.log('✓ ' + stages[current].label + ' (' + stages[current].time + ')');
  current++;
  timer = setTimeout(runStage, 200);
}, delay);
}

Preview

Parallel Runs with Cypress Cloud

- name: Cypress run (parallel)
  uses: cypress-io/github-action@v6
  with:
    record: true
    parallel: true
    group: 'CI'
  env:
    CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

Cypress Cloud splits your spec files across machines automatically — a 10-minute suite can finish in under 2 minutes with enough runners.