test(e2e): deep Playwright coverage for the React Scan overlay UI#459
Conversation
Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
…der load Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| await clickToolbarControl(inspectButton(page)); | ||
| await waitForInspectStateKind(page, 'inspecting'); | ||
| expect(await getInspectStateKind(page)).toBe('inspecting'); | ||
| }); |
There was a problem hiding this comment.
Test doesn't verify panel teardown it claims to
Low Severity
The test title says "toggling inspect button off while focused tears down the panel" but the test body never asserts the inspector panel is hidden. It only verifies the state transitions to 'inspecting' — not 'inspect-off' as the title implies. Other tests in this file explicitly check inspectorPanel visibility (lines 39, 93), establishing the pattern this test omits. The inline comment ("advances to 'inspecting'") contradicts the title ("off"), and the core claim — panel teardown — goes unverified.
Reviewed by Cursor Bugbot for commit 7508b4e. Configure here.
Co-authored-by: Aiden Bai <aidenybai@users.noreply.github.com>
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| // From "focused" the inspect button advances to "inspecting". | ||
| await clickToolbarControl(inspectButton(page)); | ||
| await waitForInspectStateKind(page, 'inspecting'); | ||
| expect(await getInspectStateKind(page)).toBe('inspecting'); |
There was a problem hiding this comment.
| // From "focused" the inspect button advances to "inspecting". | |
| await clickToolbarControl(inspectButton(page)); | |
| await waitForInspectStateKind(page, 'inspecting'); | |
| expect(await getInspectStateKind(page)).toBe('inspecting'); | |
| // From "focused" the inspect button toggles to "inspect-off". | |
| await clickToolbarControl(inspectButton(page)); | |
| await waitForInspectStateKind(page, 'inspect-off'); | |
| expect(await getInspectStateKind(page)).toBe('inspect-off'); | |
| await expect(page.locator(TOOLBAR_SELECTORS.inspectorPanel)).not.toBeVisible(); |
Test expects wrong state transition and missing panel teardown assertion when toggling inspect button off while focused
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
There are 2 total unresolved issues (including 1 from previous review).
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 99fbf64. Configure here.
| await notificationsButton(page).click(); | ||
| await expect(historyHeader(page)).toBeVisible(); | ||
| expect(await getInspectStateKind(page)).toBe('inspect-off'); | ||
| }); |
There was a problem hiding this comment.
Test never activates inspection before asserting it turns off
Medium Severity
The test "opening notifications turns inspection off" never enters inspect mode before opening the notifications panel. Since the default state after gotoFixture is already inspect-off (confirmed by the existing inspector.spec.ts), the assertion expect(await getInspectStateKind(page)).toBe('inspect-off') trivially passes without actually verifying that opening notifications causes inspection to turn off. The test would pass even if the notifications panel had zero effect on inspection state. An enterInspectMode(page) call is needed before clicking the notifications button.
Reviewed by Cursor Bugbot for commit 99fbf64. Configure here.
2 participants
Summary
The existing e2e suite mostly pokes at React Scan internals through
window.__REACT_SCAN__and rarely drives the actual Preact overlay UI. This PR adds deep, interaction-driven Playwright tests that exercise the real overlay interface mounted inside the shadow root — clicking the toolbar controls, running the full inspect→focus→inspect flow, opening the notifications panel, and asserting widget container behavior.Playwright CSS locators pierce the open shadow root, so the tests target the overlay's actual buttons, toggles, and panels rather than reaching into signals.
What's added
New helpers in
e2e/helpers.ts:TOOLBAR_SELECTORS) and anInspectStateKindtype.getInspectStateKind/waitForInspectStateKind,isOutlineInstrumentationPaused.toolbarWidget,inspectButton,notificationsButton,outlineToggle) andwaitForToolbarReady.enterInspectModeandfocusComponent— the latter drives raw pointer coordinates because the overlay's full-screen event-catcher obscures element-targeted clicks while inspecting.clickToolbarControl(dispatches the click directly so resize handles overlapping a control can't swallow it) andblurOverlay(restores page focus for the global Escape shortcut).New specs:
e2e/overlay-toolbar.spec.ts— toolbar renders with its controls; FPS meter paints; inspect button enters/exits inspecting mode and its icon color reflects state; the outline toggle pauses/resumes instrumentation and persistsreact-scan-optionsto localStorage.e2e/overlay-inspector.spec.ts— full inspect→focus flow: overlay canvas activates, clicking a component focuses it and opens the inspector panel + component tree, the header shows the component name, the copy button appears, the close button returns toinspect-off, Escape steps focused→inspecting, and re-focusing keeps the inspector open.e2e/overlay-notifications.spec.ts— notifications button opens/closes the panel (verified via widget expansion), opening turns inspection off, the slowdown-history chrome renders, and a deliberately slow interaction is recorded and surfaced.e2e/overlay-widget.spec.ts— widget mounts with expected attributes, fades in, exposes all four resize handles, persists widget settings to localStorage, survives repeated host-app interactions, and expands when a panel opens.Testing
pnpm build✅pnpm test:e2e✅ (all new overlay tests pass)--repeat-each(84/84 and 52/52 passing) to eliminate flakiness from the FPS sampling interval and from React Scan incidentally recording a slow render under CPU contention.Notes
pnpm lint/pnpm format:check/pnpm typecheckissues are untouched and unrelated to these tests (e.g.ban-ts-commentincore/utils.ts, a deprecated tsconfig option inpackages/extension, and the repo not being oxfmt-formatted). The new files follow the established style of the existinge2e/specs.