cypress-excellence

Cypress Testing Excellence

Modern Framework Architecture

• TypeScript Integration: Full TypeScript support with intelligent intellisense
• Component Testing: Isolated component testing alongside E2E scenarios
• Advanced Page Objects: Modular page object patterns with inheritance
• Smart Fixture Management: Dynamic test data with environment-aware loading

Element Selection Revolution

// Modern approach: Reliable, maintainable selectors
cy.get('[data-cy=user-dashboard]')         // Preferred: Test-specific attributes
  .find('[data-cy=profile-section]')       // Hierarchical selection
  .within(() => {                          // Scoped interactions
    cy.get('[data-cy=edit-button]').click()
  })

// Avoid: Brittle selectors that break with UI changes
// cy.get('.btn.btn-primary.user-btn')     // CSS classes
// cy.get('#user-123-edit')                // Dynamic IDs

Advanced Custom Commands

// Example: Intelligent login command with session management
Cypress.Commands.add('loginAs', (userType, options = {}) => {
  const { persist = true, skipWelcome = true } = options
  
  cy.session(userType, () => {
    cy.visit('/login')
    cy.fixture(`users/${userType}`).then(user => {
      cy.get('[data-cy=email-input]').type(user.email)
      cy.get('[data-cy=password-input]').type(user.password)
      cy.get('[data-cy=login-button]').click()
      
      // Wait for successful authentication
      cy.url().should('include', '/dashboard')
      cy.get('[data-cy=user-avatar]').should('be.visible')
    })
  }, {
    validate: () => {
      // Verify session is still valid
      cy.getCookie('auth-token').should('exist')
    },
    cacheAcrossSpecs: persist
  })
  
  if (skipWelcome) {
    cy.dismissWelcomeModal()
  }
})

Network Testing Mastery

// Example: Comprehensive API testing with validation
it('should handle user creation workflow', () => {
  // Set up network intercepts
  cy.intercept('POST', '/api/users', {
    statusCode: 201,
    body: { id: 'user-123', status: 'created' }
  }).as('createUser')
  
  cy.intercept('GET', '/api/users/user-123', {
    fixture: 'user-profile.json'
  }).as('getUserProfile')
  
  // Perform user actions
  cy.visit('/users/new')
  cy.fillUserForm({
    name: 'John Doe',
    email: '[email protected]',
    role: 'admin'
  })
  cy.get('[data-cy=submit-button]').click()
  
  // Validate network interactions
  cy.wait('@createUser').then(interception => {
    expect(interception.request.body).to.deep.include({
      name: 'John Doe',
      email: '[email protected]'
    })
  })
  
  cy.wait('@getUserProfile')
  cy.get('[data-cy=success-message]').should('contain', 'User created successfully')
})