Test:Ui

---
name: test:ui
description: Write and run Playwright UI E2E tests for Rossoctl - login, navigation, agent chat, across CI/Kind/HyperShift
---

# Playwright UI Tests

Write and run Playwright UI E2E tests for the Rossoctl UI across all environments.

> **Not to be confused with `test:playwright`** which is for recording narrated demo videos.
> This skill is for functional UI testing (login, navigate, interact, assert).

## Test Location

```
rossoctl/ui-v2/
├── e2e/
│   ├── agent-chat.spec.ts     # Login -> agent -> chat flow
│   ├── agent-catalog.spec.ts  # Agent listing page
│   ├── tool-catalog.spec.ts   # Tool listing page
│   └── home.spec.ts           # Home page
├── playwright.config.ts       # Playwright config (baseURL, webServer)
└── package.json               # npm run test:e2e
```

## Writing Tests

### Login Helper

All tests should handle Keycloak login when auth is enabled:

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

const KEYCLOAK_USER = process.env.KEYCLOAK_USER || 'admin';
const KEYCLOAK_PASSWORD = process.env.KEYCLOAK_PASSWORD || 'admin';

async function loginIfNeeded(page: Page) {
  await page.waitForLoadState('networkidle', { timeout: 15000 });
  const isKeycloakLogin = await page.locator('#kc-form-login, #username, input[name="username"]')
    .first().isVisible({ timeout: 3000 }).catch(() => false);
  if (isKeycloakLogin) {
    await page.locator('#username, input[name="username"]').first().fill(KEYCLOAK_USER);
    await page.locator('#password, input[name="password"]').first().fill(KEYCLOAK_PASSWORD);
    await page.locator('#kc-login, input[type="submit"]').first().click();
    await page.waitForURL(/^(?!.*keycloak)/, { timeout: 15000 });
    await page.waitForLoadState('networkidle');
  }
}
```

### Test Pattern

```typescript
test('should login and interact with agent', async ({ page }) => {
  test.setTimeout(120000); // LLM calls can be slow

  await page.goto('/agents');
  await loginIfNeeded(page);

  // Navigate
  await expect(page.getByRole('heading', { name: /Agent Catalog/i })).toBeVisible();
  await page.getByRole('link', { name: /weather-service/i }).click();

  // Interact
  await page.getByPlaceholder('Type your message...').fill('What is the weather?');
  await page.getByRole('button', { name: /Send/i }).click();

  // Assert response
  await expect(page.locator('text=/weather|temperature/i').first())
    .toBeVisible({ timeout: 90000 });
});
```

### Selector Patterns

| Element | Selector |
|---------|----------|
| Chat input | `page.getByPlaceholder('Type your message...')` |
| Send button | `page.getByRole('button', { name: /Send/i })` |
| Agent link | `page.getByRole('link', { name: /weather-service/i })` |
| Page heading | `page.getByRole('heading', { name: /Agent Catalog/i })` |
| Namespace selector | `page.locator('[aria-label="Select namespace"]')` |
| Status badge | `page.locator('.pf-v5-c-label')` |
| Import button | `page.getByRole('button', { name: /Import Agent/i })` |

### Timeouts

| Operation | Timeout | Reason |
|-----------|---------|--------|
| Page load | 15s | Network + Keycloak init |
| API response | 30s | Backend query |
| LLM response | 90s | Ollama inference + tool calls |
| Full test | 120s | End-to-end including chat |

## Running Tests

### On Kind (local)

```bash
# Prerequisites: Kind cluster running, backend port-forwarded
kubectl port-forward -n rossoctl-system svc/rossoctl-backend 8000:8000 &

cd rossoctl/ui-v2
npm ci
npx playwright install chromium

npm run test:e2e              # Headless (starts Vite dev server)
npm run test:e2e:ui           # Interactive Playwright UI
npm run test:e2e:debug        # Debug mode
npx playwright test agent-chat.spec.ts  # Single file
```

The Vite dev server starts automatically and proxies `/api` to `localhost:8000`.

### On HyperShift

```bash
export CLUSTER=<suffix> MANAGED_BY_TAG=${MANAGED_BY_TAG:-rossoctl-hypershift-custom}
export KUBECONFIG=~/clusters/hcp/$MANAGED_BY_TAG-$CLUSTER/auth/kubeconfig

# Get UI URL from OpenShift route
ROSSOCTL_UI_URL="https://$(kubectl get route rossoctl-ui -n rossoctl-system -o jsonpath='{.spec.host}')"

cd rossoctl/ui-v2
npm ci
npx playwright install chromium

ROSSOCTL_UI_URL="$ROSSOCTL_UI_URL" npx playwright test
ROSSOCTL_UI_URL="$ROSSOCTL_UI_URL" npm run test:e2e:ui  # Interactive
```

**HyperShift notes:**
- Always set `ROSSOCTL_UI_URL` to the OpenShift route (no dev server needed)
- May need `PLAYWRIGHT_IGNORE_HTTPS_ERRORS=1` for self-signed certs
- Keycloak credentials: `kubectl get secret keycloak-initial-admin -n keycloak -o jsonpath='{.data.password}' | base64 -d`

### In CI

CI step `91-run-ui-tests.sh` runs after pytest E2E tests:

1. Installs npm dependencies + Playwright chromium
2. Starts Vite dev server (proxies to port-forwarded backend)
3. Runs `npx playwright test`
4. Uploads `playwright-report/` as artifact

### Analyzing CI Failures

```bash
# Download Playwright report
gh run download <run-id> -n e2e-test-results -D /tmp/test-results

# Open HTML report
npx playwright show-report /tmp/test-results/rossoctl/ui-v2/playwright-report
```

## Related Skills

- **`test:playwright`** - Playwright demo video tests (different purpose)
- **`test:write`** - General E2E test writing patterns
- **`test:review`** - Review test quality
- **`tdd:ci`** - CI-driven TDD (invokes this skill for UI tests)
- **`tdd:kind`** - Kind TDD (invokes this skill for UI tests)
- **`tdd:hypershift`** - HyperShift TDD (invokes this skill for UI tests)
- **`rossoctl:ui-debug`** - Debug UI issues (502, proxy, auth)