feat(landing): add Product dropdown to nav (#475)

Adds a CSS-only Product dropdown (Developers, Self-hosted tools, Alternatives) to the top nav and restores the lg breakpoint. Mobile menu lists items flat. Updated homepage e2e (navbar + dropdown-hover tests, footer scope). Verified at 1024/1280px, 63/63 landing e2e.
This commit is contained in:
SnapOtter
2026-07-10 20:09:57 +08:00
committed by GitHub
parent a08afbc80a
commit 3d1744aec8
2 changed files with 53 additions and 17 deletions
+14 -10
View File
@@ -10,19 +10,22 @@ test.describe("Landing Homepage", () => {
});
test("navbar renders brand and navigation links", async ({ page }) => {
const nav = page.locator("nav");
await expect(page.getByText("SnapOtter").first()).toBeVisible();
for (const name of [
"Enterprise",
"Pricing",
"Alternatives",
"Developers",
"Docs",
"Talk to a human",
]) {
await expect(page.getByRole("link", { name }).first()).toBeVisible();
await expect(nav.getByRole("button", { name: "Product" })).toBeVisible();
for (const name of ["Enterprise", "Pricing", "Docs", "Talk to a human"]) {
await expect(nav.getByRole("link", { name }).first()).toBeVisible();
}
});
test("Product dropdown reveals its items on hover", async ({ page }) => {
const nav = page.locator("nav");
await nav.getByRole("button", { name: "Product" }).hover();
await expect(nav.getByRole("link", { name: /Developers/ })).toBeVisible();
await expect(nav.getByRole("link", { name: /Self-hosted tools/ })).toBeVisible();
await expect(nav.getByRole("link", { name: /Alternatives/ })).toBeVisible();
});
test("navbar renders Book a Demo CTA", async ({ page }) => {
await expect(page.getByRole("link", { name: "Book a Demo" }).first()).toBeVisible();
});
@@ -137,8 +140,9 @@ test.describe("Landing Homepage", () => {
});
test("footer renders all column titles", async ({ page }) => {
const footer = page.locator("footer");
for (const col of ["Product", "Solutions", "Resources", "Community", "Legal"]) {
await expect(page.getByText(col, { exact: true })).toBeVisible();
await expect(footer.getByText(col, { exact: true })).toBeVisible();
}
});