Setup & First Test — Cypress End-to-End Testing | Sabaoon Academy

Cypress is a JavaScript-native E2E testing framework that runs directly in the browser — no WebDriver protocol, no separate driver process. Tests are fast, reliable, and easy to debug.

Installation

npm install --save-dev cypress
# or
yarn add --dev cypress

Add a script to package.json:

{
  "scripts": {
    "cypress:open": "cypress open",
    "cypress:run": "cypress run"
  }
}

Run npx cypress open once to generate the default folder structure.

Folder Structure

cypress/
├── e2e/           ← your test files go here
├── fixtures/      ← static test data (JSON)
├── support/
│   ├── commands.js   ← custom commands
│   └── e2e.js        ← runs before every test file
cypress.config.js

Your First Test

Ctrl+Enter

HTML

CSS

Preview

Run headlessly in CI:

npx cypress run --spec "cypress/e2e/homepage.cy.js"

The Cypress Test Runner

Cypress test runner simulation

Ctrl+Enter

HTML

CSS

* { box-sizing: border-box; }
body { font-family: sans-serif; background: #1b1f2e; color: #e2e8f0; padding: 0; margin: 0; font-size: 0.85rem; }
.runner { display: flex; height: 340px; }
.sidebar { width: 160px; background: #141824; padding: 0.75rem; flex-shrink: 0; }
.sidebar-title { font-size: 0.65rem; font-weight: 700; color: #64748b; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.spec { padding: 0.35rem 0.5rem; cursor: pointer; font-size: 0.75rem; color: #94a3b8; border-left: 2px solid transparent; }
.spec.active { color: #60a5fa; border-left-color: #60a5fa; background: #1e2a3a; }
.main { flex: 1; display: flex; flex-direction: column; padding: 0.75rem; overflow: hidden; }
.toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.badge { padding: 0.15rem 0.5rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em; }
.badge.idle    { background: #334155; color: #94a3b8; }
.badge.running { background: #1e3a5f; color: #60a5fa; }
.badge.passed  { background: #14532d; color: #4ade80; }
.badge.failed  { background: #450a0a; color: #f87171; }
button { padding: 0.3rem 0.875rem; background: #2563eb; color: white; border: none; cursor: pointer; font-size: 0.8rem; }
.commands { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.25rem; }
.cmd { padding: 0.3rem 0.5rem; font-family: monospace; font-size: 0.72rem; background: #1e2235; border-left: 3px solid transparent; }
.cmd.pass { border-color: #4ade80; color: #86efac; }
.cmd.fail { border-color: #f87171; color: #fca5a5; }
.cmd.pending { border-color: #60a5fa; color: #93c5fd; }
.summary { padding: 0.5rem 0.75rem; font-size: 0.78rem; }
.summary.pass { background: #14532d; color: #4ade80; }
.summary.fail { background: #450a0a; color: #f87171; }

var steps = [
{ label: 'cy.visit("https://example.com")',           status: 'pass' },
{ label: 'cy.get("h1")',                              status: 'pass' },
{ label: '.should("contain", "Example Domain")',      status: 'pass' },
{ label: 'cy.visit("https://example.com")',           status: 'pass' },
{ label: 'cy.get("a").first()',                       status: 'pass' },
{ label: '.should("have.attr", "href")',              status: 'pass' },
];

document.getElementById('spec1').classList.add('active');

var runBtn = document.getElementById('runBtn');
var badge  = document.getElementById('statusBadge');
var cmds   = document.getElementById('commands');
var summary = document.getElementById('summary');
var running = false;

runBtn.onclick = function() {
if (running) return;
running = true;
cmds.innerHTML = '';
summary.style.display = 'none';
badge.className = 'badge running';
badge.textContent = 'RUNNING';
runBtn.disabled = true;

var i = 0;
function next() {
  if (i >= steps.length) {
    badge.className = 'badge passed';
    badge.textContent = 'PASSED';
    summary.style.display = 'block';
    summary.className = 'summary pass';
    summary.textContent = '✓ 2 passing (1.2s)';
    console.log('2 passing (1.2s)');
    runBtn.disabled = false;
    running = false;
    return;
  }
  var s = steps[i];
  var div = document.createElement('div');
  div.className = 'cmd pending';
  div.textContent = s.label;
  cmds.appendChild(div);
  cmds.scrollTop = cmds.scrollHeight;

setTimeout(function() {
    div.className = 'cmd ' + s.status;
    console.log((s.status === 'pass' ? '✓' : '✗') + ' ' + s.label);
    i++;
    setTimeout(next, 180);
  }, 280);
}
next();
};

Preview

cypress.config.js

Ctrl+Enter

HTML

CSS

Preview

With baseUrl set, cy.visit('/login') resolves to http://localhost:3000/login.