Technical reference

Cypress Cheatsheet

Reliable browser and end-to-end testing

Must Know

javascript

Basic Test

describe('login', () => {
  it('signs in', () => {
    cy.visit('/login');
    cy.get('[data-cy=email]').type('user@example.com');
    cy.get('[data-cy=submit]').click();
    cy.url().should('include', '/dashboard');
  });
});

bash

Run Tests

npx cypress open
npx cypress run
npx cypress run --browser chrome --spec 'cypress/e2e/login.cy.ts'

Important Patterns

javascript

Intercept API

cy.intercept('GET', '/api/users', { fixture: 'users.json' }).as('users');
cy.visit('/users');
cy.wait('@users').its('response.statusCode').should('eq', 200);

html

Stable Selectors

Do not couple tests to styling classes.

<button data-cy="save-profile">Save</button>

cy.get('[data-cy=save-profile]').click();

Useful Recipes

javascript

Custom Command

Use API setup when the login UI is not what you are testing.

Cypress.Commands.add('login', (email, password) => {
  cy.request('POST', '/api/login', { email, password });
});

javascript

Retry Assertions

Use Cypress retries instead of fixed waits.

cy.get('[data-cy=status]').should('be.visible').and('contain', 'Complete');

Pitfalls & Production

javascript

Avoid Fixed Waits

// Avoid
cy.wait(3000);

// Prefer
cy.wait('@request');
cy.get('[data-cy=result]').should('exist');

javascript

Test Isolation

Each test should run independently and deterministically.

beforeEach(() => {
  cy.task('db:reset');
  cy.setCookie('session', 'known-test-session');
});