cypress

Cypress End-to-End Testing

Instructions

1. Assess the testing scope: Determine if it's E2E tests, component tests, or API tests.
2. Follow Cypress conventions:
   • E2E tests: cypress/e2e/*.cy.ts
   • Component tests: *.cy.tsx alongside components
   • Use cy commands for all interactions
3. Provide complete examples: Include selectors, assertions, and custom commands.
4. Guide on best practices: Selectors, waiting, anti-patterns.
5. Cover advanced features: Intercepts, fixtures, custom commands.

Test Structure

describe('User Authentication', () => {
  beforeEach(() => {
    cy.visit('/login');
  });

  it('should login with valid credentials', () => {
    cy.get('[data-testid="email"]').type('[email protected]');
    cy.get('[data-testid="password"]').type('password123');
    cy.get('[data-testid="submit"]').click();

    cy.url().should('include', '/dashboard');
    cy.get('h1').should('contain', 'Welcome');
  });

  it('should show error for invalid credentials', () => {
    cy.get('[data-testid="email"]').type('[email protected]');
    cy.get('[data-testid="password"]').type('wrong');
    cy.get('[data-testid="submit"]').click();

    cy.contains('Invalid credentials').should('be.visible');
  });
});

Selectors (Recommended Order)

// 1. Data attributes (most resilient)
cy.get('[data-testid="submit-button"]');
cy.get('[data-cy="email-input"]');

// 2. Contains text
cy.contains('Submit');
cy.contains('button', 'Submit');  // Element + text

// 3. Role-based (with cypress-testing-library)
cy.findByRole('button', { name: 'Submit' });
cy.findByLabelText('Email');
cy.findByPlaceholderText('Enter email');

// 4. CSS selectors
cy.get('.submit-btn');
cy.get('#email-input');
cy.get('form input[type="email"]');

Common Commands

// Navigation
cy.visit('/page');
cy.go('back');
cy.reload();

// Clicking
cy.get('button').click();
cy.get('button').dblclick();
cy.get('button').rightclick();
cy.get('button').click({ force: true });  // Skip visibility checks

// Typing
cy.get('input').type('Hello');
cy.get('input').type('{enter}');          // Special keys
cy.get('input').type('text{enter}');      // Text + enter
cy.get('input').clear().type('new text');

// Selection
cy.get('select').select('value');
cy.get('select').select(['opt1', 'opt2']); // Multiple

// Checkboxes/Radio
cy.get('input[type="checkbox"]').check();
cy.get('input[type="checkbox"]').uncheck();
cy.get('input[type="radio"]').check('value');

// Focus/Blur
cy.get('input').focus();
cy.get('input').blur();

// Scrolling
cy.scrollTo('bottom');
cy.get('.list').scrollTo(0, 500);

// File upload
cy.get('input[type="file"]').selectFile('path/to/file.pdf');