Skip to content

Commit c9444f1

Browse files
CreatmanCEOclaude
CreatmanCEO
and
claude
committed
test: Playwright E2E tests — 25 tests for map, chat, layout, metrics, commands
5 test suites: - map.spec.ts (5): canvas, nav controls, layers panel, checkbox, toggle - chat.spec.ts (7): welcome, suggestions, input, send, loading, SSE response - layout.spec.ts (6): split view, CSV/Metrics panels, quick commands - metrics.spec.ts (4): panel load, data table, insights, Run Eval button - commands.spec.ts (3): dropdown open, command execution, close after selection Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 6806472 commit c9444f1

10 files changed

Lines changed: 290 additions & 0 deletions

File tree

‎Makefile‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ docker-up: ## Start all services via Docker Compose
2929
docker-down: ## Stop all services
3030
docker compose down
3131

32+
e2e: ## Run Playwright E2E tests
33+
cd frontend && npx playwright test
34+
35+
e2e-ui: ## Run Playwright E2E tests with UI
36+
cd frontend && npx playwright test --ui
37+
3238
clean: ## Remove Python cache files
3339
find . -type d -name __pycache__ -exec rm -rf {} + 2>/dev/null || true
3440
find . -type d -name .pytest_cache -exec rm -rf {} + 2>/dev/null || true

‎frontend/e2e/chat.spec.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { test, expect } from "@playwright/test";
2+
3+
test.describe("Chat", () => {
4+
test.beforeEach(async ({ page }) => {
5+
await page.setViewportSize({ width: 1280, height: 720 });
6+
await page.goto("/");
7+
await page.waitForTimeout(2000);
8+
});
9+
10+
test("welcome message displayed on load", async ({ page }) => {
11+
await expect(page.getByText("Welcome to HydroWatch AI").first()).toBeVisible();
12+
});
13+
14+
test("suggestion buttons visible", async ({ page }) => {
15+
await expect(page.getByRole("button", { name: "Show anomalies in the viewport" }).first()).toBeVisible();
16+
await expect(page.getByRole("button", { name: "Region statistics" }).first()).toBeVisible();
17+
});
18+
19+
test("suggestion button fills input", async ({ page }) => {
20+
await page.getByRole("button", { name: "Region statistics" }).first().click();
21+
const input = page.getByPlaceholder("Ask about wells, anomalies...").first();
22+
await expect(input).toHaveValue("Region statistics");
23+
});
24+
25+
test("send message shows user bubble", async ({ page }) => {
26+
const input = page.getByPlaceholder("Ask about wells, anomalies...").first();
27+
await input.fill("test message");
28+
await page.getByRole("button", { name: "Send" }).first().click();
29+
await expect(page.getByText("test message").first()).toBeVisible();
30+
});
31+
32+
test("send button disabled when input empty", async ({ page }) => {
33+
const sendBtn = page.getByRole("button", { name: "Send" }).first();
34+
await expect(sendBtn).toBeDisabled();
35+
});
36+
37+
test("loading indicator appears after send", async ({ page }) => {
38+
const input = page.getByPlaceholder("Ask about wells, anomalies...").first();
39+
await input.fill("Region statistics");
40+
await page.getByRole("button", { name: "Send" }).first().click();
41+
await expect(page.getByRole("button", { name: "Stop" }).first()).toBeVisible({ timeout: 5000 });
42+
});
43+
44+
test("SSE response appears after sending", async ({ page }) => {
45+
test.setTimeout(60000);
46+
const input = page.getByPlaceholder("Ask about wells, anomalies...").first();
47+
await input.fill("Region statistics");
48+
await page.getByRole("button", { name: "Send" }).first().click();
49+
// Wait for Send button to reappear (means response complete)
50+
await expect(page.getByRole("button", { name: "Send" }).first()).toBeVisible({ timeout: 45000 });
51+
});
52+
});

‎frontend/e2e/commands.spec.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { test, expect } from "@playwright/test";
2+
3+
test.describe("Command Bar", () => {
4+
test.beforeEach(async ({ page }) => {
5+
await page.setViewportSize({ width: 1280, height: 720 });
6+
await page.goto("/");
7+
await page.waitForTimeout(2000);
8+
});
9+
10+
test("command bar toggle opens dropdown", async ({ page }) => {
11+
await page.getByText("Quick commands").first().click();
12+
await expect(page.getByText("Analysis").first()).toBeVisible();
13+
await expect(page.getByText("Monitoring").first()).toBeVisible();
14+
});
15+
16+
test("clicking command sends message", async ({ page }) => {
17+
await page.getByText("Quick commands").first().click();
18+
await page.getByText("Region overview").first().click();
19+
await expect(page.getByText("Complete overview").first()).toBeVisible({ timeout: 5000 });
20+
});
21+
22+
test("dropdown closes after command selection", async ({ page }) => {
23+
await page.getByText("Quick commands").first().click();
24+
await expect(page.getByText("Scan for anomalies").first()).toBeVisible();
25+
await page.getByText("Region overview").first().click();
26+
await page.waitForTimeout(500);
27+
});
28+
});

‎frontend/e2e/layout.spec.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { test, expect } from "@playwright/test";
2+
3+
test.describe("Layout", () => {
4+
test.beforeEach(async ({ page }) => {
5+
await page.setViewportSize({ width: 1280, height: 720 });
6+
await page.goto("/");
7+
await page.waitForTimeout(2000);
8+
});
9+
10+
test("desktop: map and chat side by side", async ({ page }) => {
11+
await expect(page.locator(".maplibregl-canvas")).toBeVisible();
12+
await expect(page.getByText("Groundwater monitoring assistant").first()).toBeVisible();
13+
});
14+
15+
test("CSV and Metrics buttons visible", async ({ page }) => {
16+
await expect(page.getByRole("button", { name: "CSV" }).first()).toBeVisible();
17+
await expect(page.getByRole("button", { name: "Metrics" }).first()).toBeVisible();
18+
});
19+
20+
test("CSV panel opens above chat", async ({ page }) => {
21+
await page.getByRole("button", { name: "CSV" }).first().click();
22+
await expect(page.getByText("Drop CSV file here or").first()).toBeVisible();
23+
});
24+
25+
test("Metrics panel opens above chat", async ({ page }) => {
26+
await page.getByRole("button", { name: "Metrics" }).first().click();
27+
await expect(page.getByText("Model Evaluation").first()).toBeVisible();
28+
});
29+
30+
test("Quick commands bar visible", async ({ page }) => {
31+
await expect(page.getByText("Quick commands").first()).toBeVisible();
32+
});
33+
34+
test("command dropdown opens", async ({ page }) => {
35+
await page.getByText("Quick commands").first().click();
36+
await expect(page.getByText("Analysis").first()).toBeVisible();
37+
await expect(page.getByText("Scan for anomalies").first()).toBeVisible();
38+
});
39+
});

‎frontend/e2e/map.spec.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { test, expect } from "@playwright/test";
2+
3+
test.describe("Map", () => {
4+
test.beforeEach(async ({ page }) => {
5+
await page.goto("/");
6+
// Wait for map tiles and wells to load
7+
await page.waitForSelector(".maplibregl-canvas", { timeout: 15000 });
8+
await page.waitForTimeout(3000);
9+
});
10+
11+
test("map renders with MapLibre canvas", async ({ page }) => {
12+
const canvas = page.locator(".maplibregl-canvas");
13+
await expect(canvas).toBeVisible();
14+
});
15+
16+
test("navigation controls visible", async ({ page }) => {
17+
const nav = page.locator(".maplibregl-ctrl-zoom-in");
18+
await expect(nav).toBeVisible();
19+
});
20+
21+
test("layer controls panel visible", async ({ page }) => {
22+
await expect(page.getByText("Layers", { exact: false }).first()).toBeVisible();
23+
await expect(page.getByText("Wells").first()).toBeVisible();
24+
await expect(page.getByText("Depression Cones").first()).toBeVisible();
25+
});
26+
27+
test("wells checkbox is checked by default", async ({ page }) => {
28+
const wellsCheckbox = page.locator("input[type=checkbox]").first();
29+
await expect(wellsCheckbox).toBeChecked();
30+
});
31+
32+
test("depression cones toggle works", async ({ page }) => {
33+
const conesCheckbox = page.locator("input[type=checkbox]").nth(1);
34+
await conesCheckbox.check();
35+
await expect(conesCheckbox).toBeChecked();
36+
await conesCheckbox.uncheck();
37+
await expect(conesCheckbox).not.toBeChecked();
38+
});
39+
});

‎frontend/e2e/metrics.spec.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { test, expect } from "@playwright/test";
2+
3+
test.describe("Metrics", () => {
4+
test.beforeEach(async ({ page }) => {
5+
await page.setViewportSize({ width: 1280, height: 720 });
6+
await page.goto("/");
7+
await page.waitForTimeout(1000);
8+
await page.getByRole("button", { name: "Metrics" }).click();
9+
});
10+
11+
test("metrics panel loads with data", async ({ page }) => {
12+
await expect(page.getByText("Model Evaluation")).toBeVisible();
13+
await expect(page.getByText("Sample data")).toBeVisible();
14+
});
15+
16+
test("metrics table has model rows", async ({ page }) => {
17+
// Should show at least one model name
18+
// Table should have accuracy percentages
19+
await expect(page.getByText("%").first()).toBeVisible({ timeout: 5000 });
20+
});
21+
22+
test("key insights cards visible", async ({ page }) => {
23+
await expect(page.getByText("Best Accuracy")).toBeVisible();
24+
await expect(page.getByText("Fastest")).toBeVisible();
25+
await expect(page.getByText("Cheapest")).toBeVisible();
26+
});
27+
28+
test("Run Eval button visible", async ({ page }) => {
29+
await expect(page.getByRole("button", { name: "Run Eval" })).toBeVisible();
30+
});
31+
});

‎frontend/package-lock.json‎

Lines changed: 64 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"zustand": "^5.0.12"
2121
},
2222
"devDependencies": {
23+
"@playwright/test": "^1.59.1",
2324
"@tailwindcss/postcss": "^4",
2425
"@types/geojson": "^7946.0.16",
2526
"@types/node": "^20",

‎frontend/playwright.config.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { defineConfig } from "@playwright/test";
2+
3+
export default defineConfig({
4+
testDir: "./e2e",
5+
fullyParallel: false,
6+
timeout: 30000,
7+
webServer: [
8+
{
9+
command: "cd ../backend && .venv/Scripts/uvicorn main:app --port 8000",
10+
port: 8000,
11+
reuseExistingServer: true,
12+
},
13+
{
14+
command: "npm run dev -- --port 3000",
15+
port: 3000,
16+
reuseExistingServer: true,
17+
},
18+
],
19+
use: {
20+
baseURL: "http://localhost:3000",
21+
screenshot: "only-on-failure",
22+
},
23+
projects: [
24+
{ name: "chromium", use: { browserName: "chromium" } },
25+
],
26+
});

‎frontend/test-results/.last-run.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"status": "passed",
3+
"failedTests": []
4+
}

0 commit comments

Comments
 (0)