testing-fundamentals

Cypress Testing Fundamentals

Core Testing Principles

• Reliable Selectors: Use data attributes for stable element identification
• Smart Waits: Leverage Cypress's automatic waiting capabilities
• Test Isolation: Each test should be independent and repeatable
• Clear Assertions: Write descriptive assertions that explain expected behavior

Element Selection Excellence

// ✅ Best Practice - Use data-cy attributes
cy.get('[data-cy=login-button]').click()
cy.get('[data-cy=username-input]').type('[email protected]')
cy.get('[data-cy=password-input]').type('password123')

// ✅ Alternative - Use data-testid
cy.get('[data-testid=submit-form]').click()

// ✅ Accessible selectors
cy.get('[aria-label="Close dialog"]').click()
cy.get('button').contains('Save Changes').click()

// ❌ Avoid - Brittle CSS selectors
cy.get('.btn-primary.large-button:nth-child(2)').click() // Fragile
cy.get('#dynamic-id-12345').type('text') // IDs may change

Smart Waiting Strategies

// ✅ Wait for element to be visible and interactable
cy.get('[data-cy=submit-button]')
  .should('be.visible')
  .and('not.be.disabled')
  .click()

// ✅ Wait for specific content
cy.get('[data-cy=user-name]')
  .should('contain.text', 'John Doe')

// ✅ Wait for element to disappear (loading states)
cy.get('[data-cy=loading-spinner]').should('not.exist')

// ✅ Wait for API calls to complete
cy.intercept('POST', '/api/users').as('createUser')
cy.get('[data-cy=create-user-form]').submit()
cy.wait('@createUser').then((interception) => {
  expect(interception.response.statusCode).to.equal(201)
})

// ✅ Custom wait conditions
cy.get('[data-cy=dynamic-content]').should(($el) => {
  expect($el).to.have.length.at.least(1)
  expect($el.text()).to.match(/Expected Pattern/)
})

Test Structure and Organization

describe('User Authentication Flow', () => {
  beforeEach(() => {
    // Set up consistent test state
    cy.visit('/login')
    cy.clearLocalStorage()
    cy.clearCookies()
  })

  context('Valid Login Scenarios', () => {
    it('should successfully log in with valid credentials', () => {
      // Arrange
      const userData = {
        email: '[email protected]',
        password: 'validPassword123'
      }

      // Act
      cy.get('[data-cy=email-input]').type(userData.email)
      cy.get('[data-cy=password-input]').type(userData.password)
      cy.get('[data-cy=login-button]').click()

      // Assert
      cy.url().should('include', '/dashboard')
      cy.get('[data-cy=welcome-message]')
        .should('be.visible')
        .and('contain.text', 'Welcome back!')
      
      // Verify user data is loaded
      cy.get('[data-cy=user-profile]')
        .should('contain.text', userData.email)
    })

    it('should remember user when "Remember me" is checked', () => {
      cy.get('[data-cy=email-input]').type('[email protected]')
      cy.get('[data-cy=password-input]').type('password123')
      cy.get('[data-cy=remember-me-checkbox]').check()
      cy.get('[data-cy=login-button]').click()

      // Verify login success
      cy.url().should('include', '/dashboard')

      // Simulate browser restart by clearing session
      cy.clearCookies({ domain: null })
      cy.visit('/login')

      // Verify user is still remembered
      cy.get('[data-cy=email-input]')
        .should('have.value', '[email protected]')
    })
  })

  context('Invalid Login Scenarios', () => {
    it('should display error for invalid credentials', () => {
      cy.get('[data-cy=email-input]').type('[email protected]')
      cy.get('[data-cy=password-input]').type('wrongPassword')
      cy.get('[data-cy=login-button]').click()

      // Verify error handling
      cy.get('[data-cy=error-message]')
        .should('be.visible')
        .and('contain.text', 'Invalid credentials')
      
      // Verify user stays on login page
      cy.url().should('include', '/login')
      
      // Verify form state
      cy.get('[data-cy=password-input]').should('have.value', '')
      cy.get('[data-cy=email-input]').should('have.value', '[email protected]')
    })

    it('should validate required fields', () => {
      // Test empty form submission
      cy.get('[data-cy=login-button]').click()

      cy.get('[data-cy=email-error]')
        .should('be.visible')
        .and('contain.text', 'Email is required')

      cy.get('[data-cy=password-error]')
        .should('be.visible')
        .and('contain.text', 'Password is required')
    })
  })
})