test: add e2e tests for docs search and theme toggle

2026-08-03 07:46:42 +02:00 · 2026-04-27 21:57:08 +08:00
parent 698ca23151
commit 3ad3286c4a
1 changed files with 81 additions and 0 deletions
@@ -0,0 +1,81 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Docs Search", () => {
+  test("search button is visible", async ({ page }) => {
+    await page.goto("/guide/getting-started");
+    const searchButton = page.locator(
+      ".VPNavBarSearch button, .DocSearch-Button, button[aria-label*='Search'], .VPNavBarSearchButton button",
+    );
+    await expect(searchButton.first()).toBeVisible();
+  });
+
+  test("clicking search opens search dialog", async ({ page }) => {
+    await page.goto("/guide/getting-started");
+    const searchButton = page.locator(
+      ".VPNavBarSearch button, .DocSearch-Button, button[aria-label*='Search'], .VPNavBarSearchButton button",
+    );
+    await searchButton.first().click();
+    await expect(
+      page.locator(".VPLocalSearchBox, .DocSearch-Modal, [role='dialog']").first(),
+    ).toBeVisible();
+  });
+
+  test("typing in search shows results", async ({ page }) => {
+    await page.goto("/guide/getting-started");
+    const searchButton = page.locator(
+      ".VPNavBarSearch button, .DocSearch-Button, button[aria-label*='Search'], .VPNavBarSearchButton button",
+    );
+    await searchButton.first().click();
+    const searchInput = page.locator(
+      ".VPLocalSearchBox input, .DocSearch-Input, [role='dialog'] input",
+    ).first();
+    await searchInput.fill("docker");
+    const results = page.locator(
+      ".VPLocalSearchBox .result, .DocSearch-Hits, [role='dialog'] .result, [role='listbox'] [role='option']",
+    );
+    await expect(results.first()).toBeVisible({ timeout: 5000 });
+  });
+});
+
+test.describe("Theme Toggle", () => {
+  test("theme toggle button is visible", async ({ page }) => {
+    await page.goto("/guide/getting-started");
+    const toggle = page.locator(
+      ".VPSwitchAppearance, button[aria-label*='Switch'], .VPSwitch",
+    );
+    await expect(toggle.first()).toBeVisible();
+  });
+
+  test("clicking theme toggle changes appearance", async ({ page }) => {
+    await page.goto("/guide/getting-started");
+    const html = page.locator("html");
+    const initialClass = await html.getAttribute("class");
+
+    const toggle = page.locator(
+      ".VPSwitchAppearance, button[aria-label*='Switch'], .VPSwitch",
+    ).first();
+    await toggle.click();
+    await page.waitForTimeout(300);
+
+    const newClass = await html.getAttribute("class");
+    expect(newClass).not.toBe(initialClass);
+  });
+});
+
+test.describe("GitHub Stars Component", () => {
+  test("GitHub star button is visible in navbar", async ({ page }) => {
+    await page.goto("/");
+    const githubBtn = page.locator(".github-btn, .github-btn-wrapper").first();
+    await expect(githubBtn).toBeVisible();
+  });
+
+  test("GitHub star button links to correct repo", async ({ page }) => {
+    await page.goto("/");
+    const starLink = page.locator('a[title="Star on GitHub"]').first();
+    await expect(starLink).toHaveAttribute(
+      "href",
+      "https://github.com/snapotter-hq/snapotter",
+    );
+    await expect(starLink).toHaveAttribute("target", "_blank");
+  });
+});