Fixtures & Custom Commands — Cypress End-to-End Testing | Sabaoon Academy

As your test suite grows, repetition accumulates. Cypress gives you two tools to fight it: fixtures for static test data, and custom commands for repeated interaction sequences.

Fixtures

Fixtures are JSON (or other) files stored in cypress/fixtures/. Load them with cy.fixture().

// cypress/fixtures/user.json
{
  "email": "alice@example.com",
  "password": "s3cr3t",
  "name": "Alice"
}

Ctrl+Enter

HTML

CSS

Preview

Custom Commands

Add reusable commands to cypress/support/commands.js:

Ctrl+Enter

HTML

CSS

Preview

Now every test can call cy.login() instead of repeating the login flow:

Ctrl+Enter

HTML

CSS

Preview

cy.session() — Session Caching

cy.session() caches the browser session (cookies, localStorage) after the first login and restores it on subsequent runs. This saves the round-trip to the login page on every test.

First test:  cy.session() → runs login flow → caches session
Second test: cy.session() → restores cache → skips login (fast)

Command Reuse Visualiser

Custom command flow

Ctrl+Enter

HTML

CSS

var before = [
"describe('Dashboard', () => {",
"  it('test 1', () => {",
"    cy.visit('/login')",
"    cy.get('#email').type('alice@example.com')",
"    cy.get('#password').type('s3cr3t')",
"    cy.get('[data-cy=submit]').click()",
"    cy.url().should('include', '/dashboard')",
"    cy.get('[data-cy=username]').should('contain', 'Alice')",
"  })",
"  it('test 2', () => {",
"    cy.visit('/login')",
"    cy.get('#email').type('alice@example.com')",
"    cy.get('#password').type('s3cr3t')",
"    cy.get('[data-cy=submit]').click()",
"    cy.url().should('include', '/dashboard')",
"    cy.get('[data-cy=balance]').should('exist')",
"  })",
"})",
];

var after = [
"describe('Dashboard', () => {",
"  beforeEach(() => {",
"    cy.login('alice@example.com', 's3cr3t')",
"  })",
"",
"  it('test 1', () => {",
"    cy.visit('/dashboard')",
"    cy.get('[data-cy=username]').should('contain', 'Alice')",
"  })",
"  it('test 2', () => {",
"    cy.visit('/dashboard')",
"    cy.get('[data-cy=balance]').should('exist')",
"  })",
"})",
];

function show(lines, metricText) {
document.getElementById('codeBlock').textContent = lines.join('\n');
document.getElementById('metric').textContent = metricText;
console.log('Showing:', metricText);
}

document.getElementById('tabBefore').onclick = function() {
this.classList.add('active');
document.getElementById('tabAfter').classList.remove('active');
show(before, '14 lines per test — login steps duplicated in every test');
};

document.getElementById('tabAfter').onclick = function() {
this.classList.add('active');
document.getElementById('tabBefore').classList.remove('active');
show(after, '2 lines per test — login encapsulated in cy.login() ✓');
};

show(before, '14 lines per test — login steps duplicated in every test');

Preview

TypeScript Declarations

If you use TypeScript, add your commands to the global Cypress interface:

// cypress/support/index.d.ts
declare namespace Cypress {
  interface Chainable {
    login(email: string, password: string): Chainable<void>
    loginAsAdmin(): Chainable<void>
  }
}

Now cy.login() gets autocomplete and type checking in your IDE.