End-to-End Testing: Complete Guide to Validating Entire Application Workflows

        /\
       /  \      E2E Tests (5-10%)
      /----\     - Slowest execution
     /      \    - Most expensive to maintain
    /--------\   - Hardest to debug
   / Integration\
  /    Tests     \ (20-30%)
 /--------------\
/   Unit Tests   \ (60-70%)
/                \
------------------

// Unit test - PASSES
test('calculateTax correctly computes sales tax', () => {
  expect(calculateTax(100, 0.08)).toBe(8.00);
});
 
// Unit test - PASSES
test('processPayment returns success for valid card', () => {
  const mockGateway = { charge: () => ({ success: true }) };
  const result = processPayment(mockGateway, validCard, 100);
  expect(result.success).toBe(true);
});

// Integration test - PASSES
test('cart service calls payment API with correct format', async () => {
  const cart = await createCart([item1, item2]);
  const paymentRequest = cart.generatePaymentRequest();
 
  expect(paymentRequest.amount).toBe(129.99);
  expect(paymentRequest.currency).toBe('USD');
});

Entry: User lands on homepage
-> Search for product
-> View product details
-> Add product to cart
-> View cart
-> Proceed to checkout
-> Enter shipping information
-> Enter payment information
-> Review order
-> Submit order
-> View confirmation
Exit: User sees order confirmation with tracking number

test('successful product purchase with valid payment', async () => {
  await navigateToProduct();
  await addToCart();
  await proceedToCheckout();
  await enterValidShipping();
  await enterValidPayment();
  await submitOrder();
 
  expect(await getOrderConfirmation()).toContain('Order placed successfully');
});

test('declined payment shows error and allows retry', async () => {
  await navigateToProduct();
  await addToCart();
  await proceedToCheckout();
  await enterValidShipping();
  await enterDeclinedCard();
  await submitOrder();
 
  expect(await getErrorMessage()).toContain('Payment declined');
  expect(await isRetryButtonVisible()).toBe(true);
});

test('user can purchase product', async () => {
  // Create test user
  const user = await createTestUser();
 
  // Login as test user
  await login(user);
 
  // Complete purchase workflow
  await purchaseProduct();
 
  // Verify outcome
  expect(await getOrderHistory()).toHaveLength(1);
 
  // Cleanup
  await deleteTestUser(user);
});

// Test 1 creates user
test('user registration', async () => {
  await registerUser('test@example.com');
});
 
// Test 2 depends on Test 1
test('user can login', async () => {
  await login('test@example.com'); // Fails if Test 1 didn't run
});
 
// Test 3 depends on Test 2
test('user can purchase', async () => {
  // Assumes user is logged in from Test 2
});

const paymentMethods = [
  { type: 'credit_card', testCard: '4111111111111111' },
  { type: 'debit_card', testCard: '5555555555554444' },
  { type: 'paypal', testAccount: 'test@paypal.com' }
];
 
paymentMethods.forEach(method => {
  test(`successful purchase with ${method.type}`, async () => {
    await addProductToCart();
    await proceedToCheckout();
    await selectPaymentMethod(method);
    await submitOrder();
 
    expect(await getOrderStatus()).toBe('confirmed');
  });
});

test('registered user can purchase product with saved payment method')
test('guest checkout creates account and completes order')
test('order confirmation email contains correct order details and tracking link')
test('declined payment displays error message and preserves cart contents')

test('checkout test')
test('test1')
test('purchase flow')
test('payment processing')

test('user can filter products by category and price range', async () => {
  // ARRANGE: Set up test conditions
  await navigateToProductListing();
  await clearAllFilters();
 
  // ACT: Execute the scenario
  await selectCategory('Electronics');
  await setPriceRange(100, 500);
  await clickApplyFilters();
 
  // ASSERT: Verify outcomes
  const products = await getAllDisplayedProducts();
  expect(products.length).toBeGreaterThan(0);
  expect(products.every(p => p.category === 'Electronics')).toBe(true);
  expect(products.every(p => p.price >= 100 && p.price <= 500)).toBe(true);
});

// Verify the business outcome
expect(await getOrderConfirmation()).toContain('Order #');
expect(await getInventoryLevel(productId)).toBe(initialInventory - quantity);
expect(await getConfirmationEmail()).toMatchObject({
  to: customerEmail,
  subject: expect.stringContaining('Order Confirmation')
});

// Too focused on implementation details
expect(await getAPICallCount()).toBe(3);
expect(await getDatabaseQueryCount()).toBe(5);
expect(await getSessionStorage('cartId')).toBeTruthy();

// Page Object
class CheckoutPage {
  constructor(page) {
    this.page = page;
  }
 
  async enterShippingInfo(address) {
    await this.page.fill('#shipping-address', address.street);
    await this.page.fill('#shipping-city', address.city);
    await this.page.fill('#shipping-zip', address.zipCode);
  }
 
  async enterPaymentInfo(card) {
    await this.page.fill('#card-number', card.number);
    await this.page.fill('#card-expiry', card.expiry);
    await this.page.fill('#card-cvv', card.cvv);
  }
 
  async submitOrder() {
    await this.page.click('#submit-order-button');
  }
 
  async getConfirmationNumber() {
    return await this.page.textContent('.confirmation-number');
  }
}
 
// Test using Page Object
test('complete checkout process', async ({ page }) => {
  const checkoutPage = new CheckoutPage(page);
 
  await checkoutPage.enterShippingInfo(testAddress);
  await checkoutPage.enterPaymentInfo(testCard);
  await checkoutPage.submitOrder();
 
  const confirmationNumber = await checkoutPage.getConfirmationNumber();
  expect(confirmationNumber).toMatch(/^[A-Z0-9]{8}$/);
});

await page.click('#submit-button');
await page.waitForTimeout(5000); // Arbitrary wait
const result = await page.textContent('.result');

await page.click('#submit-button');
await page.waitForSelector('.result', { state: 'visible' });
const result = await page.textContent('.result');

test('successful order updates all related systems', async () => {
  const initialInventory = await getProductInventory(productId);
 
  await completeCheckoutFlow({
    product: testProduct,
    quantity: 2,
    customer: testCustomer,
    payment: testCard
  });
 
  // Verify UI confirmation
  expect(await getConfirmationMessage()).toContain('Order placed successfully');
 
  // Verify inventory updated
  expect(await getProductInventory(productId)).toBe(initialInventory - 2);
 
  // Verify order appears in history
  const orders = await getCustomerOrders(testCustomer.id);
  expect(orders[0]).toMatchObject({
    productId: productId,
    quantity: 2,
    status: 'confirmed'
  });
 
  // Verify confirmation email sent
  const emails = await getTestMailbox(testCustomer.email);
  expect(emails[0].subject).toContain('Order Confirmation');
});

test('user can create post with image and receive notifications', async () => {
  // User logs in
  await loginPage.login(testUser.email, testUser.password);
 
  // User navigates to create post
  await homePage.clickCreatePost();
 
  // User enters post content
  await createPostPage.enterText('Check out this photo!');
  await createPostPage.uploadImage('vacation-photo.jpg');
  await createPostPage.selectPrivacy('Friends');
 
  // User publishes post
  await createPostPage.clickPublish();
 
  // Verify post appears in feed
  await expect(homePage.getLatestPost()).toContain('Check out this photo!');
 
  // Verify image displays
  await expect(homePage.getLatestPostImage()).toBeVisible();
 
  // Verify friends receive notification
  await loginAsUser(friendUser);
  await expect(notificationsPage.getNotifications()).toContainText(
    `${testUser.name} shared a new post`
  );
});

test('order creation triggers inventory update and fulfillment', async () => {
  // Call order API directly
  const orderResponse = await apiClient.post('/api/orders', {
    customerId: testCustomer.id,
    items: [{ productId: 'PROD-123', quantity: 2 }],
    shipping: testShipping,
    payment: testPayment
  });
 
  expect(orderResponse.status).toBe(201);
  const orderId = orderResponse.data.orderId;
 
  // Verify inventory was decremented
  const inventory = await apiClient.get(`/api/inventory/PROD-123`);
  expect(inventory.data.available).toBe(initialStock - 2);
 
  // Verify fulfillment record created
  const fulfillment = await apiClient.get(`/api/fulfillment/order/${orderId}`);
  expect(fulfillment.data.status).toBe('pending_shipment');
 
  // Verify warehouse notification sent
  const messages = await messageQueue.getMessages('warehouse-queue');
  expect(messages).toContainEqual(
    expect.objectContaining({ orderId, action: 'ship' })
  );
});

npm init playwright@latest

project/
  ├── tests/
  │   └── example.spec.ts
  ├── playwright.config.ts
  └── package.json

import { test, expect } from '@playwright/test';
 
test('user can complete checkout process', async ({ page }) => {
  // Navigate to product page
  await page.goto('https://example-shop.com/products/laptop');
 
  // Add product to cart
  await page.click('button[data-testid="add-to-cart"]');
 
  // Verify cart badge updates
  await expect(page.locator('.cart-badge')).toHaveText('1');
 
  // Navigate to cart
  await page.click('a[href="/cart"]');
 
  // Verify product in cart
  await expect(page.locator('.cart-item-title')).toHaveText('Premium Laptop');
 
  // Proceed to checkout
  await page.click('button:has-text("Checkout")');
 
  // Fill shipping information
  await page.fill('#shipping-name', 'John Doe');
  await page.fill('#shipping-email', 'john@example.com');
  await page.fill('#shipping-address', '123 Main St');
  await page.fill('#shipping-city', 'San Francisco');
  await page.selectOption('#shipping-state', 'CA');
  await page.fill('#shipping-zip', '94102');
 
  // Continue to payment
  await page.click('button:has-text("Continue to Payment")');
 
  // Fill payment information (using test card)
  await page.fill('#card-number', '4242424242424242');
  await page.fill('#card-expiry', '12/25');
  await page.fill('#card-cvc', '123');
 
  // Submit order
  await page.click('button:has-text("Place Order")');
 
  // Verify order confirmation
  await expect(page.locator('h1')).toHaveText('Order Confirmed');
  await expect(page.locator('.confirmation-message')).toContainText(
    'Thank you for your order'
  );
 
  // Verify order number displayed
  const orderNumber = await page.locator('.order-number').textContent();
  expect(orderNumber).toMatch(/^ORD-\d{8}$/);
});

// pages/checkout.page.ts
import { Page, Locator } from '@playwright/test';
 
export class CheckoutPage {
  readonly page: Page;
  readonly shippingNameInput: Locator;
  readonly shippingEmailInput: Locator;
  readonly shippingAddressInput: Locator;
  readonly shippingCityInput: Locator;
  readonly shippingStateSelect: Locator;
  readonly shippingZipInput: Locator;
  readonly continueButton: Locator;
 
  constructor(page: Page) {
    this.page = page;
    this.shippingNameInput = page.locator('#shipping-name');
    this.shippingEmailInput = page.locator('#shipping-email');
    this.shippingAddressInput = page.locator('#shipping-address');
    this.shippingCityInput = page.locator('#shipping-city');
    this.shippingStateSelect = page.locator('#shipping-state');
    this.shippingZipInput = page.locator('#shipping-zip');
    this.continueButton = page.locator('button:has-text("Continue to Payment")');
  }
 
  async fillShippingInfo(shippingData: {
    name: string;
    email: string;
    address: string;
    city: string;
    state: string;
    zip: string;
  }) {
    await this.shippingNameInput.fill(shippingData.name);
    await this.shippingEmailInput.fill(shippingData.email);
    await this.shippingAddressInput.fill(shippingData.address);
    await this.shippingCityInput.fill(shippingData.city);
    await this.shippingStateSelect.selectOption(shippingData.state);
    await this.shippingZipInput.fill(shippingData.zip);
  }
 
  async continueToPayment() {
    await this.continueButton.click();
  }
}
 
// pages/payment.page.ts
export class PaymentPage {
  readonly page: Page;
  readonly cardNumberInput: Locator;
  readonly cardExpiryInput: Locator;
  readonly cardCvcInput: Locator;
  readonly placeOrderButton: Locator;
 
  constructor(page: Page) {
    this.page = page;
    this.cardNumberInput = page.locator('#card-number');
    this.cardExpiryInput = page.locator('#card-expiry');
    this.cardCvcInput = page.locator('#card-cvc');
    this.placeOrderButton = page.locator('button:has-text("Place Order")');
  }
 
  async fillPaymentInfo(cardData: {
    number: string;
    expiry: string;
    cvc: string;
  }) {
    await this.cardNumberInput.fill(cardData.number);
    await this.cardExpiryInput.fill(cardData.expiry);
    await this.cardCvcInput.fill(cardData.cvc);
  }
 
  async submitOrder() {
    await this.placeOrderButton.click();
  }
}
 
// tests/checkout.spec.ts using Page Objects
import { test, expect } from '@playwright/test';
import { CheckoutPage } from '../pages/checkout.page';
import { PaymentPage } from '../pages/payment.page';
 
test('complete checkout with page objects', async ({ page }) => {
  await page.goto('https://example-shop.com/cart');
 
  const checkoutPage = new CheckoutPage(page);
  await checkoutPage.fillShippingInfo({
    name: 'Jane Smith',
    email: 'jane@example.com',
    address: '456 Oak Ave',
    city: 'Portland',
    state: 'OR',
    zip: '97201'
  });
  await checkoutPage.continueToPayment();
 
  const paymentPage = new PaymentPage(page);
  await paymentPage.fillPaymentInfo({
    number: '4242424242424242',
    expiry: '12/25',
    cvc: '123'
  });
  await paymentPage.submitOrder();
 
  await expect(page.locator('h1')).toHaveText('Order Confirmed');
});

test('handle payment gateway timeout gracefully', async ({ page }) => {
  // Mock payment API to simulate timeout
  await page.route('**/api/payments', async route => {
    // Delay response to simulate timeout
    await page.waitForTimeout(30000);
    await route.fulfill({
      status: 408,
      body: JSON.stringify({ error: 'Request timeout' })
    });
  });
 
  await page.goto('https://example-shop.com/checkout');
  // ... fill checkout form ...
  await page.click('button:has-text("Place Order")');
 
  // Verify timeout error handling
  await expect(page.locator('.error-message')).toContainText(
    'Payment processing timeout'
  );
  await expect(page.locator('button:has-text("Retry Payment")')).toBeVisible();
});
 
test('successful order with mocked payment API', async ({ page }) => {
  // Mock successful payment response
  await page.route('**/api/payments', route => {
    route.fulfill({
      status: 200,
      body: JSON.stringify({
        success: true,
        transactionId: 'TXN-TEST-123456',
        orderId: 'ORD-12345678'
      })
    });
  });
 
  await completeCheckoutFlow(page);
 
  await expect(page.locator('.order-number')).toHaveText('ORD-12345678');
});

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
 
export default defineConfig({
  testDir: './tests',
  timeout: 30000,
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 2 : undefined,
 
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
 
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'mobile-chrome',
      use: { ...devices['Pixel 5'] },
    },
  ],
});

npm install --save-dev cypress
npx cypress open

project/
  ├── cypress/
  │   ├── e2e/
  │   ├── fixtures/
  │   ├── support/
  │   └── downloads/
  ├── cypress.config.js
  └── package.json

// cypress/e2e/checkout.cy.js
describe('E-commerce Checkout Flow', () => {
  beforeEach(() => {
    // Run before each test
    cy.visit('https://example-shop.com');
  });
 
  it('allows user to complete purchase', () => {
    // Search for product
    cy.get('[data-testid="search-input"]').type('laptop{enter}');
 
    // Click first product in results
    cy.get('.product-card').first().click();
 
    // Verify on product page
    cy.url().should('include', '/products/');
    cy.get('h1.product-title').should('be.visible');
 
    // Add to cart
    cy.get('[data-testid="add-to-cart"]').click();
 
    // Verify cart badge updates
    cy.get('.cart-badge').should('have.text', '1');
 
    // Go to cart
    cy.get('[data-testid="cart-link"]').click();
 
    // Verify product in cart
    cy.get('.cart-items').should('have.length', 1);
    cy.get('.cart-item-title').should('contain', 'Laptop');
 
    // Proceed to checkout
    cy.get('[data-testid="checkout-button"]').click();
 
    // Fill shipping form
    cy.get('#shipping-name').type('Alice Johnson');
    cy.get('#shipping-email').type('alice@example.com');
    cy.get('#shipping-address').type('789 Pine St');
    cy.get('#shipping-city').type('Seattle');
    cy.get('#shipping-state').select('WA');
    cy.get('#shipping-zip').type('98101');
 
    // Continue to payment
    cy.get('[data-testid="continue-payment"]').click();
 
    // Fill payment form (Cypress iframe handling for Stripe)
    cy.get('#card-number').type('4242424242424242');
    cy.get('#card-expiry').type('1225');
    cy.get('#card-cvc').type('123');
 
    // Submit order
    cy.get('[data-testid="place-order"]').click();
 
    // Verify order confirmation
    cy.get('h1').should('contain', 'Order Confirmed');
    cy.get('.order-number').should('match', /^ORD-\d{8}$/);
    cy.get('.confirmation-email')
      .should('contain', 'sent to alice@example.com');
  });
});

// cypress/support/commands.js
Cypress.Commands.add('login', (email, password) => {
  cy.visit('/login');
  cy.get('#email').type(email);
  cy.get('#password').type(password);
  cy.get('button[type="submit"]').click();
  cy.url().should('not.include', '/login');
});
 
Cypress.Commands.add('addProductToCart', (productName) => {
  cy.get('[data-testid="search-input"]').type(`${productName}{enter}`);
  cy.contains('.product-card', productName).click();
  cy.get('[data-testid="add-to-cart"]').click();
  cy.get('.cart-badge').should('not.be.empty');
});
 
Cypress.Commands.add('fillShippingInfo', (shippingData) => {
  cy.get('#shipping-name').type(shippingData.name);
  cy.get('#shipping-email').type(shippingData.email);
  cy.get('#shipping-address').type(shippingData.address);
  cy.get('#shipping-city').type(shippingData.city);
  cy.get('#shipping-state').select(shippingData.state);
  cy.get('#shipping-zip').type(shippingData.zip);
});
 
Cypress.Commands.add('fillPaymentInfo', (cardData) => {
  cy.get('#card-number').type(cardData.number);
  cy.get('#card-expiry').type(cardData.expiry);
  cy.get('#card-cvc').type(cardData.cvc);
});
 
// Use custom commands in tests
describe('Registered User Checkout', () => {
  beforeEach(() => {
    cy.login('user@example.com', 'password123');
  });
 
  it('completes checkout with saved address', () => {
    cy.addProductToCart('Premium Headphones');
    cy.visit('/cart');
    cy.get('[data-testid="checkout-button"]').click();
 
    // Use saved shipping address
    cy.get('[data-testid="use-saved-address"]').click();
    cy.get('[data-testid="continue-payment"]').click();
 
    cy.fillPaymentInfo({
      number: '4242424242424242',
      expiry: '1225',
      cvc: '123'
    });
 
    cy.get('[data-testid="place-order"]').click();
    cy.get('h1').should('contain', 'Order Confirmed');
  });
});

// cypress/fixtures/customers.json
{
  "newCustomer": {
    "name": "Bob Wilson",
    "email": "bob@example.com",
    "address": "321 Elm St",
    "city": "Austin",
    "state": "TX",
    "zip": "78701"
  },
  "existingCustomer": {
    "email": "existing@example.com",
    "password": "password123"
  }
}

// cypress/fixtures/products.json
{
  "laptop": {
    "name": "Premium Laptop",
    "sku": "LAPTOP-001",
    "price": 1299.99
  },
  "headphones": {
    "name": "Wireless Headphones",
    "sku": "HEAD-001",
    "price": 199.99
  }
}

// cypress/e2e/checkout-with-fixtures.cy.js
describe('Checkout with Test Data', () => {
  let customer, product;
 
  before(() => {
    cy.fixture('customers').then(data => {
      customer = data.newCustomer;
    });
    cy.fixture('products').then(data => {
      product = data.laptop;
    });
  });
 
  it('new customer completes purchase', () => {
    cy.visit('/');
    cy.addProductToCart(product.name);
    cy.visit('/cart');
    cy.get('[data-testid="checkout-button"]').click();
 
    cy.fillShippingInfo(customer);
    cy.get('[data-testid="continue-payment"]').click();
 
    cy.fillPaymentInfo({
      number: '4242424242424242',
      expiry: '1225',
      cvc: '123'
    });
 
    cy.get('[data-testid="place-order"]').click();
    cy.get('.confirmation-email').should('contain', customer.email);
  });
});

describe('Checkout with Network Control', () => {
  it('handles payment gateway failure gracefully', () => {
    // Stub payment API to return error
    cy.intercept('POST', '/api/payments', {
      statusCode: 400,
      body: {
        error: 'card_declined',
        message: 'Your card was declined'
      }
    }).as('paymentRequest');
 
    cy.visit('/checkout');
    cy.fillShippingInfo({
      name: 'Test User',
      email: 'test@example.com',
      address: '123 Test St',
      city: 'Test City',
      state: 'CA',
      zip: '12345'
    });
 
    cy.get('[data-testid="continue-payment"]').click();
    cy.fillPaymentInfo({
      number: '4000000000000002', // Test declined card
      expiry: '1225',
      cvc: '123'
    });
 
    cy.get('[data-testid="place-order"]').click();
 
    // Verify error handling
    cy.wait('@paymentRequest');
    cy.get('.error-message').should('contain', 'card was declined');
    cy.get('[data-testid="retry-payment"]').should('be.visible');
  });
 
  it('successfully processes order with mocked response', () => {
    // Stub successful payment response
    cy.intercept('POST', '/api/payments', {
      statusCode: 200,
      body: {
        success: true,
        transactionId: 'TXN-12345',
        orderId: 'ORD-98765'
      }
    }).as('paymentRequest');
 
    // Stub order confirmation endpoint
    cy.intercept('GET', '/api/orders/ORD-98765', {
      statusCode: 200,
      body: {
        orderId: 'ORD-98765',
        status: 'confirmed',
        total: 1299.99
      }
    }).as('orderDetails');
 
    cy.visit('/checkout');
    // ... complete checkout form ...
    cy.get('[data-testid="place-order"]').click();
 
    cy.wait('@paymentRequest');
    cy.wait('@orderDetails');
 
    cy.get('.order-number').should('contain', 'ORD-98765');
  });
});

// cypress.config.js
const { defineConfig } = require('cypress');
 
module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    viewportWidth: 1280,
    viewportHeight: 720,
    video: true,
    screenshotOnRunFailure: true,
    defaultCommandTimeout: 10000,
 
    env: {
      apiUrl: 'http://localhost:3001/api',
      testUser: 'test@example.com',
      testPassword: 'password123'
    },
 
    retries: {
      runMode: 2,
      openMode: 0
    },
 
    setupNodeEvents(on, config) {
      // Environment-specific configuration
      if (config.env.environment === 'staging') {
        config.baseUrl = 'https://staging.example-shop.com';
        config.env.apiUrl = 'https://staging.example-shop.com/api';
      } else if (config.env.environment === 'production') {
        config.baseUrl = 'https://example-shop.com';
        config.env.apiUrl = 'https://example-shop.com/api';
      }
 
      return config;
    }
  }
});

// Generate unique email for each test
const uniqueEmail = `test-${Date.now()}@example.com`;
 
// Generate unique username
const uniqueUsername = `user_${Math.random().toString(36).substring(7)}`;
 
// Generate unique order ID
const orderId = `ORD-${Date.now()}-${Math.random().toString(36).substring(7)}`;
 
test('new user registration', async ({ page }) => {
  const testUser = {
    email: `test-${Date.now()}@example.com`,
    username: `user_${Date.now()}`,
    password: 'TestPassword123!'
  };
 
  await registerUser(page, testUser);
  expect(await getWelcomeMessage()).toContain(testUser.username);
});

// test-data-factory.js
class TestDataFactory {
  static createCustomer(overrides = {}) {
    const timestamp = Date.now();
    return {
      email: `customer-${timestamp}@example.com`,
      firstName: 'Test',
      lastName: 'Customer',
      phone: '555-0100',
      address: {
        street: '123 Test Street',
        city: 'Test City',
        state: 'CA',
        zip: '90210'
      },
      ...overrides
    };
  }
 
  static createProduct(overrides = {}) {
    const id = Math.random().toString(36).substring(7);
    return {
      sku: `PROD-${id}`,
      name: 'Test Product',
      price: 99.99,
      inventory: 100,
      category: 'Electronics',
      ...overrides
    };
  }
 
  static createOrder(customer, products, overrides = {}) {
    return {
      orderId: `ORD-${Date.now()}`,
      customerId: customer.id,
      items: products.map(p => ({
        productId: p.id,
        quantity: 1,
        price: p.price
      })),
      total: products.reduce((sum, p) => sum + p.price, 0),
      status: 'pending',
      createdAt: new Date().toISOString(),
      ...overrides
    };
  }
}
 
// Use in tests
test('customer places order', async () => {
  const customer = TestDataFactory.createCustomer({
    email: 'vip-customer@example.com'
  });
 
  const product = TestDataFactory.createProduct({
    name: 'Premium Laptop',
    price: 1299.99
  });
 
  await createCustomerInDatabase(customer);
  await createProductInDatabase(product);
 
  // Execute test with generated data
});

// seed-test-data.js
async function seedTestData() {
  await database.clear();
 
  // Create test customers
  await database.customers.createMany([
    {
      id: 'CUST-TEST-001',
      email: 'test1@example.com',
      firstName: 'Test',
      lastName: 'User One'
    },
    {
      id: 'CUST-TEST-002',
      email: 'test2@example.com',
      firstName: 'Test',
      lastName: 'User Two'
    }
  ]);
 
  // Create test products
  await database.products.createMany([
    {
      id: 'PROD-TEST-001',
      sku: 'LAPTOP-001',
      name: 'Test Laptop',
      price: 999.99,
      inventory: 50
    },
    {
      id: 'PROD-TEST-002',
      sku: 'MOUSE-001',
      name: 'Test Mouse',
      price: 29.99,
      inventory: 100
    }
  ]);
}
 
// Run before test suite
beforeAll(async () => {
  await seedTestData();
});

// Database transaction rollback
test('order creation updates inventory', async () => {
  const transaction = await database.beginTransaction();
 
  try {
    // Create test data within transaction
    const product = await transaction.products.create({
      sku: 'TEST-PROD',
      inventory: 10
    });
 
    // Execute test
    await createOrder({ productId: product.id, quantity: 3 });
 
    // Verify within transaction
    const updated = await transaction.products.findById(product.id);
    expect(updated.inventory).toBe(7);
 
  } finally {
    // Always rollback to clean up
    await transaction.rollback();
  }
});

// Testcontainers for database isolation
import { GenericContainer } from 'testcontainers';
 
beforeAll(async () => {
  // Start fresh database container for tests
  container = await new GenericContainer('postgres:15')
    .withExposedPorts(5432)
    .withEnvironment({
      POSTGRES_USER: 'test',
      POSTGRES_PASSWORD: 'test',
      POSTGRES_DB: 'testdb'
    })
    .start();
 
  // Connect to test database
  database = await connect({
    host: container.getHost(),
    port: container.getMappedPort(5432),
    database: 'testdb'
  });
});
 
afterAll(async () => {
  await container.stop();
});

test('user can delete account', async ({ page }) => {
  // Create test user
  const testUser = await createTestUser({
    email: `delete-test-${Date.now()}@example.com`
  });
 
  try {
    // Execute test
    await loginAsUser(page, testUser);
    await navigateToAccountSettings(page);
    await clickDeleteAccount(page);
    await confirmDeletion(page);
 
    // Verify deletion
    expect(await userExists(testUser.email)).toBe(false);
 
  } finally {
    // Cleanup (in case test fails before deletion)
    await deleteUserIfExists(testUser.email);
  }
});

// test-data-config.js
const testDataByEnvironment = {
  local: {
    apiUrl: 'http://localhost:3001',
    testCards: {
      valid: '4242424242424242',
      declined: '4000000000000002'
    }
  },
  staging: {
    apiUrl: 'https://api-staging.example.com',
    testCards: {
      valid: '4111111111111111',
      declined: '4000000000000341'
    }
  },
  production: {
    apiUrl: 'https://api.example.com',
    testCards: {
      // Production uses sandbox payment gateway
      valid: '4242424242424242',
      declined: '4000000000000002'
    }
  }
};
 
function getTestData() {
  const env = process.env.TEST_ENV || 'local';
  return testDataByEnvironment[env];
}
 
// Use in tests
const testData = getTestData();
await fillPaymentInfo(testData.testCards.valid);

Code Commit
    ↓
Build & Compile
    ↓
Unit Tests (fail fast)
    ↓
Integration Tests
    ↓
E2E Tests - Critical Paths (quality gate)
    ↓
Deploy to Staging
    ↓
E2E Tests - Full Suite (verification)
    ↓
Manual QA / Exploratory Testing
    ↓
Deploy to Production
    ↓
Smoke Tests (health check)

# .github/workflows/e2e-tests.yml
name: E2E Tests
 
on:
  pull_request:
    branches: [main]
  push:
    branches: [main]
 
jobs:
  e2e-tests:
    runs-on: ubuntu-latest
    timeout-minutes: 20
 
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
 
    steps:
      - uses: actions/checkout@v3
 
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'
 
      - name: Install dependencies
        run: npm ci
 
      - name: Install Playwright browsers
        run: npx playwright install --with-deps ${{ matrix.browser }}
 
      - name: Start application
        run: |
          npm run build
          npm run start &
          npx wait-on http://localhost:3000
 
      - name: Run E2E tests
        run: npx playwright test --project=${{ matrix.browser }}
        env:
          BASE_URL: http://localhost:3000
 
      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: playwright-report-${{ matrix.browser }}
          path: playwright-report/
          retention-days: 7
 
      - name: Upload failure screenshots
        if: failure()
        uses: actions/upload-artifact@v3
        with:
          name: screenshots-${{ matrix.browser }}
          path: test-results/

# .gitlab-ci.yml
stages:
  - build
  - test
  - deploy
 
variables:
  PLAYWRIGHT_BROWSERS_PATH: $CI_PROJECT_DIR/.cache/ms-playwright
 
cache:
  key: playwright-cache
  paths:
    - .cache/ms-playwright
    - node_modules
 
e2e_tests:
  stage: test
  image: mcr.microsoft.com/playwright:v1.40.0
 
  services:
    - postgres:15
    - redis:7
 
  variables:
    DATABASE_URL: "postgresql://test:test@postgres:5432/testdb"
    REDIS_URL: "redis://redis:6379"
 
  before_script:
    - npm ci
    - npx playwright install chromium
 
  script:
    - npm run build
    - npm run start &
    - npx wait-on http://localhost:3000
    - npx playwright test --project=chromium
 
  artifacts:
    when: always
    paths:
      - playwright-report/
      - test-results/
    expire_in: 7 days
 
  only:
    - main
    - merge_requests

// Jenkinsfile
pipeline {
  agent {
    docker {
      image 'mcr.microsoft.com/playwright:v1.40.0'
    }
  }
 
  stages {
    stage('Install Dependencies') {
      steps {
        sh 'npm ci'
        sh 'npx playwright install'
      }
    }
 
    stage('Build Application') {
      steps {
        sh 'npm run build'
      }
    }
 
    stage('Start Services') {
      steps {
        sh '''
          docker-compose up -d postgres redis
          npm run start &
          npx wait-on http://localhost:3000
        '''
      }
    }
 
    stage('Run E2E Tests') {
      steps {
        sh 'npx playwright test --reporter=html,junit'
      }
    }
  }
 
  post {
    always {
      junit 'results/junit.xml'
      publishHTML([
        reportDir: 'playwright-report',
        reportFiles: 'index.html',
        reportName: 'Playwright Test Report'
      ])
    }
 
    cleanup {
      sh 'docker-compose down'
    }
  }
}

// playwright.config.ts
export default defineConfig({
  fullyParallel: true,
  workers: process.env.CI ? 4 : 2,
 
  projects: [
    { name: 'chromium', use: devices['Desktop Chrome'] },
    { name: 'firefox', use: devices['Desktop Firefox'] },
    { name: 'webkit', use: devices['Desktop Safari'] },
  ],
});

# GitHub Actions - Test sharding
e2e-tests:
  strategy:
    matrix:
      shard: [1, 2, 3, 4]
  steps:
    - run: npx playwright test --shard=${{ matrix.shard }}/4

# docker-compose.test.yml
version: '3.8'
 
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      NODE_ENV: test
      DATABASE_URL: postgresql://test:test@db:5432/testdb
      REDIS_URL: redis://redis:6379
      STRIPE_API_KEY: ${STRIPE_TEST_KEY}
    depends_on:
      - db
      - redis
 
  db:
    image: postgres:15
    environment:
      POSTGRES_USER: test
      POSTGRES_PASSWORD: test
      POSTGRES_DB: testdb
    ports:
      - "5432:5432"
 
  redis:
    image: redis:7
    ports:
      - "6379:6379"

# Slack notification on test failure
- name: Notify Slack
  if: failure()
  uses: slackapi/slack-github-action@v1
  with:
    payload: |
      {
        "text": "E2E Tests Failed",
        "blocks": [
          {
            "type": "section",
            "text": {
              "type": "mrkdwn",
              "text": "E2E tests failed on branch `${{ github.ref }}`\n<${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}|View Run>"
            }
          }
        ]
      }
  env:
    SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK }}

// Skip tests not affected by changes
test.describe('Checkout Flow', () => {
  test.skip(
    !process.env.CHECKOUT_CHANGED,
    'Skipping - checkout code unchanged'
  );
 
  test('complete purchase', async ({ page }) => {
    // Test implementation
  });
});