The Modern Testing Pyramid: Unit Testing with Vitest & End-to-End Testing with Playwright

import { test, expect } from '@playwright/test';

test.describe('E-Commerce Core User Journey', () => {
  test('Customer can add product to cart and proceed to checkout', async ({ page }) => {
    await page.goto('/services');

    // Locate and click on Domain service
    const serviceCard = page.locator('text=Enterprise Optical Fibre Links').first();
    await expect(serviceCard).toBeVisible();

    // Navigate to blog and verify search filter
    await page.goto('/blog');
    const searchInput = page.getByPlaceholder(/search 72 blueprints/i);
    await searchInput.fill('Starlink');

    // Verify search filter reacts instantly
    const resultCard = page.locator('h2', { hasText: 'Starlink' }).first();
    await expect(resultCard).toBeVisible();
  });
});