List Files | Just Commands | Repo | Logs

← back | Copy

# Isolated Browser Tests

This directory contains Playwright browser tests that run in a completely isolated environment with fresh backend and frontend instances.

## Features

- ✅ **Completely Isolated**: Each test run gets fresh backend server and database
- ✅ **No Manual Setup**: Automatically builds and starts backend + frontend
- ✅ **No Interference**: Won't conflict with your development environment
- ✅ **Self-Contained**: Cleans up all resources after tests complete

## Quick Start

```bash
# Install dependencies
npm install

# Install Playwright browsers
npm run install

# Run all tests
npm test

# Run tests with UI (interactive mode)
npm run test:ui

# Run tests in headed mode (see browser)
npm run test:headed

# Debug tests
npm run test:debug
```

## How It Works

### Environment Setup
1. **Backend**: Builds Go binary and starts PocketBase on random port with fresh database
2. **Frontend**: Builds Vue/Ionic app and serves on random port using Vite preview
3. **Tests**: Run against isolated environment URLs
4. **Cleanup**: Automatically tears down servers and cleans database

### Test Structure
- **Global Setup**: `globalSetup.js` - Starts isolated environment before all tests
- **Global Teardown**: `globalTeardown.js` - Cleans up environment after all tests
- **Test Environment**: `testEnvironment.js` - Backend/frontend server management
- **Tests**: `tests/` directory - Actual Playwright test files

### Configuration
- **Playwright Config**: `playwright.config.js` - Uses dynamic URLs from environment
- **Single Worker**: Tests run sequentially to avoid conflicts
- **Fresh Database**: Each test run gets completely clean state

## Test Files

### `tests/e2e.spec.js`
Basic end-to-end tests covering:
- User registration
- User login
- Organization creation
- Multi-user workflows

## Adding New Tests

1. Create `.spec.js` files in the `tests/` directory
2. Use relative URLs (e.g., `/auth/login`) - base URL is configured automatically
3. Each test gets a fresh database state
4. Use standard Playwright patterns - no special setup required

Example test:
```javascript
import { test, expect } from "@playwright/test";

test("user can do something", async ({ page }) => {
  await page.goto("/auth/register");
  // ... test actions
  await expect(page).toHaveURL(/\/home/);
});
```

## Environment URLs

Tests automatically use dynamically assigned URLs:
- Backend: `process.env.TEST_BACKEND_URL` (e.g., `http://127.0.0.1:45123`)
- Frontend: `process.env.TEST_FRONTEND_URL` (e.g., `http://127.0.0.1:52341`)
- Playwright `baseURL` is set to frontend URL automatically

## Logs

Test run logs are saved to:
- Backend logs: `../../logs/browser-test-backend.log`
- Frontend logs: `../../logs/browser-test-frontend.log`

## Development vs Isolated Testing

**Development Mode** (manual):
- Start your own backend: `cd ../../backend && go run .`
- Start your own frontend: `cd ../../frontend && npm run dev`
- Tests run against `http://localhost:5173`

**Isolated Mode** (default):
- Everything starts automatically on random ports
- No interference with development environment
- Fresh state every time

## Troubleshooting

**Tests failing to start?**
- Check that Go is installed: `go version`
- Check that Node.js/npm is available: `npm --version`
- Ensure no other services using ports
- Check logs in `../../logs/` directory

**Tests timing out?**
- Increase timeout in `playwright.config.js`
- Check server logs for startup issues
- Verify frontend build completes successfully

**Permission errors?**
- Ensure write access to `../../backend/browser_test_data/`
- Check log directory permissions: `../../logs/`

## Architecture

This mirrors the successful isolation pattern from `../api-e2e/` tests:

```
tests/browser/
├── testEnvironment.js    # Server management (backend + frontend)
├── globalSetup.js        # Playwright global setup
├── globalTeardown.js     # Playwright global teardown
├── playwright.config.js  # Dynamic configuration
└── tests/               # Test files
    └── e2e.spec.js      # Example tests
```

The isolated environment ensures tests are:
- **Reproducible**: Same state every time
- **Parallel-safe**: No conflicts between test runs
- **Development-safe**: Won't interfere with your work
- **Self-contained**: Everything needed is managed automatically