test(docs): make search and nav e2e tests hydration-aware (#551)

The docs e2e suite clicked navbar and sidebar controls before Vue hydrated the
multi-locale bundle, so the clicks were swallowed. That raced the Pagefind
search open (filed as #551), the appearance toggle, and the homepage and
sidebar navigation tests. The old search tests also matched an input
placeholder the config overrides, so they failed against a working build.

Add a waitForHydration helper (gates on #app.__vue_app__, set inside Vue's
app.mount()) and an openDocsSearch helper, and route the affected tests through
them. Search itself was never broken; this change is test-only. Docs e2e suite
is green (43/43).

Closes #551
This commit is contained in:
SnapOtter
2026-07-18 11:22:38 +08:00
committed by GitHub
parent 67f54347b2
commit e113684ddb
5 changed files with 73 additions and 11 deletions
+7
View File
@@ -1,8 +1,12 @@
import { expect, test } from "@playwright/test";
import { waitForHydration } from "./helpers";
test.describe("Docs Sidebar - Guide Section", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/guide/getting-started");
// Sidebar links route client-side; wait for hydration so the click lands
// (otherwise it's swallowed pre-hydration, the #551 race).
await waitForHydration(page);
});
test("sidebar renders all guide links", async ({ page }) => {
@@ -53,6 +57,7 @@ test.describe("Docs Sidebar - Guide Section", () => {
test.describe("Docs Sidebar - API Reference Section", () => {
test("clicking REST API navigates correctly", async ({ page }) => {
await page.goto("/guide/getting-started");
await waitForHydration(page);
await page.locator(".VPSidebar a, aside a").filter({ hasText: "REST API" }).click();
await expect(page).toHaveURL(/\/api\/rest/);
await expect(page.getByText("REST API Reference")).toBeVisible();
@@ -60,12 +65,14 @@ test.describe("Docs Sidebar - API Reference Section", () => {
test("clicking Image engine navigates correctly", async ({ page }) => {
await page.goto("/api/rest");
await waitForHydration(page);
await page.locator(".VPSidebar a, aside a").filter({ hasText: "Image engine" }).click();
await expect(page).toHaveURL(/\/api\/image-engine/);
});
test("clicking AI engine navigates correctly", async ({ page }) => {
await page.goto("/api/rest");
await waitForHydration(page);
await page.locator(".VPSidebar a, aside a").filter({ hasText: "AI engine" }).click();
await expect(page).toHaveURL(/\/api\/ai/);
});