45Cypress (full module)

45.1 Architecture

Cypress runs inside the browser alongside your app. A Node.js helper handles things the browser can't (filesystem, network proxy). This in-process design = very fast, automatic command queueing, snapshot-able UI state.

Cypress test code  ──runs in same browser as──  Your app
                                  │
                                  └─ Node helper (file IO, plugins)

Consequences (good + bad):

• + Fast: no protocol round trips
• + Time-travel debugger built into the runner UI
• + Automatic retries on each command in the chain
• − One browser tab, one origin per test (cy.origin opens new origin)
• − No support for true multi-tab popups
• − Until v10 no WebKit (now experimental)

45.2 First test

// cypress/e2e/login.cy.js
describe('login', () => {
  beforeEach(() => cy.visit('/login'));

  it('happy path', () => {
    cy.get('[data-cy=email]').type('alice@test.com');
    cy.get('[data-cy=password]').type('p4ssw0rd');
    cy.contains('button', 'Sign in').click();
    cy.url().should('include', '/dashboard');
    cy.contains('Welcome, Alice').should('be.visible');
  });
});

45.3 Command chains + retry-ability

Every Cypress command returns a chain. Assertions retry until they pass or timeout (default 4 s). Same flake-resistance as Playwright web-first assertions.

cy.get('.notification')              // re-finds until ≤4s
  .should('be.visible')               // retries assertion
  .and('contain.text', 'Saved');      // chained assertion

// Aliases (@alias) for reuse
cy.intercept('GET', '/api/users').as('users');
cy.visit('/');
cy.wait('@users').its('response.statusCode').should('eq', 200);

45.4 Network interception

// Stub
cy.intercept('GET', '/api/orders', { fixture: 'orders.json' });

// Stub with inline body + delay
cy.intercept('POST', '/api/checkout', {
  statusCode: 500,
  body: { message: 'down' },
  delay: 1000,
});

// Spy (pass-through, observe only)
cy.intercept('POST', '/api/track').as('track');
cy.contains('Click').click();
cy.wait('@track').its('request.body').should('deep.include', { event: 'cta' });

// Modify request before sending
cy.intercept('POST', '/api/x', (req) => {
  req.headers['x-test'] = '1';
  req.continue();
});

45.5 Fixtures, custom commands, sessions

// cypress/fixtures/user.json
{ "email": "alice@test.com", "password": "p4ssw0rd" }

// In test
cy.fixture('user').then(u => cy.get('[data-cy=email]').type(u.email));

// Custom commands (cypress/support/commands.js)
Cypress.Commands.add('signIn', (email, pw) => {
  cy.session([email], () => {
    cy.visit('/login');
    cy.get('[data-cy=email]').type(email);
    cy.get('[data-cy=password]').type(pw);
    cy.contains('button','Sign in').click();
    cy.url().should('include', '/dashboard');
  });
});
// In test
cy.signIn('alice@test.com', 'p4ssw0rd');

45.6 Multi-origin with cy.origin

// Modern Cypress (12+) — visit a different origin in the same test
cy.visit('/');
cy.contains('Sign in with Google').click();
cy.origin('https://accounts.google.com', () => {
  cy.get('input[type=email]').type(Cypress.env('GOOGLE_EMAIL'));
  cy.contains('Next').click();
});
cy.url().should('include', '/dashboard');

45.7 Cypress vs Playwright — interview comparison