E2E Testing

Cypress, Playwright, page object models, and visual regression testing.

Overview

E2E testing validates complete user flows across the entire application.

Key Concepts

• Cypress — Developer-friendly E2E testing
• Playwright — Cross-browser testing by Microsoft
• Page Objects — Encapsulate page interactions
• Visual Regression — Compare screenshots for UI changes
• CI Integration — Run tests in CI/CD pipelines

Code Examples

// Cypress example
describe('Login flow', () => {
  beforeEach(() => {
    cy.visit('/login');
  });

  it('should login successfully', () => {
    cy.get('[data-testid="email"]').type('user@example.com');
    cy.get('[data-testid="password"]').type('password123');
    cy.get('[data-testid="submit"]').click();
    
    cy.url().should('include', '/dashboard');
    cy.get('[data-testid="welcome"]').should('contain', 'Welcome');
  });

  it('should show error for invalid credentials', () => {
    cy.get('[data-testid="email"]').type('wrong@example.com');
    cy.get('[data-testid="password"]').type('wrongpass');
    cy.get('[data-testid="submit"]').click();
    
    cy.get('[data-testid="error"]').should('be.visible');
    cy.url().should('include', '/login');
  });
});

// Playwright example
test('checkout flow', async ({ page }) => {
  await page.goto('/products');
  await page.click('[data-testid="add-to-cart"]');
  await page.click('[data-testid="cart-icon"]');
  
  await expect(page.locator('[data-testid="cart-item"]')).toHaveCount(1);
  
  await page.click('[data-testid="checkout"]');
  await page.fill('[name="card"]', '4242424242424242');
  await page.click('[data-testid="pay"]');
  
  await expect(page.locator('[data-testid="success"]')).toBeVisible();
});

// Page Object Model
class LoginPage {
  constructor(page) {
    this.page = page;
    this.emailInput = page.locator('[data-testid="email"]');
    this.passwordInput = page.locator('[data-testid="password"]');
    this.submitButton = page.locator('[data-testid="submit"]');
  }

  async login(email, password) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

Practice

Write E2E tests for a complete shopping cart flow with Playwright.