Add Puppeteer scripts for navigation testing and debugging

- Created nav-debug.cjs to log anchor tags and simulate clicks on the Voice navigation link, capturing click events and page navigation.
- Added nav-test.cjs to test the Voice link click and log the URL at various intervals, capturing any page errors.
- Introduced nav-test2.cjs to check the presence of specific elements on the /voice/ page and log any console errors.
- Implemented nav-test4019.cjs to monitor network requests and responses related to the Voice navigation, verifying button presence and click functionality.
This commit is contained in:
asepharyana
2026-08-15 19:23:17 +07:00
parent 1b56212d1a
commit 3c2c1c3b15
9 changed files with 789 additions and 38 deletions
@@ -221,7 +221,7 @@ export function AmbientCanvas({
<div
ref={mountRef}
aria-hidden
className="fixed inset-0 -z-10 overflow-hidden"
className="fixed inset-0 -z-10 overflow-hidden pointer-events-none select-none"
style={{
background:
"radial-gradient(120% 90% at 50% 0%, oklch(0.2 0.04 70 / 0.5), oklch(0.1 0.015 70) 60%)",
@@ -1,50 +1,67 @@
"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useRouter, usePathname } from "next/navigation";
import { LayoutDashboard } from "lucide-react";
import { navItems, isActivePath } from "@/lib/navigation";
import { cn } from "@/lib/utils";
import {
Tooltip,
} from "@/components/primitives/tooltip";
function NavItem({
href,
label,
active,
Icon,
}: {
href: string;
label: string;
active: boolean;
Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
}) {
const router = useRouter();
return (
<button
type="button"
aria-label={label}
aria-current={active ? "page" : undefined}
onClick={() => router.push(href)}
className={cn(
"group relative flex size-11 items-center justify-center rounded-[13px] transition-all",
active
? "bg-signal/15 text-signal"
: "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
)}
>
{active && (
<span className="absolute -left-3 h-6 w-1 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
)}
<Icon className="size-[18px]" strokeWidth={active ? 2.4 : 2} />
</button>
);
}
export function NavRail() {
const pathname = usePathname();
const path = pathname ?? "/";
return (
<nav className="glass m-3 mr-0 flex w-[68px] flex-col items-center gap-1 rounded-[18px] py-4">
<Link
<NavItem
href="/dashboard"
className="mb-3 flex size-11 items-center justify-center rounded-[14px] bg-signal/15 text-signal glow-signal"
aria-label="GMW home"
>
<span className="display text-xl">G</span>
</Link>
label="Dashboard"
active={path === "/dashboard" || path === "/dashboard/"}
Icon={LayoutDashboard}
/>
<div className="flex flex-1 flex-col gap-1">
{navItems.map((item) => {
const active = isActivePath(pathname, item.matchPrefix);
const Icon = item.icon;
return (
<Tooltip key={item.href} label={item.label} side="bottom">
<Link
href={item.href}
aria-label={item.label}
aria-current={active ? "page" : undefined}
className={cn(
"group relative flex size-11 items-center justify-center rounded-[13px] transition-all",
active
? "bg-signal/15 text-signal"
: "text-ink-faint hover:bg-white/5 hover:text-ink-soft",
)}
>
{active && (
<span className="absolute -left-3 h-6 w-1 rounded-full bg-signal shadow-[0_0_12px_var(--color-signal-glow)]" />
)}
<Icon className="size-[18px]" strokeWidth={active ? 2.4 : 2} />
</Link>
</Tooltip>
);
})}
{navItems.map((item) => (
<NavItem
key={item.href}
href={item.href}
label={item.label}
active={isActivePath(path, item.matchPrefix)}
Icon={item.icon}
/>
))}
</div>
</nav>
);
}