chatbot-template/tests/e2e/model-selector.test.ts

89 lines
2.6 KiB
TypeScript

import { expect, test } from "@playwright/test";
const MODEL_BUTTON_REGEX = /Gemini|Claude|GPT|Grok/i;
test.describe("Model Selector", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/");
});
test("displays a model button", async ({ page }) => {
// Look for any button with model-related content
const modelButton = page
.locator("button")
.filter({ hasText: MODEL_BUTTON_REGEX })
.first();
await expect(modelButton).toBeVisible();
});
test("opens model selector popover on click", async ({ page }) => {
const modelButton = page
.locator("button")
.filter({ hasText: MODEL_BUTTON_REGEX })
.first();
await modelButton.click();
// Search input should be visible in the popover
await expect(page.getByPlaceholder("Search models...")).toBeVisible();
});
test("can search for models", async ({ page }) => {
const modelButton = page
.locator("button")
.filter({ hasText: MODEL_BUTTON_REGEX })
.first();
await modelButton.click();
const searchInput = page.getByPlaceholder("Search models...");
await searchInput.fill("Claude");
// Should show at least one Claude model
await expect(page.getByText("Claude Haiku").first()).toBeVisible();
});
test("can close model selector by clicking outside", async ({ page }) => {
const modelButton = page
.locator("button")
.filter({ hasText: MODEL_BUTTON_REGEX })
.first();
await modelButton.click();
await expect(page.getByPlaceholder("Search models...")).toBeVisible();
// Click outside to close
await page.keyboard.press("Escape");
await expect(page.getByPlaceholder("Search models...")).not.toBeVisible();
});
test("shows model provider groups", async ({ page }) => {
const modelButton = page
.locator("button")
.filter({ hasText: MODEL_BUTTON_REGEX })
.first();
await modelButton.click();
// Should show provider group headers
await expect(page.getByText("Anthropic")).toBeVisible();
await expect(page.getByText("Google")).toBeVisible();
});
test("can select a different model", async ({ page }) => {
const modelButton = page
.locator("button")
.filter({ hasText: MODEL_BUTTON_REGEX })
.first();
await modelButton.click();
// Select a specific model
await page.getByText("Claude Haiku").first().click();
// Popover should close
await expect(page.getByPlaceholder("Search models...")).not.toBeVisible();
// Model button should now show the selected model
await expect(
page.locator("button").filter({ hasText: "Claude Haiku" }).first()
).toBeVisible();
});
});