refactor(e2e): rewrite test suite to focus on user journeys

Completely rewrites the E2E test suite from ~2000 lines to ~280 lines,
focusing on critical user journeys rather than edge cases.

Changes:
- Remove heavy mocking infrastructure (setup-api-mocks, api-responses)
- Delete 8 verbose spec files with defensive assertions
- Add 6 focused spec files testing real user journeys
- Add data-testid attributes to ServiceCard and GroupedServiceCard
- Add dotenv loading to playwright config for environment variables
- Skip database-dependent tests gracefully when MONGODB_URI unavailable

Test coverage:
- 10 tests always run (smoke, location pages, navigation, touch targets)
- 10 tests require database (find-help flow, organisation pages, services)

In PRs without secrets: 10 pass, 10 skip with clear message
On main/staging with secrets: all 20 tests pass

Author: james-cross

config/playwright.config.ts

@@ -1,4 +1,12 @@
 import { defineConfig } from '@playwright/test';
+import * as dotenv from 'dotenv';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+
+// Load environment variables from .env file (ESM compatible)
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+dotenv.config({ path: path.resolve(__dirname, '../.env') });
 
 export default defineConfig({
   testDir: '../tests/e2e',

src/components/FindHelp/FindHelpResults.tsx

@@ -376,7 +376,7 @@ export default React.memo(function FindHelpResults({
               </div>
             </div>
           ) : sortedGroups.length === 0 ? (
-            <div className="text-center py-8">
+            <div className="text-center py-8" data-testid="no-results">
               <p className="text-gray-600 mb-2">No services found matching your criteria.</p>
               <p className="text-sm text-gray-500">Try adjusting your filters or search in a different area.</p>
             </div>

src/components/FindHelp/GroupedServiceCard.tsx

@@ -105,6 +105,7 @@ const GroupedServiceCard = React.memo(function GroupedServiceCard({
       }}
       className={`card card-compact ${isLoading ? 'loading-card' : ''}`}
       aria-label={`View details for ${decodedOrgName}`}
+      data-testid="service-card"
     >
       <div className="flex justify-between items-start mb-2">
         <div className="flex items-center gap-2 flex-wrap">

src/components/FindHelp/ServiceCard.tsx

@@ -107,13 +107,14 @@ const ServiceCard = React.memo(function ServiceCard({ service, isOpen, onToggle,
           decodedOrgName,
           categoryName
         );
-        
+
         if (onCardClick) {
           onCardClick();
         }
       }}
       className={`card card-compact ${isLoading ? 'loading-card' : ''}`}
       aria-label={`View details for ${decodedName}`}
+      data-testid="service-card"
     >
       <div className="flex justify-between items-start mb-2">
         <div className="flex items-center gap-2 flex-wrap">

tests/e2e/error-handling.spec.ts

@@ -0,0 +1,84 @@
+import { test, expect, TEST_LOCATION, HAS_DATABASE } from './fixtures/base-test';
+
+test.describe('Find Help Journey', () => {
+  // All tests in this suite require database access
+  test.beforeEach(async () => {
+    test.skip(!HAS_DATABASE, 'Skipping - requires database connection (MONGODB_URI)');
+  });
+
+  test('find services by selecting location', async ({ page }) => {
+    await page.goto('/find-help');
+
+    // Click to show location options
+    await page.getByRole('button', { name: /enter postcode/i }).click();
+
+    // Select Manchester from the location dropdown
+    await page.locator('#location-select').selectOption(TEST_LOCATION.slug);
+
+    // Click find services
+    await page.getByRole('button', { name: /find services in/i }).click();
+
+    // Should show services results page - wait for service cards to appear
+    await expect(page.locator('[data-testid="service-card"]').first()).toBeVisible({ timeout: 30000 });
+  });
+
+  test('filter services by category', async ({ page }) => {
+    // Start with location already set via URL params
+    await page.goto(`/find-help?lat=${TEST_LOCATION.lat}&lng=${TEST_LOCATION.lng}`);
+
+    // Wait for services to load
+    await expect(page.locator('[data-testid="service-card"]').first()).toBeVisible({ timeout: 30000 });
+
+    // Select a category filter
+    const categorySelect = page.locator('#category');
+    await categorySelect.selectOption({ index: 1 });
+
+    // Page should update (either show filtered results or "no results")
+    await expect(
+      page.locator('[data-testid="service-card"], [data-testid="no-results"]').first()
+    ).toBeVisible();
+  });
+
+  test('view service details', async ({ page }) => {
+    await page.goto(`/find-help?lat=${TEST_LOCATION.lat}&lng=${TEST_LOCATION.lng}`);
+
+    // Wait for services
+    await expect(page.locator('[data-testid="service-card"]').first()).toBeVisible();
+
+    // Click first service
+    await page.locator('[data-testid="service-card"]').first().click();
+
+    // Should navigate to organisation page
+    await expect(page).toHaveURL(/\/find-help\/organisation\//);
+    await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
+  });
+
+  test('toggle map view', async ({ page }) => {
+    await page.goto(`/find-help?lat=${TEST_LOCATION.lat}&lng=${TEST_LOCATION.lng}`);
+
+    // Wait for services
+    await expect(page.locator('[data-testid="service-card"]').first()).toBeVisible({ timeout: 30000 });
+
+    // Toggle map on
+    await page.getByRole('button', { name: /show map/i }).click();
+    await expect(page.locator('[data-testid="map-container"]')).toBeVisible();
+
+    // Toggle map off
+    await page.getByRole('button', { name: /hide map/i }).click();
+    await expect(page.locator('[data-testid="map-container"]')).not.toBeVisible();
+  });
+
+  test('use geolocation', async ({ page, context }) => {
+    // Grant geolocation permission
+    await context.grantPermissions(['geolocation']);
+    await context.setGeolocation({ latitude: TEST_LOCATION.lat, longitude: TEST_LOCATION.lng });
+
+    await page.goto('/find-help');
+
+    // Click use location
+    await page.getByRole('button', { name: /use my current location/i }).click();
+
+    // Should show services
+    await expect(page.locator('[data-testid="service-card"]').first()).toBeVisible({ timeout: 30000 });
+  });
+});