test: add e2e tests for landing page interactive behaviors

2026-08-03 07:46:42 +02:00 · 2026-04-27 21:57:08 +08:00
parent 2716e50801
commit f5756974bd
1 changed files with 109 additions and 0 deletions
@@ -0,0 +1,109 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("BentoGrid Interactions", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/");
+  });
+
+  test("search filters tools by name", async ({ page }) => {
+    const input = page.getByPlaceholder("Search tools...");
+    await input.fill("resize");
+    await expect(page.getByText("Resize", { exact: true }).first()).toBeVisible();
+    await expect(page.getByText(/Showing \d+ of 47 tools/)).toBeVisible();
+  });
+
+  test("category pill filters tools", async ({ page }) => {
+    await page.getByText(/AI Tools/).click();
+    await expect(page.getByText(/Showing 14 of 47 tools/)).toBeVisible();
+    await expect(page.getByText("Remove Background")).toBeVisible();
+  });
+
+  test("clicking All resets category filter", async ({ page }) => {
+    await page.getByText(/AI Tools/).click();
+    await expect(page.getByText(/Showing 14 of 47 tools/)).toBeVisible();
+
+    await page.getByText(/All \(47\)/).click();
+    await expect(page.getByText(/Showing 47 of 47 tools/)).toBeVisible();
+  });
+
+  test("search with no results shows empty state", async ({ page }) => {
+    const input = page.getByPlaceholder("Search tools...");
+    await input.fill("xyznonexistent");
+    await expect(page.getByText("No tools found. Try a different search.")).toBeVisible();
+    await expect(page.getByText(/Showing 0 of 47 tools/)).toBeVisible();
+  });
+
+  test("combined search and category filter works", async ({ page }) => {
+    await page.getByText(/AI Tools/).click();
+    const input = page.getByPlaceholder("Search tools...");
+    await input.fill("background");
+    await expect(page.getByText("Remove Background")).toBeVisible();
+  });
+});
+
+test.describe("HowItWorks Copy Button", () => {
+  test("copy button shows Copied! feedback", async ({ page }) => {
+    await page.goto("/");
+    const copyButton = page.locator("button").filter({ hasText: "docker run" });
+    await copyButton.click();
+    await expect(page.getByText("Copied!")).toBeVisible();
+  });
+});
+
+test.describe("FAQ Page Accordion", () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto("/faq");
+  });
+
+  test("renders all FAQ questions", async ({ page }) => {
+    await expect(page.getByText("Frequently Asked Questions")).toBeVisible();
+    await expect(page.getByText("Are my files safe and private?")).toBeVisible();
+    await expect(page.getByText("Is SnapOtter really free?")).toBeVisible();
+    await expect(page.getByText("Do I need an internet connection?")).toBeVisible();
+  });
+
+  test("answers are hidden by default", async ({ page }) => {
+    await expect(page.getByText(/All processing happens on your own server/)).not.toBeVisible();
+  });
+
+  test("clicking a question expands the answer", async ({ page }) => {
+    await page.getByText("Are my files safe and private?").click();
+    await expect(
+      page.getByText(/All processing happens on your own server/),
+    ).toBeVisible();
+  });
+
+  test("clicking again collapses the answer", async ({ page }) => {
+    const question = page.getByText("Are my files safe and private?");
+    await question.click();
+    await expect(
+      page.getByText(/All processing happens on your own server/),
+    ).toBeVisible();
+    await question.click();
+    await expect(
+      page.getByText(/All processing happens on your own server/),
+    ).not.toBeVisible();
+  });
+
+  test("multiple FAQs can be open simultaneously", async ({ page }) => {
+    await page.getByText("Are my files safe and private?").click();
+    await page.getByText("Is SnapOtter really free?").click();
+    await expect(
+      page.getByText(/All processing happens on your own server/),
+    ).toBeVisible();
+    await expect(page.getByText(/open source under AGPL-3.0/)).toBeVisible();
+  });
+});
+
+test.describe("Mobile Navigation", () => {
+  test("hamburger menu opens and shows links", async ({ page }) => {
+    await page.setViewportSize({ width: 375, height: 812 });
+    await page.goto("/");
+    const toggle = page.getByLabel("Toggle menu");
+    await toggle.click();
+    await expect(page.getByRole("link", { name: "Features" }).last()).toBeVisible();
+    await expect(page.getByRole("link", { name: "Pricing" }).last()).toBeVisible();
+    await expect(page.getByRole("link", { name: "Docs" }).last()).toBeVisible();
+    await expect(page.getByRole("link", { name: "Contact" }).last()).toBeVisible();
+  });
+});