Skip to content

Cypress

Cypress injects Chaos Maker through custom commands. Register the Node-side task plus the browser-side support module once, then call cy.injectChaos() before cy.visit().

npm install @chaos-maker/core @chaos-maker/cypress

In cypress.config.ts, register the chaos:getUmdSource task so cy.injectChaos() can load the core UMD bundle at runtime:

import { defineConfig } from 'cypress';
import { registerChaosTasks } from '@chaos-maker/cypress/tasks';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    setupNodeEvents(on) {
      registerChaosTasks(on);
    },
  },
});

Then in cypress/support/e2e.ts, register the browser-side commands:

import '@chaos-maker/cypress/support';

describe('orders', () => {
  it('shows error state when the API fails', () => {
    cy.injectChaos({
      seed: 42,
      network: {
        failures: [{ urlPattern: '/api/orders', statusCode: 503, probability: 1 }],
      },
    });

    cy.visit('/orders');
    cy.get('[data-testid="error-state"]').should('be.visible');
    cy.getChaosLog().should((log) => {
      expect(log.some((event) => event.type === 'network:failure' && event.applied)).to.equal(true);
    });
  });
});

Command log

Cypress command log entries include the same event types returned by cy.getChaosLog(), so test output and assertions stay aligned.

Next steps