Rewrite E2E test suite for Vue SPA (Streamlit selectors no longer valid) #124

New issue

Open

opened 2026-06-14 14:13:37 -07:00 by pyr0ball · 0 comments

pyr0ball commented

2026-06-14 14:13:37 -07:00

Owner

Background

The existing Playwright E2E tests in tests/e2e/ were written against the Streamlit UI and use Streamlit-specific DOM selectors (stSidebarNav, stTab, stException, stAlert, stCheckbox, etc.).

Peregrine is now a Vue 3 SPA served by Nginx (web service) with a FastAPI backend (api service). The old tests cannot be adapted with simple selector swaps — the navigation model, component structure, and error patterns are all different.

What needs to change

Delete / retire

tests/e2e/pages/ — all Streamlit page objects (use stSidebarNav for navigation)
tests/e2e/conftest.py — Streamlit-specific helpers (wait_for_page_load, clear_errors, ErrorRecord detection via stException)
tests/e2e/test_smoke.py — navigates via Streamlit sidebar
tests/e2e/test_interactions.py — clicks Streamlit widgets

Rewrite targets

Page objects — Vue router-based navigation (/, /jobs, /apply/:id, /interviews, /wizard, /settings)
Smoke tests — load app, assert Vue app mounts (#app or [data-v-*]), check no console errors
Core flows:
- Job list loads and renders cards
- Cover letter generation (mocked LLM) — form → submit → task poll → result
- Interview prep — research panel loads, contacts list renders
- Wizard — steps navigate correctly
Error detection — Vue-specific: console errors, failed fetch() calls (network tab), visible error banners
Demo mode — run against http://localhost:8504/peregrine; LLM endpoints return 403 (demo guard), verify graceful degradation

Mode configs to update

tests/e2e/modes/demo.py, cloud.py, local.py — update base URLs and any Streamlit-specific setup

Acceptance criteria

pytest tests/e2e/ --mode=demo passes green against the running demo instance at http://localhost:8504/peregrine
No Streamlit-specific selectors anywhere in the new test files
At minimum: smoke test (app loads), job list test, nav test for each major route

Notes

The demo instance runs at http://localhost:8504/peregrine (Nginx proxies /peregrine prefix to the Vue app)
API is available at http://localhost:8504/api/* (Nginx proxies to FastAPI on port 8601)
Demo mode blocks all LLM endpoints with 403 — tests should mock or assert the 403 gracefully

## Background The existing Playwright E2E tests in `tests/e2e/` were written against the Streamlit UI and use Streamlit-specific DOM selectors (`stSidebarNav`, `stTab`, `stException`, `stAlert`, `stCheckbox`, etc.). Peregrine is now a Vue 3 SPA served by Nginx (`web` service) with a FastAPI backend (`api` service). The old tests cannot be adapted with simple selector swaps — the navigation model, component structure, and error patterns are all different. ## What needs to change ### Delete / retire - `tests/e2e/pages/` — all Streamlit page objects (use `stSidebarNav` for navigation) - `tests/e2e/conftest.py` — Streamlit-specific helpers (`wait_for_page_load`, `clear_errors`, `ErrorRecord` detection via `stException`) - `tests/e2e/test_smoke.py` — navigates via Streamlit sidebar - `tests/e2e/test_interactions.py` — clicks Streamlit widgets ### Rewrite targets 1. **Page objects** — Vue router-based navigation (`/`, `/jobs`, `/apply/:id`, `/interviews`, `/wizard`, `/settings`) 2. **Smoke tests** — load app, assert Vue app mounts (`#app` or `[data-v-*]`), check no console errors 3. **Core flows**: - Job list loads and renders cards - Cover letter generation (mocked LLM) — form → submit → task poll → result - Interview prep — research panel loads, contacts list renders - Wizard — steps navigate correctly 4. **Error detection** — Vue-specific: console errors, failed `fetch()` calls (network tab), visible error banners 5. **Demo mode** — run against `http://localhost:8504/peregrine`; LLM endpoints return 403 (demo guard), verify graceful degradation ### Mode configs to update - `tests/e2e/modes/demo.py`, `cloud.py`, `local.py` — update base URLs and any Streamlit-specific setup ## Acceptance criteria - `pytest tests/e2e/ --mode=demo` passes green against the running demo instance at `http://localhost:8504/peregrine` - No Streamlit-specific selectors anywhere in the new test files - At minimum: smoke test (app loads), job list test, nav test for each major route ## Notes - The demo instance runs at `http://localhost:8504/peregrine` (Nginx proxies `/peregrine` prefix to the Vue app) - API is available at `http://localhost:8504/api/*` (Nginx proxies to FastAPI on port 8601) - Demo mode blocks all LLM endpoints with 403 — tests should mock or assert the 403 gracefully