Skip to content

test(devtools): make e2e behaviour-driven and leaner #1045

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
antfu merged 2 commits into from
Jul 27, 2026
Merged

test(devtools): make e2e behaviour-driven and leaner #1045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b39bd59
fix(devtools): open the DevTools panel via the plain dock store
antfubot Jul 27, 2026
78c26fb
test(devtools): make e2e behaviour-driven and leaner
antfubot Jul 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"test:e2e:all": "pnpm test:e2e:prebuild && playwright test --config tests/e2e/playwright.config.ts",
"test:e2e:dev": "PW_PROJECT='*:dev' playwright test --config tests/e2e/playwright.config.ts",
"test:e2e:built": "pnpm test:e2e:prebuild && PW_PROJECT='*:built' playwright test --config tests/e2e/playwright.config.ts",
"test:e2e:prebuild": "pnpm -C playgrounds/empty exec nuxt build && pnpm -C playgrounds/spa exec nuxt build && pnpm -C playgrounds/tab-pinia exec nuxt build && pnpm -C playgrounds/tab-seo exec nuxt build",
"test:e2e:prebuild": "pnpm -C playgrounds/empty exec nuxt build && pnpm -C playgrounds/spa exec nuxt build",
"test:e2e:ui": "playwright test --config tests/e2e/playwright.config.ts --ui",
"docs": "pnpm -C docs install && nuxi dev docs",
"docs:build": "pnpm -C docs install && CI=true nuxi generate docs",
Expand Down
6 changes: 3 additions & 3 deletions packages/devtools/src/runtime/plugins/view/client.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,19 +72,19 @@ export async function setupDevToolsClient({
close() {
const ctx = getViteDevToolsContext()
if (ctx)
ctx.panel.store.value.open = false
ctx.panel.store.open = false
},
open() {
const ctx = getViteDevToolsContext()
if (ctx) {
ctx.panel.store.value.open = true
ctx.panel.store.open = true
ctx.docks.switchEntry(NUXT_DOCK_GROUP_ID)
}
},
async navigate(path: string) {
const ctx = getViteDevToolsContext()
if (ctx) {
ctx.panel.store.value.open = true
ctx.panel.store.open = true
ctx.docks.switchEntry(NUXT_DOCK_GROUP_ID)
}
await client.hooks.callHook('host:action:navigate', path)
Expand Down
94 changes: 45 additions & 49 deletions tests/e2e/fixtures/devtools.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,49 @@
import type { FrameLocator } from '@playwright/test'
import type { FrameLocator, Page } from '@playwright/test'
import { test as base, expect } from '@playwright/test'

// Vite DevTools renders the Nuxt DevTools dock entry as an iframe nested inside its
// own shadow DOM. The iframe has no stable id, so we target by src.
// The Nuxt DevTools client renders inside an iframe that Vite DevTools mounts in
// its own shadow DOM. The iframe has no stable id, so we target it by src.
const IFRAME_SELECTOR = 'iframe[src*="__nuxt_devtools__/client"]'

interface DevToolsFixtures {
playground: string
mode: 'dev' | 'built'
/** Open the DevTools panel and wait for the client app to hydrate. */
openDevTools: () => Promise<void>
/** Navigate the open DevTools client to a tab route (e.g. `/modules/modules`). */
navigateTab: (path: string) => Promise<void>
/** Locator scoped to the DevTools client iframe. */
devtoolsFrame: () => FrameLocator
}

// e2e servers run with `VITE_DEVTOOLS_DISABLE_CLIENT_AUTH=true`, which trusts the
// *server* peer (so RPC is allowed) but never flips the *client-side* trust flag.
// Until it does, Vite DevTools never subscribes to the dock list, so no dock —
// and therefore no Nuxt group — ever appears. Nudge the flag here. This is purely
// test-environment plumbing; it is not something the tests assert on.
async function ensureDockReady(page: Page): Promise<void> {
await page.waitForFunction(
() => Boolean((globalThis as any).__NUXT_DEVTOOLS_HOST__?.devtools),
null,
{ timeout: 30_000 },
)
await page.waitForFunction(
() => Boolean((globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__?.rpc),
null,
{ timeout: 30_000 },
)
await page.evaluate(() => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
if (ctx?.rpc && !ctx.rpc.isTrusted)
ctx.rpc.events?.emit?.('rpc:is-trusted:updated', true)
})
await page.waitForFunction(
() => Boolean((globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__?.docks?.entries?.length),
null,
{ timeout: 30_000 },
)
}

export const test = base.extend<DevToolsFixtures>({
// eslint-disable-next-line no-empty-pattern
playground: async ({}, use, info) => {
Expand All @@ -25,58 +56,23 @@ export const test = base.extend<DevToolsFixtures>({

openDevTools: async ({ page }, use) => {
await use(async () => {
// Wait for the Vite DevTools client context to be injected.
await page.waitForFunction(
() => Boolean((globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__?.rpc),
null,
{ timeout: 30_000 },
)
// Devframe 0.7 only fetches the `devframe:docks` shared state once the
// client is marked trusted (via the `rpc:is-trusted:updated` event).
// `VITE_DEVTOOLS_DISABLE_CLIENT_AUTH` trusts the *server* peer — so RPC
// calls are allowed — but never flips the *client-side* trust flag, so the
// dock list would otherwise stay empty forever. Nudge it here so the docks
// subscription kicks off. (Built/preview mode uses the static RPC backend,
// which is already trusted, so this is a harmless no-op there.)
await page.evaluate(() => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
if (ctx?.rpc && !ctx.rpc.isTrusted)
ctx.rpc.events?.emit?.('rpc:is-trusted:updated', true)
})
await page.waitForFunction(
() => Boolean((globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__?.docks?.entries?.length),
null,
{ timeout: 30_000 },
)
// Drive Vite DevTools directly: open the panel, then switch the active
// dock entry to nuxt:devtools (idempotent; safe to call when already open).
await page.evaluate(async () => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
ctx.panel.store.open = true
await ctx.docks.switchEntry('nuxt:devtools')
})
// Iframe creation is async after switchEntry resolves. Poll the dock entry
// state until its DOM iframe is attached.
await page.waitForFunction(() => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
const state = ctx?.docks?.getStateById?.('nuxt:devtools')
return Boolean(state?.domElements?.iframe?.isConnected)
}, null, { timeout: 30_000 })
// Then wait for the inner app to hydrate. Generous timeout: playgrounds that
// use `../../local` spawn a separate Nuxt dev subprocess for the devtools
// client, and its first Vite compile is slow on cold start.
await page.frameLocator(IFRAME_SELECTOR).locator('#nuxt-devtools-app').waitFor({ state: 'attached', timeout: 90_000 })
await ensureDockReady(page)
// Drive the *public* host API the same way the keyboard shortcut / host app
// would — no reaching into Vite DevTools' internal panel/dock state.
await page.evaluate(() => (globalThis as any).__NUXT_DEVTOOLS_HOST__.devtools.open())
// Wait for the client app inside the iframe to hydrate.
await page.frameLocator(IFRAME_SELECTOR)
.locator('#nuxt-devtools-app')
.waitFor({ state: 'attached', timeout: 60_000 })
})
},

navigateTab: async ({ page }, use) => {
await use(async (path: string) => {
// Drive navigation through the documented host hook.
// (`__NUXT_DEVTOOLS_HOST__.devtools.navigate` itself currently writes to
// `ctx.panel.store.value.open`, which assumes a Vue ref but the kit exposes
// a plain object — using the hook avoids that landmine.)
// Navigate via the documented host API (`devtools.navigate`) rather than
// poking the frame-nav hook or router directly.
await page.evaluate(
p => (window as any).__NUXT_DEVTOOLS_HOST__.hooks.callHook('host:action:navigate', p),
p => (globalThis as any).__NUXT_DEVTOOLS_HOST__.devtools.navigate(p),
path,
)
})
Expand Down
45 changes: 28 additions & 17 deletions tests/e2e/playwright.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,14 @@ const MODES = ['dev', 'built'] as const
type Mode = typeof MODES[number]
type Playground = typeof PLAYGROUNDS[number]

// Dev mode exercises the DevTools UI on every playground. Built (production
// preview) mode only checks the app still renders — Nuxt DevTools no-ops
// outside dev — so we run it on just the two distinct rendering targets:
// `empty` (SSR) and `spa` (ssr:false). Building `tab-pinia`/`tab-seo` too, only
// to load a page, is wasted time (and `tab-seo`'s prod build has a known
// auto-import bug). `tab-pinia`/`tab-seo` are therefore dev-only playgrounds.
const BUILT_PLAYGROUNDS = new Set<Playground>(['empty', 'spa'])

interface Spec {
name: string
playground: Playground
Expand All @@ -19,17 +27,19 @@ interface Spec {
}

const allSpecs: Spec[] = PLAYGROUNDS.flatMap((playground, idx) =>
MODES.map((mode): Spec => ({
name: `${playground}:${mode}`,
playground,
mode,
port: 13000 + idx * 10 + (mode === 'dev' ? 0 : 1),
})),
MODES
.filter(mode => mode === 'dev' || BUILT_PLAYGROUNDS.has(playground))
.map((mode): Spec => ({
name: `${playground}:${mode}`,
playground,
mode,
port: 13000 + idx * 10 + (mode === 'dev' ? 0 : 1),
})),
)

// PW_PROJECT supports glob-style filtering (e.g. `*:dev`, `empty:*`, `empty:dev`).
// Used by the npm scripts to avoid booting all 6 servers when only one mode is needed.
// Falls back to all specs when unset.
// Used by the npm scripts to avoid booting every server when only one mode is
// needed. Falls back to all specs when unset.
const filter = process.env.PW_PROJECT
const specs = allSpecs.filter(s => matchesProjectFilter(s.name, filter))

Expand All @@ -38,9 +48,9 @@ export default defineConfig({
fullyParallel: false,
workers: 1,
forbidOnly: !!process.env.CI,
// First iframe test for `../../local` playgrounds (tab-pinia, tab-seo) can flake
// on cold subprocess boot; one retry covers it.
retries: 1,
// The client SPA's first Vite compile is slow on a cold server; one retry
// absorbs that startup flake without masking real, reproducible failures.
retries: process.env.CI ? 1 : 0,
reporter: process.env.CI
? [['list'], ['github'], ['html', { open: 'never', outputFolder: 'playwright-report' }]]
: 'list',
Expand All @@ -59,10 +69,11 @@ export default defineConfig({
},
metadata: { playground: s.playground, mode: s.mode },
})),
// Production builds are done once, up front, by `pnpm test:e2e:prebuild`
// (see package.json). The servers below only spawn `dev`/`preview`, which
// boot in seconds.
webServer: specs.map((s) => {
const target = `playgrounds/${s.playground}`
// Builds happen in globalSetup; webServer here only spawns dev or preview,
// both of which boot in seconds.
const command = s.mode === 'dev'
? `pnpm -C ${target} exec nuxt dev --port ${s.port}`
: `pnpm -C ${target} exec nuxt preview --port ${s.port}`
Expand All @@ -79,12 +90,12 @@ export default defineConfig({
stdout: 'pipe' as const,
stderr: 'pipe' as const,
env: {
// Vite DevTools requires per-client trust by default. For e2e we're spawning
// ephemeral servers, so disable auth — any browser may connect.
// Vite DevTools requires per-client trust by default. For e2e we're
// spawning ephemeral servers, so disable auth — any browser may connect.
VITE_DEVTOOLS_DISABLE_CLIENT_AUTH: 'true',
// Bind the main app server to all interfaces. Default `nuxt dev`/`preview`
// Bind the app server to all interfaces. Default `nuxt dev`/`preview`
// on macOS binds only to IPv6, so 127.0.0.1 requests get refused. We use
// `localhost` baseURL above to match the Vite DevTools websocket bind.
// a `localhost` baseURL above to match the Vite DevTools websocket bind.
HOST: '0.0.0.0',
...(s.playground === 'empty'
? { NUXT_DEVTOOLS_CODE_SERVER_BIN: 'nuxt-devtools-e2e-missing-code-server' }
Expand Down
48 changes: 9 additions & 39 deletions tests/e2e/specs/code-server.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ import { expect, test } from '../fixtures/devtools'
const CODE_SERVER_DOCK_ID = 'devframes_plugin_code-server'
const CODE_SERVER_STATUS_RPC = 'devframes:plugin:code-server:status'

test('mounts Code Server in the Nuxt group and reports a missing binary without starting it', async ({ page, openDevTools, mode, playground }) => {
test('reports a missing editor binary without starting a process', async ({ page, openDevTools, mode, playground }) => {
// `empty`'s config points Code Server at a deliberately missing binary
// (`NUXT_DEVTOOLS_CODE_SERVER_BIN`), so detection is deterministic everywhere.
test.skip(mode !== 'dev' || playground !== 'empty', 'missing-binary fixture runs only in empty:dev')

await page.goto('/')
Expand All @@ -15,46 +17,23 @@ test('mounts Code Server in the Nuxt group and reports a missing binary without
return ctx?.docks?.entries?.some((entry: any) => entry.id === id)
}, CODE_SERVER_DOCK_ID, { timeout: 30_000 })

const entry = await page.evaluate((id) => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
return ctx.docks.entries.find((candidate: any) => candidate.id === id)
}, CODE_SERVER_DOCK_ID)
expect(entry).toMatchObject({
id: CODE_SERVER_DOCK_ID,
type: 'iframe',
groupId: 'nuxt',
category: 'modules',
})

const status = await page.evaluate(async (rpcName) => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
return ctx.rpc.call(rpcName)
}, CODE_SERVER_STATUS_RPC)
expect(status).toMatchObject({
detection: {
checked: true,
installed: false,
bin: 'nuxt-devtools-e2e-missing-code-server',
backend: 'code-server',
mode: 'local',
},
server: { status: 'stopped' },
})

// Open the Code Server member the way a user would.
await page.evaluate(async (id) => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
await ctx.docks.switchEntry(id)
}, CODE_SERVER_DOCK_ID)
Comment on lines +20 to 24

@coderabbitai coderabbitai Bot Jul 27, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Open Code Server through the dock UI, not its internal registry.

This directly drives __VITE_DEVTOOLS_CLIENT_CONTEXT__.docks.switchEntry, so the test can pass while the user cannot select the Code Server dock. Select the visible dock entry instead.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@tests/e2e/specs/code-server.spec.ts` around lines 20 - 24, Update the Code
Server opening step in the e2e test to select the visible dock entry through the
page UI rather than calling __VITE_DEVTOOLS_CLIENT_CONTEXT__.docks.switchEntry
via page.evaluate. Use the dock entry’s user-facing selector or label and
preserve the existing CODE_SERVER_DOCK_ID target.


// The user sees the "no editor" empty state (the binary can't be found).
const codeServerFrame = page.frameLocator(`iframe[src*="${CODE_SERVER_DOCK_ID}"]`)
await expect(codeServerFrame.getByRole('heading', { name: 'No editor found' }))
.toBeVisible({ timeout: 30_000 })

// Opening the member performs detection only; it must not start a process.
const statusAfterOpen = await page.evaluate(async (rpcName) => {
// Opening the member performs detection only — it must not launch a process.
const status = await page.evaluate(async (rpcName) => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
return ctx.rpc.call(rpcName)
}, CODE_SERVER_STATUS_RPC)
expect((statusAfterOpen as any).server.status).toBe('stopped')
expect((status as any).server.status).toBe('stopped')
})

test('launches an installed Code Server with authenticated iframe handoff', async ({ page, openDevTools, mode, playground }) => {
Expand All @@ -70,15 +49,6 @@ test('launches an installed Code Server with authenticated iframe handoff', asyn
return ctx?.docks?.entries?.some((entry: any) => entry.id === id)
}, CODE_SERVER_DOCK_ID, { timeout: 30_000 })

const initialStatus = await page.evaluate(async (rpcName) => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
return ctx.rpc.call(rpcName)
}, CODE_SERVER_STATUS_RPC)
expect(initialStatus).toMatchObject({
detection: { checked: true, installed: true, backend: 'code-server' },
server: { status: 'stopped' },
})

await page.evaluate(async (id) => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
await ctx.docks.switchEntry(id)
Expand Down
57 changes: 18 additions & 39 deletions tests/e2e/specs/data-inspector.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,33 @@
import { expect, test } from '../fixtures/devtools'

// Vite DevTools UI (and its dock registry) is dev-mode only.
test.skip(({ mode }) => mode !== 'dev', 'devtools UI is dev-mode only')
// Plugin integration behaviour is playground-independent — run once, on `empty`.
test.skip(({ playground, mode }) => playground !== 'empty' || mode !== 'dev', 'Data Inspector: empty playground, dev mode')

// The Data Inspector devframe's default id — also its RPC namespace.
const DATA_INSPECTOR_ID = 'devframes:plugin:data-inspector'
const NUXT_SOURCE_ID = 'nuxt:application'
const EXAMPLE_SOURCE_ID = 'devframes:plugin:data-inspector:example'

test('mounts the Data Inspector in the Nuxt group exposing only the Nuxt source', async ({ page, openDevTools }) => {
await page.goto('/')
await openDevTools()

// The Data Inspector dock member registers a moment after the group; poll for it.
await page.waitForFunction((id) => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
return ctx?.docks?.entries?.some((entry: any) => entry.id === id)
}, DATA_INSPECTOR_ID, { timeout: 30_000 })

// Mounted as a member of the `nuxt` group, in the `advanced` in-group
// category (the definition defaults to `~builtin`; the per-mount override
// must win).
const entry = await page.evaluate((id) => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
return ctx.docks.entries.find((e: any) => e.id === id)
}, DATA_INSPECTOR_ID)
expect(entry).toMatchObject({
id: DATA_INSPECTOR_ID,
type: 'iframe',
groupId: 'nuxt',
category: 'advanced',
})

// The source picker contains the Nuxt source and NOT the built-in example.
await expect.poll(async () => {
return page.evaluate(async () => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
const sources = await ctx.rpc.call('devframes:plugin:data-inspector:sources')
return (sources as { id: string }[]).map(s => s.id)
})
}, { timeout: 30_000 }).toContain(NUXT_SOURCE_ID)

const sourceIds = await page.evaluate(async () => {
async function inspectorSources(page: any): Promise<string[]> {
return page.evaluate(async () => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
const sources = await ctx.rpc.call('devframes:plugin:data-inspector:sources')
return (sources as { id: string }[]).map(s => s.id)
})
}

// What the user actually gets from the integration: the Data Inspector Nuxt
// DevTools mounts inspects the *live Nuxt app*, and hides the plugin's own demo
// source. We assert that observable contract rather than the dock entry's
// internal registry shape.
test('exposes the live Nuxt application as a data source and hides the demo source', async ({ page, openDevTools }) => {
await page.goto('/')
await openDevTools()

await expect.poll(() => inspectorSources(page), { timeout: 30_000 }).toContain(NUXT_SOURCE_ID)

const sourceIds = await inspectorSources(page)
expect(sourceIds).not.toContain(EXAMPLE_SOURCE_ID)

// Querying at least `nuxt` and `vite` against the live source succeeds.
// Querying the live source returns data (the integration is wired end to end).
const results = await page.evaluate(async (sourceId) => {
const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
const nuxt = await ctx.rpc.call('devframes:plugin:data-inspector:query', sourceId, 'nuxt')
Expand Down
Loading
Loading