[codex] Add diagnostic failure regression specs

[BLamy]

Summary

Adds a second set of intentional failure specs to the Replay MCP lab shells. Each framework now has diagnostic-regressions.spec.ts under tests/failures.

The new specs exercise the app before failing so Replay recordings include richer context for MCP tool demos:

• network, localStorage, console log/warn/error, and a wrong storage assertion
• Redux, Zustand, TanStack Query success/failure, and a wrong state assertion
• DOM overlap interaction, screenshot capture, and a wrong layout assertion

Validation

• npm run typecheck
• node ../replay-mcp-lab-core/scripts/run-expected-failures.mjs playwright test tests/failures/diagnostic-regressions.spec.ts --project chromium in Vite
• Same expected-failure command in Next.js
• Same expected-failure command in TanStack Start

All three expected-failure runs reached the intended assertions and exited successfully through the wrapper.

[replay-io]

replay-mcp-lab-next#‍5.1

Status	Complete ↗︎
Commit	c8b0232
Results	❌ 4 Failed intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity

replay-mcp-lab-next#‍7.1

Status	Complete ↗︎
Commit	95971d4
Results	❌ 4 Failed intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity

replay-mcp-lab-tanstack-start#‍5.1

Status	Complete ↗︎
Commit	c8b0232
Results	❌ 4 Failed intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity

replay-mcp-lab-tanstack-start#‍7.1

Status	Complete ↗︎
Commit	95971d4
Results	❌ 4 Failed intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity

replay-mcp-lab-vite#‍5.1

Status	Complete ↗︎
Commit	c8b0232
Results	❌ 4 Failed intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity

replay-mcp-lab-vite#‍7.1

Status	Complete ↗︎
Commit	95971d4
Results	❌ 4 Failed intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity

[replay-test]

🔴 Replay failure analysis

Test: intentional diagnostic failure captures layout overlap screenshot context
Recording: Open in Replay →

---

Root cause  

The .layout-child CSS class in replay-mcp-lab-core/src/styles.css (line 260) sets position: absolute on all layout child elements. The test at line 55 of diagnostic-regressions.spec.ts asserts that layout-child-overlap has position: "static", but this element always has position: absolute — neither the .overlap nor .expanded class modifiers override the position property. This is an intentional diagnostic failure (as indicated by the test name) designed to produce a known failing recording for testing Replay's diagnostic tooling.

Failure sequence

Step	What happened
1	Test navigates to /dom-layout and waits for hydration.
2	Test clicks "Toggle Overlap" button, adding expanded class to the layout-child-overlap element.
3	Test verifies layout warning selector text is visible (passes).
4	Test takes a screenshot (passes).
5	Test asserts getByTestId('layout-child-overlap') has CSS position: "static" — but .layout-child base class sets position: absolute (styles.css:260), and neither .overlap nor .expanded overrides it. Assertion fails.

Suggested fix

#	Fix	Detail
1	Change the expected CSS value	In diagnostic-regressions.spec.ts line 55, change "static" to "absolute" to match the actual CSS.
2	Alternatively, if the element should truly be `position	static, remove position: absolutefrom the.layout-childrule instyles.css` line 260 (but this would break the visual layout of the overlapping demo). If the test is meant to remain a deliberate failure for diagnostic tooling validation, no fix is needed — the failure is working as designed.

Affected files: replay-mcp-lab-core/src/styles.css, replay-mcp-lab-next/tests/failures/diagnostic-regressions.spec.ts

Category: test_issue  ·  Confidence: high — CSS rule is explicit (position: absolute, line 260), runtime InspectElement confirms "absolute", and the test name says "intentional diagnostic failure." Full causal chain is clear.

Suggested follow-up:
Verify whether this test is expected to remain in CI as a permanent intentional failure (for exercising Replay diagnostic capture on failing recordings), or if it was accidentally committed to a branch that runs in CI gating. If it's meant to be a permanent fixture, consider moving it to a dedicated test suite excluded from CI pass/fail gating.

Fix prompt (for coding agent)

This is an intentionally failing test — the test name starts with "intentional diagnostic failure." If you want to make it pass regardless, edit replay-mcp-lab-next/tests/failures/diagnostic-regressions.spec.ts line 55:

-  await expect(page.getByTestId("layout-child-overlap")).toHaveCSS("position", "static", {
+  await expect(page.getByTestId("layout-child-overlap")).toHaveCSS("position", "absolute", {
     timeout: 500,
   });

Do NOT change the CSS in replay-mcp-lab-core/src/styles.css — position: absolute is required for the overlapping layout demo to function correctly. Also apply the same change to the equivalent test files in replay-mcp-lab-tanstack-start/tests/failures/ and replay-mcp-lab-vite/tests/failures/ if they exist with identical content.

Evidence trail

Tool	Finding
PlaywrightSteps test-source Read test source code	Test name is 'intentional diagnostic failure captures layout overlap screenshot context' — the word 'intentional' signals this is a deliberately failing test. Line 55 asserts position: 'static' on the layout-child-overlap element.
Read replay-mcp-lab-core/src/App.tsx:469-502 Read application component	DomLayoutScenario renders a div with className 'layout-child overlap' (and 'expanded' when toggled) and data-testid 'layout-child-overlap'. The toggle only adds/removes the 'expanded' class — no position change.
Read replay-mcp-lab-core/src/styles.css:253-281 Read CSS rules	The .layout-child base class sets position: absolute (line 260). The .overlap and .expanded modifiers do NOT override position. The element is always position: absolute.
Replay InspectElement Verify runtime element state	At end of recording, the element is <div class='layout-child overlap expanded'> — confirmed absolutely positioned, overflowing its parent container.
PlaywrightSteps steps Review Playwright steps	Steps 1-5 pass. Only step 6 — the toHaveCSS('position', 'static') assertion — fails, confirming the issue is solely the mismatched expected value.
RecordingOverview Check recording health	No console errors, no failed network requests, no React exceptions. App is healthy — the failure is purely the test assertion expecting the wrong CSS value.

[replay-test]

replay-mcp-lab-next#‍5.1

Status	Complete ↗︎
Commit	c8b0232
Results	❌ 4 Failed Auto-heal queue: check tests below, then Analyze checked or Fix checked. Links open a confirmation page; checked boxes are read from this comment only after you submit. intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveCSS(expected) failed Locator: getByTestId('layout-child-overlap') Expected: "static" Received: "absolute" Timeout: 500ms ``` intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('storage-state') Expected substring: "ord-9999" Received string: "ord-1001" Timeout: 500ms ``` intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('redux-state') Expected substring: "cancelled" Received string: "orderord-1001statusapprovedrenders1" Timeout: 500ms ``` intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveText(expected) failed Locator: getByTestId('checkout-total') Expected: "$999.00" Received: "$128.40" Timeout: 500ms ``` ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity

replay-mcp-lab-next#‍7.1

Status	Complete ↗︎
Commit	95971d4
Results	❌ 4 Failed Auto-heal queue: check tests below, then Analyze checked or Fix checked. Links open a confirmation page; checked boxes are read from this comment only after you submit. intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveCSS(expected) failed Locator: getByTestId('layout-child-overlap') Expected: "static" Received: "absolute" Timeout: 500ms ``` intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('storage-state') Expected substring: "ord-9999" Received string: "ord-1001" Timeout: 500ms ``` intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('redux-state') Expected substring: "cancelled" Received string: "orderord-1001statusapprovedrenders1" Timeout: 500ms ``` intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveText(expected) failed Locator: getByTestId('checkout-total') Expected: "$999.00" Received: "$128.40" Timeout: 500ms ``` ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity

replay-mcp-lab-tanstack-start#‍5.1

Status	Complete ↗︎
Commit	c8b0232
Results	❌ 4 Failed Auto-heal queue: check tests below, then Analyze checked or Fix checked. Links open a confirmation page; checked boxes are read from this comment only after you submit. intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveCSS(expected) failed Locator: getByTestId('layout-child-overlap') Expected: "static" Received: "absolute" Timeout: 500ms ``` intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('storage-state') Expected substring: "ord-9999" Received string: "ord-1001" Timeout: 500ms ``` intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('redux-state') Expected substring: "cancelled" Received string: "orderord-1001statusapprovedrenders1" Timeout: 500ms ``` intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveText(expected) failed Locator: getByTestId('checkout-total') Expected: "$999.00" Received: "$128.40" Timeout: 500ms ``` ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity

replay-mcp-lab-tanstack-start#‍7.1

Status	Complete ↗︎
Commit	95971d4
Results	❌ 4 Failed Auto-heal queue: check tests below, then Analyze checked or Fix checked. Links open a confirmation page; checked boxes are read from this comment only after you submit. intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveCSS(expected) failed Locator: getByTestId('layout-child-overlap') Expected: "static" Received: "absolute" Timeout: 500ms ``` intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('storage-state') Expected substring: "ord-9999" Received string: "ord-1001" Timeout: 500ms ``` intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('redux-state') Expected substring: "cancelled" Received string: "orderord-1001statusapprovedrenders1" Timeout: 500ms ``` intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveText(expected) failed Locator: getByTestId('checkout-total') Expected: "$999.00" Received: "$128.40" Timeout: 500ms ``` ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity

replay-mcp-lab-vite#‍5.1

Status	Complete ↗︎
Commit	c8b0232
Results	❌ 4 Failed Auto-heal queue: check tests below, then Analyze checked or Fix checked. Links open a confirmation page; checked boxes are read from this comment only after you submit. intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveCSS(expected) failed Locator: getByTestId('layout-child-overlap') Expected: "static" Received: "absolute" Timeout: 500ms ``` intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('storage-state') Expected substring: "ord-9999" Received string: "ord-1001" Timeout: 500ms ``` intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('redux-state') Expected substring: "cancelled" Received string: "orderord-1001statusapprovedrenders1" Timeout: 500ms ``` intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveText(expected) failed Locator: getByTestId('checkout-total') Expected: "$999.00" Received: "$128.40" Timeout: 500ms ``` ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity

replay-mcp-lab-vite#‍7.1

Status	Complete ↗︎
Commit	95971d4
Results	❌ 4 Failed Auto-heal queue: check tests below, then Analyze checked or Fix checked. Links open a confirmation page; checked boxes are read from this comment only after you submit. intentional diagnostic failure captures layout overlap screenshot context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveCSS(expected) failed Locator: getByTestId('layout-child-overlap') Expected: "static" Received: "absolute" Timeout: 500ms ``` intentional diagnostic failure captures network, storage, and console context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('storage-state') Expected substring: "ord-9999" Received string: "ord-1001" Timeout: 500ms ``` intentional diagnostic failure captures Redux, Zustand, and query context (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toContainText(expected) failed Locator: getByTestId('redux-state') Expected substring: "cancelled" Received string: "orderord-1001statusapprovedrenders1" Timeout: 500ms ``` intentional Playwright failure exposes failing step detail (Replay 1, Replay 2) (Analyze | Fix) Failure output Error: expect(locator).toHaveText(expected) failed Locator: getByTestId('checkout-total') Expected: "$999.00" Received: "$128.40" Timeout: 500ms ``` ✅ 7 Passed DOM layout exposes inspectable ancestry and overlap target happy path captures console, storage, network, screenshots, and clicks profiling creates bounded CPU and dependency graph activity React exception records boundary context and component stack runtime exception records an uncaught browser error source and logpoint exposes stable functions and console values state and React captures Redux, Zustand, TanStack Query, and render activity