deer-flow/frontend/tests/e2e/agent-chat.spec.ts
yangzheli c6b0423558
feat(frontend): add Playwright E2E tests with CI workflow (#2279)
* feat(frontend): add Playwright E2E tests with CI workflow

Add end-to-end testing infrastructure using Playwright (Chromium only).
14 tests across 5 spec files cover landing page, chat workspace,
thread history, sidebar navigation, and agent chat — all with mocked
LangGraph/Backend APIs via network interception (zero backend dependency).

New files:
- playwright.config.ts — Chromium, 30s timeout, auto-start Next.js
- tests/e2e/utils/mock-api.ts — shared API mocks & SSE stream helpers
- tests/e2e/{landing,chat,thread-history,sidebar,agent-chat}.spec.ts
- .github/workflows/e2e-tests.yml — push main + PR trigger, paths filter

Updated: package.json, Makefile, .gitignore, CONTRIBUTING.md,
frontend/CLAUDE.md, frontend/AGENTS.md, frontend/README.md

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: apply Copilot suggestions

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
2026-04-18 08:21:08 +08:00

47 lines
1.4 KiB
TypeScript

import { expect, test } from "@playwright/test";
import { mockLangGraphAPI } from "./utils/mock-api";
const MOCK_AGENTS = [
{
name: "test-agent",
description: "A test agent for E2E tests",
system_prompt: "You are a test agent.",
},
];
test.describe("Agent chat", () => {
test("agent gallery page loads and shows agents", async ({ page }) => {
mockLangGraphAPI(page, { agents: MOCK_AGENTS });
await page.goto("/workspace/agents");
// The agent card should appear with the agent name
await expect(page.getByText("test-agent")).toBeVisible({
timeout: 15_000,
});
});
test("agent chat page loads with input box", async ({ page }) => {
mockLangGraphAPI(page, { agents: MOCK_AGENTS });
await page.goto("/workspace/agents/test-agent/chats/new");
// The prompt input textarea should be visible
const textarea = page.getByPlaceholder(/how can i assist you/i);
await expect(textarea).toBeVisible({ timeout: 15_000 });
});
test("agent chat page shows agent badge", async ({ page }) => {
mockLangGraphAPI(page, { agents: MOCK_AGENTS });
await page.goto("/workspace/agents/test-agent/chats/new");
// The agent badge should display in the header (scoped to header to avoid
// matching the welcome area which also shows the agent name)
await expect(
page.locator("header span", { hasText: "test-agent" }),
).toBeVisible({ timeout: 15_000 });
});
});