test(saas-demo): Playwright smoke test for golden path

Adds a CI-safe Playwright smoke test that verifies the banking showcase
boots and the CopilotKit v2 popup opens with its configured suggestion
pills, without invoking the agent (so it runs in CI without secrets).

Covers:
  - Document title shows the Northwind Finance brand
  - Credit-cards dashboard renders ("Credit Cards" heading)
  - CopilotPopup launcher opens the dialog (Northwind Copilot)
  - Three suggestion pills render: View transactions, Add a card,
    Assign a policy

The dev server gets a dummy OPENAI_API_KEY so the runtime route boots,
but the test never sends a chat message or clicks a suggestion.

.gitignore: ignore test-results/, playwright-report/, and
tsconfig.tsbuildinfo so they don't become clutter.

Author: mxmzb

examples/showcases/banking/.gitignore

@@ -5,3 +5,11 @@ node_modules/
 .DS_Store
 
 .next
+
+# TypeScript incremental build cache
+tsconfig.tsbuildinfo
+
+# Playwright
+test-results/
+playwright-report/
+playwright/.cache/

examples/showcases/banking/e2e/smoke.spec.ts

@@ -0,0 +1,101 @@
+import { test, expect } from "@playwright/test";
+import type { ConsoleMessage, Page } from "@playwright/test";
+
+/**
+ * CI-safe smoke test for the Northwind banking showcase.
+ *
+ * What this covers:
+ *   1. App boots and the dashboard renders credible content (brand + cards UI).
+ *   2. The CopilotKit v2 popup launcher opens the modal.
+ *   3. The three configured suggestion pills are visible.
+ *
+ * What this intentionally does NOT do:
+ *   - Send any chat message
+ *   - Click any suggestion (which would invoke the agent / hit OpenAI)
+ *   - Exercise any tool
+ *
+ * That keeps the test runnable in CI without secrets.
+ */
+
+// Console-error filtering: the page may legitimately log network errors for
+// the /api/copilotkit endpoint (e.g. if the popup pings it on open and the
+// runtime fails because OPENAI_API_KEY is a dummy value), and Next.js dev mode
+// prints various non-fatal warnings. We only fail on genuine page/script
+// errors that indicate the app itself is broken.
+const IGNORED_ERROR_PATTERNS: RegExp[] = [
+  /favicon/i,
+  /\/api\/copilotkit/i,
+  /Failed to load resource/i,
+  /net::ERR_/i,
+  /Download the React DevTools/i,
+  /Hydration/i, // Next.js dev-only hydration warnings are out of scope
+];
+
+function isIgnoredError(message: ConsoleMessage): boolean {
+  if (message.type() !== "error") return true;
+  const text = message.text();
+  return IGNORED_ERROR_PATTERNS.some((re) => re.test(text));
+}
+
+function collectConsoleErrors(page: Page): string[] {
+  const errors: string[] = [];
+  page.on("console", (msg) => {
+    if (msg.type() === "error" && !isIgnoredError(msg)) {
+      errors.push(msg.text());
+    }
+  });
+  return errors;
+}
+
+test.describe("banking showcase smoke", () => {
+  test("dashboard renders and popup opens with suggestions", async ({
+    page,
+  }) => {
+    const consoleErrors = collectConsoleErrors(page);
+
+    await page.goto("/");
+
+    // Brand assertion: the document title is the Northwind Finance brand.
+    await expect(page).toHaveTitle(/Northwind/);
+
+    // The credit-cards page renders an h1 "Credit Cards" and an "Add Card"
+    // dropdown — that's our credible-content check that the dashboard is up.
+    await expect(
+      page.getByRole("heading", { name: "Credit Cards", level: 1 }),
+    ).toBeVisible();
+
+    // Open the CopilotKit popup. v2 renders a fixed launcher button with
+    // data-testid="copilot-chat-toggle" (see CopilotChatToggleButton.tsx).
+    const launcher = page.getByTestId("copilot-chat-toggle");
+    await expect(launcher).toBeVisible();
+    await launcher.click();
+
+    // The popup modal exposes the configured assistant title as its aria-label
+    // (modalHeaderTitle = IDENTITY.assistant = "Northwind Copilot"). We assert
+    // on the dialog rather than visible text since the title may be rendered
+    // as aria-only.
+    await expect(
+      page.getByRole("dialog", { name: /Northwind Copilot/i }),
+    ).toBeVisible();
+
+    // The three suggestion pills configured by BankingSuggestions render as
+    // buttons with data-testid="copilot-suggestion" (see
+    // CopilotChatSuggestionPill.tsx). Their labels are the suggestion titles.
+    const suggestions = page.getByTestId("copilot-suggestion");
+    await expect(suggestions).toHaveCount(3);
+    await expect(
+      suggestions.filter({ hasText: "View transactions" }),
+    ).toBeVisible();
+    await expect(suggestions.filter({ hasText: "Add a card" })).toBeVisible();
+    await expect(
+      suggestions.filter({ hasText: "Assign a policy" }),
+    ).toBeVisible();
+
+    // Make sure nothing genuinely broken showed up in the console while the
+    // page rendered and the popup opened.
+    expect(
+      consoleErrors,
+      `Unexpected console errors:\n${consoleErrors.join("\n")}`,
+    ).toEqual([]);
+  });
+});

examples/showcases/banking/playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "./e2e",
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: "list",
+  use: { baseURL: "http://localhost:3000", trace: "on-first-retry" },
+  webServer: {
+    command: "pnpm dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+    env: {
+      // The runtime route imports BuiltInAgent which requires OPENAI_API_KEY at
+      // module load. The smoke test never invokes the agent — it only checks
+      // that the page renders and the popup opens — but the dev server needs
+      // *some* value here to boot the API route without crashing. Tests must
+      // remain LLM-free; we only set this so the Next.js server starts.
+      OPENAI_API_KEY: process.env.OPENAI_API_KEY ?? "test",
+      NEXT_TELEMETRY_DISABLED: "1",
+    },
+  },
+});