@next/playwright 16.2.0-canary.71

package/README.md

@@ -0,0 +1,107 @@
+# @next/playwright
+
+> - **Status:** Experimental. This API is not yet stable.
+> - **Requires:** [Cache Components](https://nextjs.org/docs) to be enabled.
+
+Playwright helpers for testing Next.js applications.
+
+## Instant Navigation Testing
+
+An **instant navigation** commits immediately without waiting for data fetching.
+The cached shell — including any Suspense loading boundaries — renders right
+away, and dynamic data streams in afterward. The shell is the instant part, not
+the full page.
+
+`instant()` lets you test whether a route achieves this. While the callback is
+active, navigations render only cached and prefetched content. Dynamic data is
+deferred until the callback returns. This lets you make deterministic assertions
+against the shell without race conditions.
+
+The tool assumes a warm cache: all prefetches have completed and all cacheable
+data is available. This way you're testing whether the route is *structured
+correctly* for instant navigation, independent of network timing. If content you
+expected to be cached is missing inside the callback, it points to a problem — a
+missing `use cache` directive, a misplaced Suspense boundary, or a similar gap.
+
+### Examples
+
+**Loading shell appears instantly** (dynamic content behind a Suspense boundary):
+
+```ts
+import { instant } from '@next/playwright'
+
+test('shows loading shell during navigation', async ({ page }) => {
+  await page.goto('/')
+
+  await instant(page, async () => {
+    await page.click('a[href="/dashboard"]')
+
+    // The loading shell is visible — dynamic data is deferred
+    await expect(page.locator('[data-testid="loading"]')).toBeVisible()
+  })
+
+  // After instant() returns, dynamic data streams in normally
+  await expect(page.locator('[data-testid="content"]')).toBeVisible()
+})
+```
+
+**Fully instant navigation** (all content is cached):
+
+```ts
+test('navigates to profile instantly', async ({ page }) => {
+  await page.goto('/')
+
+  await instant(page, async () => {
+    await page.click('a[href="/profile"]')
+
+    // All content renders immediately
+    await expect(page.locator('[data-testid="profile-name"]')).toBeVisible()
+    await expect(page.locator('[data-testid="profile-bio"]')).toBeVisible()
+  })
+})
+```
+
+### Enabling in production builds
+
+In development (`next dev`), the testing API is available by default. In
+production builds, it is disabled unless you explicitly opt in:
+
+```js
+// next.config.js
+module.exports = {
+  experimental: {
+    exposeTestingApiInProductionBuild: true,
+  },
+}
+```
+
+This is not meant to be deployed to live production sites. Only enable it in
+controlled testing environments like preview deployments or CI.
+
+## How it works
+
+`instant()` sets a cookie that tells Next.js to serve only cached data during
+navigations. While the cookie is active:
+
+- **Client-side navigations**: The router renders only what is available in the
+  prefetch cache. Dynamic data is deferred until the cookie is cleared.
+- **Server renders (initial load, reload, MPA navigation)**: The server responds
+  with only the static shell, without any per-request dynamic data.
+
+When the callback completes, the cookie is cleared and normal behavior resumes.
+
+## Design
+
+The layering between this package and Next.js is intentionally very thin. This
+serves as a reference implementation that other testing frameworks and dev tools
+can replicate with minimal effort. The entire mechanism is a single cookie:
+
+```ts
+// Set the cookie to enter instant mode
+document.cookie = 'next-instant-navigation-testing=1; path=/'
+
+// ... run assertions ...
+
+// Clear the cookie to resume normal behavior
+document.cookie = 'next-instant-navigation-testing=; path=/; max-age=0'
+```

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Minimal interfaces for Playwright's Page and BrowserContext. We use
+ * structural types rather than importing from a specific Playwright package
+ * so this works with any version of playwright, playwright-core, or
+ * @playwright/test.
+ */
+interface PlaywrightBrowserContext {
+    addCookies(cookies: Array<{
+        name: string;
+        value: string;
+        url?: string;
+        domain?: string;
+        path?: string;
+    }>): Promise<void>;
+    clearCookies(options?: {
+        name?: string;
+    }): Promise<void>;
+}
+interface PlaywrightPage {
+    url(): string;
+    context(): PlaywrightBrowserContext;
+}
+/**
+ * Runs a function with instant navigation enabled. Within this scope,
+ * navigations render the prefetched UI immediately and wait for the
+ * callback to complete before streaming in dynamic data.
+ *
+ * Uses the cookie-based protocol: setting the cookie acquires the
+ * navigation lock (via CookieStore change event), and clearing it
+ * releases the lock.
+ *
+ * If the page is already loaded, the URL is inferred
+ * automatically. For a fresh page (before any navigation), pass
+ * `baseURL` so the cookie can be scoped to the correct domain:
+ *
+ *   await instant(page, async () => {
+ *     await page.goto(url)
+ *     // ...
+ *   }, { baseURL: 'http://localhost:3000' })
+ */
+export declare function instant<T>(page: PlaywrightPage, fn: () => Promise<T>, options?: {
+    baseURL?: string;
+}): Promise<T>;
+export {};

package/dist/index.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.instant = instant;
+const INSTANT_COOKIE = 'next-instant-navigation-testing';
+/**
+ * Runs a function with instant navigation enabled. Within this scope,
+ * navigations render the prefetched UI immediately and wait for the
+ * callback to complete before streaming in dynamic data.
+ *
+ * Uses the cookie-based protocol: setting the cookie acquires the
+ * navigation lock (via CookieStore change event), and clearing it
+ * releases the lock.
+ *
+ * If the page is already loaded, the URL is inferred
+ * automatically. For a fresh page (before any navigation), pass
+ * `baseURL` so the cookie can be scoped to the correct domain:
+ *
+ *   await instant(page, async () => {
+ *     await page.goto(url)
+ *     // ...
+ *   }, { baseURL: 'http://localhost:3000' })
+ */
+async function instant(page, fn, options) {
+    // Acquire the lock by setting the cookie via the browser context. This
+    // ensures the cookie is present even on the very first navigation.
+    // The cookie triggers the CookieStore change event in
+    // navigation-testing-lock.ts, which acquires the in-memory navigation lock.
+    const { hostname } = new URL(resolveURL(page, options));
+    await page
+        .context()
+        .addCookies([
+        { name: INSTANT_COOKIE, value: '1', domain: hostname, path: '/' },
+    ]);
+    try {
+        return await fn();
+    }
+    finally {
+        // Release the lock by clearing the cookie. For SPA navigations, this
+        // triggers the CookieStore change event which resolves the in-memory
+        // lock. For MPA navigations (reload, plain anchor), the listener in
+        // app-bootstrap.ts triggers a page reload to fetch dynamic data.
+        await page.context().clearCookies({ name: INSTANT_COOKIE });
+    }
+}
+/**
+ * Resolves the URL to scope the instant navigation cookie to. Prefers
+ * an explicit `baseURL` option, then falls back to the page's current URL.
+ * Throws a descriptive error if neither is available (e.g. fresh page
+ * before any navigation).
+ */
+function resolveURL(page, options) {
+    var _a;
+    const url = (_a = options === null || options === void 0 ? void 0 : options.baseURL) !== null && _a !== void 0 ? _a : page.url();
+    if (url && url !== 'about:blank') {
+        return url;
+    }
+    const error = new Error(`Could not infer the base URL of the application.
+
+instant() needs to know the base URL so it can configure the
+browser before the first page load. If the page is already
+loaded, the base URL is detected automatically.
+Otherwise, you can fix this in one of two ways:
+
+1. Pass a baseURL option:
+
+  await instant(page, async () => {
+    await page.goto('http://localhost:3000')
+    // ...
+  }, { baseURL: 'http://localhost:3000' })
+
+  Tip: If you use baseURL in your Playwright config, you can
+  get it from the test fixture:
+
+    test('my test', async ({ page, baseURL }) => {
+      await instant(page, async () => {
+        // ...
+      }, { baseURL })
+    })
+
+2. Navigate to a page before calling instant():
+
+  await page.goto('http://localhost:3000')
+  await instant(page, async () => {
+    // ...
+  })`);
+    // Remove resolveURL and instant from the stack trace so the error
+    // points at the caller's code.
+    Error.captureStackTrace(error, instant);
+    throw error;
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@next/playwright",
+  "version": "16.2.0-canary.71",
+  "repository": {
+    "url": "vercel/next.js",
+    "directory": "packages/next-playwright"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "node ../../scripts/rm.mjs dist && tsc -d -p tsconfig.json",
+    "prepublishOnly": "cd ../../ && turbo run build",
+    "dev": "tsc -d -w -p tsconfig.json",
+    "typescript": "tsec --noEmit -p tsconfig.json"
+  },
+  "devDependencies": {
+    "typescript": "5.9.2"
+  }
+}