@testspectra/cli 1.0.70 → 1.1.0-rc.1

package/templates/default/page-objects/PlaygroundPage/mobile.ts

@@ -1,22 +1,38 @@
-export class PlaygroundPage {
-  get visibleElement() { return Spectra.get("~visible_element"); }
-  get hiddenElement() { return Spectra.get("~hidden_element"); }
-  get existingElement() { return Spectra.get("~existing_element"); }
-  get removedElement() { return Spectra.get("~removed_element"); }
-  get enabledButton() { return Spectra.get("~enabled_button"); }
-  get disabledButton() { return Spectra.get("~disabled_button"); }
-  get termsCheckbox() { return Spectra.get("~terms_checkbox"); }
-  get modeRadio() { return Spectra.get("~mode_radio"); }
-  get emailInput() { return Spectra.get("~email_input"); }
-  get tokenInput() { return Spectra.get("~token_input"); }
-  get exactText() { return Spectra.get("~exact_text"); }
-  get partialText() { return Spectra.get("~partial_text"); }
-  get activeTab() { return Spectra.get("~active_tab"); }
-  get navLink() { return Spectra.get("~nav_link"); }
-  get productItems() { return Spectra.getAll("~product_item"); }
-  get emptyList() { return Spectra.getAll("~empty_list"); }
+class PlaygroundPage {
+  get visibleElement() { return Spectra.get("~playground-visible"); }
+  get hiddenElement() { return Spectra.get("~playground-hidden"); }
+  get existingElement() { return Spectra.get("~playground-existing"); }
+  get removedElement() { return Spectra.get("~playground-removable"); }
+  get enabledButton() { return Spectra.get("~enabled-button"); }
+  get disabledButton() { return Spectra.get("~pg-disabled-button"); }
+  get termsCheckbox() { return Spectra.get("~pg-terms-checkbox"); }
+  get modeRadio() { return Spectra.get("~pg-mode-radio"); }
+  get emailInput() { return Spectra.get("~pg-email-input"); }
+  get tokenInput() { return Spectra.get("~pg-token-input"); }
+  get exactText() { return Spectra.get("~exact-text-el"); }
+  get partialText() { return Spectra.get("~partial-text-el"); }
+  get activeTab() { return Spectra.get("~active-tab-el"); }
+  get navLink() { return Spectra.get("~nav-link-el"); }
+  get styledElement() { return Spectra.get("~playground-styled-element"); }
+  get focusInput() { return Spectra.get("~playground-focus-input"); }
+  get productItems() { return Spectra.getAll("~product-item-1, ~product-item-2, ~product-item-3, ~product-item-4"); }
+  get emptyList() { return Spectra.getAll("~empty-list-el-item"); }
 
-  async open() {}
+  async open() {
+    try {
+      // See MatchersPage.open()'s equivalent comment: waits for the cold-start home screen, then
+      // for the drawer Modal to actually finish materializing before clicking a nav item inside
+      // it — both races that otherwise surface as an occasional ~10s stall on the next click.
+      await Spectra.get("~toggle-sidebar-btn").waitForElement(30000);
+
+      const isDrawerOpen = await Spectra.get("~close-sidebar-btn").isDisplayed().catch(() => false);
+      if (!isDrawerOpen) {
+        await Spectra.get("~toggle-sidebar-btn").click();
+        await Spectra.get("~close-sidebar-btn").waitForElement(10000);
+      }
+      await Spectra.get("~nav-item-playground").click();
+    } catch {}
+  }
   async fillCredentials(email = Fixture.playgroundData.defaultEmail, token = Fixture.playgroundData.defaultToken) {
     await this.emailInput.type(email);
     await this.tokenInput.type(token);

package/templates/default/page-objects/PlaygroundPage/web.ts

@@ -1,4 +1,4 @@
-export class PlaygroundPage {
+class PlaygroundPage {
   get visibleElement() { return Spectra.get("#demo-visible-el-pg"); }
   get hiddenElement() { return Spectra.get("#demo-hidden-el-pg"); }
   get existingElement() { return Spectra.get("#demo-existing-el-pg"); }
@@ -13,11 +13,13 @@ export class PlaygroundPage {
   get partialText() { return Spectra.get("#demo-partial-text-pg"); }
   get activeTab() { return Spectra.get("#demo-active-tab-pg"); }
   get navLink() { return Spectra.get("#demo-nav-link-pg"); }
+  get styledElement() { return Spectra.get("#demo-styled-el-pg"); }
+  get focusInput() { return Spectra.get("#demo-focus-input-pg"); }
   get productItems() { return Spectra.getAll(".demo-product-item"); }
   get emptyList() { return Spectra.getAll("#demo-empty-list-pg > *"); }
 
   async open() {
-    await browser.url("/#playground");
+    await Spectra.navigate("/#playground");
   }
 
   async fillCredentials(email = Fixture.playgroundData.defaultEmail, token = Fixture.playgroundData.defaultToken) {

package/templates/default/specs/ApiInterception/TC-0008-fetch-mocking/mobile.test.ts

@@ -0,0 +1,53 @@
+it("Mock and assert GET API requests using browser.intercept", async () => {
+  // Navigate to API Fetch section
+  await MatchersPage.open("api-fetch");
+
+  // The app fetches the host demo server's self-hosted endpoint (http://localhost:5200/api/posts) —
+  // the device's global HTTP proxy (set up transparently at bootstrap) routes it through the
+  // worker's mock proxy without the app knowing or needing any special host/prefix, the same
+  // way the CDP web driver intercepts traffic for free. Clear any mock left registered by an
+  // earlier test in this same continuous session before adding this one.
+  Spectra.clearMocks();
+  const mock = await Spectra.intercept(
+    "api/posts",
+    "GET",
+    Fixture.apiData.mockPosts
+  );
+
+  // Trigger fetch button in mobile demo app
+  await MatchersPage.fetchApiButton.click();
+
+  // Assert status and mocked elements
+  await MatchersPage.fetchStatusBadge.shouldHaveText("200 OK");
+  await MatchersPage.fetchedItems.shouldHaveLength(Fixture.apiData.mockPosts.length);
+  await MatchersPage.fetchedItems.first().shouldContainText(Fixture.apiData.mockPosts[0].title);
+
+  // Dynamically update fixture response
+  await mock.respondWith([
+    { id: 99, title: "Dynamic Updated Mock Title", body: "Updated on the fly" }
+  ]);
+  await MatchersPage.fetchApiButton.click();
+  await MatchersPage.fetchedItems.shouldHaveLength(1);
+  await MatchersPage.fetchedItems.first().shouldContainText("Dynamic Updated Mock Title");
+
+  // Reset to the base mock and queue a single one-time response — asserts a transient state
+  // (e.g. one retry attempt) without disturbing what every other call returns.
+  Spectra.clearMocks();
+  const queuedMock = await Spectra.intercept(
+    "api/posts",
+    "GET",
+    Fixture.apiData.mockPosts
+  );
+  await queuedMock.respondOnce([
+    { id: 777, title: "One-Time Queued Response", body: "Only served once" }
+  ]);
+
+  await MatchersPage.fetchApiButton.click();
+  await MatchersPage.fetchedItems.shouldHaveLength(1);
+  await MatchersPage.fetchedItems.first().shouldContainText("One-Time Queued Response");
+
+  // The queued response is consumed by the call above — this one reverts to the base rule.
+  await MatchersPage.fetchApiButton.click();
+  await MatchersPage.fetchedItems.shouldHaveLength(Fixture.apiData.mockPosts.length);
+  await MatchersPage.fetchedItems.first().shouldContainText(Fixture.apiData.mockPosts[0].title);
+});

package/templates/default/specs/ApiInterception/TC-0008-fetch-mocking/spec.md

@@ -0,0 +1,19 @@
+---
+id: TC-0008-fetch-mocking
+title: Mock and assert GET API requests using browser.intercept
+priority: High
+caseType: Positive
+status: ready-for-automation
+coverage:
+  web: automated
+  mobile: automated
+---
+
+# Mock and assert GET API requests using browser.intercept
+
+## Test Steps
+1. Open API fetch section in matchers page
+2. Intercept GET /api/posts with mock posts fixture data
+3. Click fetch API button
+4. Assert status badge displays 200 OK and rendered items match fixture
+5. Update mock response dynamically and verify updated items rendered

package/templates/default/specs/ApiInterception/TC-0008-fetch-mocking/web.test.ts

@@ -0,0 +1,31 @@
+it("Mock and assert GET API requests using browser.intercept", async () => {
+  // Navigate to API Fetch section
+  await MatchersPage.open("api-fetch");
+
+  // The app fetches the demo server's own self-hosted endpoint (/api/posts) — served by the
+  // built-in demo app (started with `--demo`), so no external network is involved. Clear any mock
+  // left registered by an earlier test in this same continuous session before adding this one,
+  // since rules aren't scoped per-test and the first matching rule wins.
+  Spectra.clearMocks();
+  const mock = await Spectra.intercept(
+    "api/posts",
+    "GET",
+    Fixture.apiData.mockPosts
+  );
+
+  // Trigger fetch button
+  await MatchersPage.fetchApiButton.click();
+
+  // Assert status and mocked elements
+  await MatchersPage.fetchStatusBadge.shouldHaveText("200 OK");
+  await MatchersPage.fetchedItems.shouldHaveLength(Fixture.apiData.mockPosts.length);
+  await MatchersPage.fetchedItems.first().shouldContainText(Fixture.apiData.mockPosts[0].title);
+
+  // Dynamically update fixture response
+  await mock.respondWith([
+    { id: 99, title: "Dynamic Updated Mock Title", body: "Updated on the fly" }
+  ]);
+  await MatchersPage.fetchApiButton.click();
+  await MatchersPage.fetchedItems.shouldHaveLength(1);
+  await MatchersPage.fetchedItems.first().shouldContainText("Dynamic Updated Mock Title");
+});

package/templates/default/specs/ApiInterception/TC-0009-post-mocking/android.test.ts

@@ -0,0 +1,3 @@
+it('Mock and assert POST API requests using browser.intercept', async () => {
+  // TODO: Implement test steps and assertions
+});

package/templates/default/specs/ApiInterception/TC-0009-post-mocking/common.test.ts

@@ -0,0 +1,3 @@
+it('Mock and assert POST API requests using browser.intercept', async () => {
+  // TODO: Implement test steps and assertions
+});

package/templates/default/specs/ApiInterception/TC-0009-post-mocking/mobile.test.ts

@@ -0,0 +1,27 @@
+it("Mock and assert POST API requests using browser.intercept", async () => {
+  // Navigate to API POST section
+  await MatchersPage.open("api-post");
+
+  // Setup POST API interception with status 201 — the app posts to the host demo server's
+  // self-hosted endpoint (http://localhost:5200/api/posts), transparently routed through the
+  // worker's mock proxy via the device's global HTTP proxy set up at bootstrap.
+  Spectra.clearMocks();
+  await Spectra.intercept(
+    "api/posts",
+    "POST",
+    Fixture.apiData.mockPostResponse,
+    { statusCode: 201 }
+  );
+
+  // Fill in form fields from Fixture
+  await MatchersPage.postTitleInput.type(Fixture.apiData.mockNewPost.title);
+  await MatchersPage.postBodyInput.type(Fixture.apiData.mockNewPost.body);
+
+  // Submit POST form
+  await MatchersPage.submitPostButton.click();
+
+  // Assert response elements and status
+  await MatchersPage.postStatusBadge.shouldHaveText("201 Created");
+  await MatchersPage.postSuccessBanner.shouldBeVisible();
+  await MatchersPage.postResponseJson.shouldContainText(Fixture.apiData.mockNewPost.title);
+});

package/templates/default/specs/ApiInterception/TC-0009-post-mocking/spec.md

@@ -0,0 +1,19 @@
+---
+id: TC-0009-post-mocking
+title: Mock and assert POST API requests using browser.intercept
+priority: High
+caseType: Positive
+status: ready-for-automation
+coverage:
+  web: automated
+  mobile: automated
+---
+
+# Mock and assert POST API requests using browser.intercept
+
+## Test Steps
+1. Open API POST section in matchers page
+2. Intercept POST /api/posts with mock response returning 201 status
+3. Fill post title and post body inputs from fixture
+4. Click submit POST button
+5. Assert status badge displays 201 Created and response JSON contains new title

package/templates/default/specs/ApiInterception/TC-0009-post-mocking/web.test.ts

@@ -0,0 +1,26 @@
+it("Mock and assert POST API requests using browser.intercept", async () => {
+  // Navigate to API POST section
+  await MatchersPage.open("api-post");
+
+  // Setup POST API interception with status 201 — the app posts to the demo server's own
+  // self-hosted endpoint (/api/posts), no external network involved.
+  Spectra.clearMocks();
+  await Spectra.intercept(
+    "api/posts",
+    "POST",
+    Fixture.apiData.mockPostResponse,
+    { statusCode: 201 }
+  );
+
+  // Fill in form fields from Fixture
+  await MatchersPage.postTitleInput.type(Fixture.apiData.mockNewPost.title);
+  await MatchersPage.postBodyInput.type(Fixture.apiData.mockNewPost.body);
+
+  // Submit POST form
+  await MatchersPage.submitPostButton.click();
+
+  // Assert response elements and status
+  await MatchersPage.postStatusBadge.shouldHaveText("201 Created");
+  await MatchersPage.postSuccessBanner.shouldBeVisible();
+  await MatchersPage.postResponseJson.shouldContainText(Fixture.apiData.mockNewPost.title);
+});

package/templates/default/specs/ApiInterception/TC-0012-direct-and-late-response/common.test.ts

@@ -0,0 +1,30 @@
+it("Intercept a direct (immediate) response and a late (delayed) response using Fixture data", async () => {
+  await MatchersPage.open("api-fetch");
+
+  // The app fetches the self-hosted demo endpoint (/api/posts on web, the same path served by
+  // the demo server and reached through the device proxy on mobile) — no external network, so
+  // there's no upstream latency leaking into the "immediate" assertion below. On web, CDP's
+  // Fetch domain intercepts it; on Android, the device's global HTTP proxy routes it through the
+  // same worker-side mock engine. Neither platform needs the app, or this test, to know anything
+  // special about being under test.
+  Spectra.clearMocks();
+
+  // Direct (immediate) response — Fixture data returned with no artificial latency.
+  const mock = await Spectra.intercept("api/posts", "GET", Fixture.apiData.mockPosts);
+  await MatchersPage.fetchApiButton.click();
+  await MatchersPage.fetchStatusBadge.shouldHaveText("200 OK");
+  await MatchersPage.fetchedItems.shouldHaveLength(Fixture.apiData.mockPosts.length);
+  await MatchersPage.fetchedItems.first().shouldContainText(Fixture.apiData.mockPosts[0].title);
+
+  // Late (delayed) response — same mock rule, switched to hold the response back via `delayMs`.
+  // The loading indicator must still be visible right after the click, proving this is real
+  // network-level latency (the request genuinely stays pending) rather than a client-side-only
+  // spinner timer. The delay is set past the default assertion timeout on purpose, to demonstrate
+  // the per-assertion `{ timeoutMs }` override below — without it, these assertions would fail-fast
+  // before the delayed response ever arrives.
+  await mock.respondWith(Fixture.apiData.mockPosts, { delayMs: 2500 });
+  await MatchersPage.fetchApiButton.click();
+  await MatchersPage.fetchLoadingIndicator.shouldBeVisible();
+  await MatchersPage.fetchStatusBadge.shouldHaveText("200 OK", { timeoutMs: 3500 });
+  await MatchersPage.fetchedItems.shouldHaveLength(Fixture.apiData.mockPosts.length, { timeoutMs: 3500 });
+});

package/templates/default/specs/ApiInterception/TC-0012-direct-and-late-response/spec.md

@@ -0,0 +1,22 @@
+---
+id: TC-0012-direct-and-late-response
+title: Intercept a direct (immediate) response and a late (delayed) response using Fixture data
+priority: High
+caseType: Positive
+status: ready-for-automation
+coverage:
+  web: automated
+  mobile: automated
+---
+
+# Intercept a direct (immediate) response and a late (delayed) response using Fixture data
+
+## Test Steps
+1. Open the API fetch section in the matchers page
+2. Intercept GET /api/posts with mock posts fixture data
+3. Click the fetch API button
+4. Assert the status badge displays 200 OK and the immediate fixture items render
+5. Update the mock response with an artificial 50ms delay
+6. Click the fetch API button
+7. Assert the loading indicator is visible while the request is held
+8. Assert the status badge displays 200 OK and the delayed fixture items render

package/templates/default/specs/ApiInterception/TC-0013-real-network-call-recorded/common.test.ts

@@ -0,0 +1,27 @@
+it("Make a genuine (non-intercepted) network call and verify it is recorded", async () => {
+  await MatchersPage.open("api-fetch");
+
+  // Deliberately no Spectra.intercept() call — this is a genuine request that actually leaves
+  // the app and hits a real server, not a mock. It targets the demo server's own self-hosted
+  // endpoint (started with `--demo`) instead of an external public API, so it's deterministic
+  // and fast everywhere. On web the browser reaches localhost directly; on Android it's
+  // transparently routed through the device's global HTTP proxy with no matching mock rule, so
+  // the worker's proxy just forwards it for real. Clear any mock a previous test in this suite
+  // left registered (e.g. against /api/posts) so it can't accidentally catch this request too —
+  // this test uses a different resource (/api/todos/1) specifically to avoid that collision,
+  // plus a cache-busting query param so a repeat run doesn't get a 304 Not Modified from the
+  // device/browser's own HTTP cache.
+  Spectra.clearMocks();
+  const cacheBuster = Date.now();
+  await MatchersPage.fetchCustomUrlInput.type(`http://localhost:5200/api/todos/1?cb=${cacheBuster}`);
+  await MatchersPage.fetchApiButton.click();
+  await MatchersPage.fetchStatusBadge.shouldHaveText("200 OK");
+
+  const entry = Spectra.browser.recordedNetwork.find((e) => e.url.includes(`todos/1?cb=${cacheBuster}`));
+  if (!entry) {
+    throw new Error("Expected a recorded network entry for the real demo-server call, found none");
+  }
+  if (entry.status !== 200) {
+    throw new Error(`Expected recorded entry status 200, got ${entry.status}`);
+  }
+});

package/templates/default/specs/ApiInterception/TC-0013-real-network-call-recorded/spec.md

@@ -0,0 +1,20 @@
+---
+id: TC-0013-real-network-call-recorded
+title: Make a genuine (non-intercepted) network call and verify it is recorded
+priority: High
+caseType: Positive
+status: ready-for-automation
+coverage:
+  web: automated
+  mobile: automated
+---
+
+# Make a genuine (non-intercepted) network call and verify it is recorded
+
+## Test Steps
+1. Open the API fetch section in the matchers page
+2. Clear any active mocks left by a previous test
+3. Enter a real (non-intercepted) demo-server todo endpoint URL with a cache-busting query param
+4. Click the fetch API button
+5. Assert the status badge displays 200 OK
+6. Assert the network report records the genuine call with status 200

package/templates/default/specs/ApiInterception/TC-0015-mock-server-sent-events/spec.md

@@ -0,0 +1,24 @@
+---
+id: TC-0015-mock-server-sent-events
+title: Mock a Server-Sent Events (EventSource) stream via the existing network-intercept engine
+priority: Medium
+caseType: Positive
+status: ready-for-automation
+coverage:
+  web: automated
+  mobile: unsupported
+---
+
+# Mock a Server-Sent Events (EventSource) stream via the existing network-intercept engine
+
+Mobile coverage is `unsupported`: React Native has no built-in `EventSource` — a real project
+targeting mobile would add a userland SSE client library, at which point whether/how it's
+mockable depends entirely on that library's own networking implementation, not something
+TestSpectra's driver can generalize over.
+
+## Test Steps
+1. Open the SSE matcher section
+2. Intercept GET /api/sse-feed with a text/event-stream mock body
+3. Click the connect button
+4. Assert two SSE messages render
+5. Assert the first message contains "hello from mock SSE" and the last contains "second event"

package/templates/default/specs/ApiInterception/TC-0015-mock-server-sent-events/web.test.ts

@@ -0,0 +1,26 @@
+it("Mock a Server-Sent Events (EventSource) stream via the existing network-intercept engine", async () => {
+  await MatchersPage.open("sse");
+
+  // EventSource's initial request is a plain HTTP GET under the hood — CDP's Fetch domain
+  // intercepts it exactly like any other fetch()/XHR request. Fulfilling it with a
+  // text/event-stream body delivers every "data: ...\n\n" block at once; the browser's own
+  // EventSource parser still splits that into individual "message" events and dispatches them
+  // just as it would for a real stream, which is the part this demo actually cares about.
+  //
+  // What this can't fake: `Fetch.fulfillRequest` delivers a complete, connection-closing
+  // response (there's no way to keep it open indefinitely the way a real SSE endpoint would), so
+  // the browser's EventSource treats that closure as a connection error shortly after — the
+  // events still arrive and get processed first, but the app's own "CONNECTED" status flips back
+  // to disconnected right after, same as it would after a real server unexpectedly closed the
+  // connection. So this test verifies the events were received, not that the connection stayed
+  // open — genuinely-persistent SSE isn't something a request/response-shaped mock can simulate.
+  await Spectra.intercept("/api/sse-feed", "GET", {
+    body: 'data: {"text":"hello from mock SSE"}\n\ndata: {"text":"second event"}\n\n',
+    headers: { "Content-Type": "text/event-stream" },
+  });
+
+  await Spectra.get("#sse-connect-btn").click();
+  await Spectra.getAll(".sse-message-item").shouldHaveLength(2);
+  await Spectra.getAll(".sse-message-item").first().shouldContainText("hello from mock SSE");
+  await Spectra.getAll(".sse-message-item").last().shouldContainText("second event");
+});

package/templates/default/specs/ApiInterception/TC-0016-bypass-websocket-with-app-level-mock/spec.md

@@ -0,0 +1,37 @@
+---
+id: TC-0016-bypass-websocket-with-app-level-mock
+title: Bypass a real WebSocket connection via an app-level test-only mock flag
+priority: Medium
+caseType: Positive
+status: ready-for-automation
+coverage:
+  web: automated
+  mobile: unsupported
+---
+
+# Bypass a real WebSocket connection via an app-level test-only mock flag
+
+**Why this isn't network-level interception like `Spectra.intercept()`:** a WebSocket connection
+starts as an HTTP `Upgrade` handshake and then becomes a raw bidirectional frame stream — it's
+never a single request/response CDP's `Fetch` domain can fulfill the way it fulfills a normal
+`fetch()`/`XHR`/`EventSource` request. Chrome DevTools Protocol's WebSocket-related events
+(`Network.webSocketCreated`, `webSocketFrameSent`/`webSocketFrameReceived`, etc.) are
+observation-only — CDP has no command that mocks or rewrites a WS frame in flight. This is a
+genuine protocol-level limitation, not a gap in this driver.
+
+The practical workaround, and what this demo shows: the app itself checks for a test-only global
+flag (`window.__mockWebSocketMessages`) and swaps in an in-memory fake socket when present,
+instead of opening a real connection. `Spectra.browser.evaluate()` sets that flag before the app
+connects. This is the same pattern used by Cypress/Playwright test suites for the same reason.
+
+Mobile coverage is `unsupported`: React Native's WebSocket implementation is a native module,
+not a page-context global reachable via a browser-style `evaluate()` call — a mobile equivalent
+would need the RN app's own WebSocket client wrapper to support a comparable test-only bypass.
+
+## Test Steps
+1. Open the WebSocket matcher section
+2. Set the app-level mock flag via browser.evaluate before the app connects
+3. Click the connect button
+4. Assert the connection status displays CONNECTED and two mocked frames render
+5. Click the disconnect button
+6. Assert the connection status displays DISCONNECTED

package/templates/default/specs/ApiInterception/TC-0016-bypass-websocket-with-app-level-mock/web.test.ts

@@ -0,0 +1,21 @@
+it("Bypass a real WebSocket connection via an app-level test-only mock flag", async () => {
+  await MatchersPage.open("websocket");
+
+  // Set BEFORE the app opens its connection — the component checks this flag inside its own
+  // connect() handler and, if present, uses an in-memory fake socket instead of a real
+  // `new WebSocket(...)`. This is necessarily app-level, not network-level: see this TC's
+  // spec.md for why CDP has no way to intercept/mock a WebSocket handshake or its frames the
+  // way Spectra.intercept() does for fetch()/XHR/EventSource.
+  await Spectra.browser.evaluate(
+    "window.__mockWebSocketMessages = ['hello from mock WS', 'second frame']",
+  );
+
+  await Spectra.get("#ws-connect-btn").click();
+  await Spectra.get("#ws-connection-status").shouldHaveText("CONNECTED");
+  await Spectra.getAll(".ws-message-item").shouldHaveLength(2);
+  await Spectra.getAll(".ws-message-item").first().shouldContainText("hello from mock WS");
+  await Spectra.getAll(".ws-message-item").last().shouldContainText("second frame");
+
+  await Spectra.get("#ws-disconnect-btn").click();
+  await Spectra.get("#ws-connection-status").shouldHaveText("DISCONNECTED");
+});

package/templates/default/specs/ApiInterception/TC-0017-bypass-captcha-with-test-mode-flag/spec.md

@@ -0,0 +1,29 @@
+---
+id: TC-0017-bypass-captcha-with-test-mode-flag
+title: Bypass a live reCAPTCHA widget via an app-level test-only flag
+priority: Medium
+caseType: Positive
+status: ready-for-automation
+coverage:
+  web: automated
+  mobile: unsupported
+---
+
+# Bypass a live reCAPTCHA widget via an app-level test-only flag
+
+Real reCAPTCHA renders inside a cross-origin iframe (`google.com`), which Google explicitly
+discourages driving via browser automation — there's no `Spectra.intercept()`-style network mock
+for a live third-party widget's challenge/response flow. The demo embeds the real widget (site key
+`6LcWK4QtAAAAAAeA8IAN20JceGQ7L-RWE-LfhZnB`) for visual completeness, but the test itself uses the
+same pattern real projects use in CI: an app-level `window.__bypassCaptcha` flag the submit
+handler honors instead of ever attempting to automate the actual challenge.
+
+Mobile coverage is `unsupported`: a native captcha SDK (rather than a page-context script tag)
+would need its own test-only bypass hook, which is outside what a generic web-style demo can show.
+
+## Test Steps
+1. Open the captcha matcher section
+2. Click submit without the bypass flag and assert the widget refuses
+3. Set the app-level bypass flag via browser.evaluate
+4. Click submit again
+5. Assert the submission message indicates the form was bypassed for automated testing

package/templates/default/specs/ApiInterception/TC-0017-bypass-captcha-with-test-mode-flag/web.test.ts

@@ -0,0 +1,16 @@
+it("Bypass a live reCAPTCHA widget via an app-level test-only flag", async () => {
+  await MatchersPage.open("captcha");
+
+  // Baseline: without the flag (and no completed challenge), the widget refuses to submit —
+  // proving the success below is specifically driven by the bypass flag, not a stale state.
+  await Spectra.get("#captcha-submit-btn").click();
+  await Spectra.get("#captcha-submit-message").shouldContainText("complete the reCAPTCHA challenge");
+
+  // Set BEFORE submitting — see this TC's spec.md for why this has to be an app-level bypass
+  // rather than a network-level mock (real reCAPTCHA lives in a cross-origin iframe with no
+  // request/response Spectra.intercept() could fulfill).
+  await Spectra.browser.evaluate("window.__bypassCaptcha = true");
+
+  await Spectra.get("#captcha-submit-btn").click();
+  await Spectra.get("#captcha-submit-message").shouldContainText("bypassed for automated test");
+});

package/templates/default/specs/ApiInterception/suite.md

@@ -0,0 +1,10 @@
+---
+id: suite-api-interception
+name: ApiInterception
+description: REST API network mocking, GET/POST payload interception, and status assertions
+executionOrder: 1.4
+parallel: true
+---
+
+# Suite: ApiInterception
+

package/templates/default/specs/ApiSeeding/TC-0014-seed-and-cleanup-via-hooks/common.test.ts

@@ -0,0 +1,30 @@
+// The `before` hook (hooks/before/common.hook.ts) already ran by the time this test body
+// executes — it seeded a post via a real POST to the demo server's self-hosted API and stashed
+// the result on globalThis for this test to read. Cleanup (hooks/after/common.hook.ts) runs
+// after this whole suite finishes, so it can't be observed from inside the suite's own tests —
+// a separate monitoring suite/run would be how a real project verifies cleanup actually happened.
+//
+// Suite-scoped hooks only run when a worker's whole batch is unambiguously scoped to this one
+// suite (e.g. `spectra run specs/ApiSeeding` or targeting this TC directly) — hook functions are
+// process-global singleton slots, not per-test-case, so a worker batch spanning multiple suites
+// has no correct way to scope suite A's hooks to only run around suite A's own tests, and skips
+// suite-level hooks entirely rather than risk applying the wrong suite's hooks to the wrong
+// tests. Running the FULL default template (`spectra run -t web`/`android`, every suite at once)
+// will legitimately fail this specific test for that reason — that's an inherent limitation of
+// the current worker-batching model, not a bug in this demo.
+it("Verify test data seeded by a before hook via the demo server's self-hosted API is available to the test", async () => {
+  const seeding = (globalThis as any).__apiSeeding;
+
+  if (!seeding?.seededPost) {
+    throw new Error("Expected the before hook to have seeded a post onto globalThis.__apiSeeding, found none");
+  }
+  if (typeof seeding.seededPost.id !== "number") {
+    throw new Error(`Expected seeded post to have a numeric id, got ${JSON.stringify(seeding.seededPost.id)}`);
+  }
+  if (seeding.seededPost.title !== "TestSpectra seeded post") {
+    throw new Error(`Expected seeded post title to match, got "${seeding.seededPost.title}"`);
+  }
+  if (seeding.cleanedUp !== false) {
+    throw new Error("Expected cleanedUp to still be false — the after hook hasn't run yet at this point");
+  }
+});

package/templates/default/specs/ApiSeeding/TC-0014-seed-and-cleanup-via-hooks/spec.md

@@ -0,0 +1,23 @@
+---
+id: TC-0014-seed-and-cleanup-via-hooks
+title: Verify test data seeded by a before hook via the demo server's self-hosted API is available to the test
+priority: Medium
+caseType: Positive
+status: ready-for-automation
+coverage:
+  web: automated
+  mobile: automated
+---
+
+# Verify test data seeded by a before hook via the demo server's self-hosted API is available to the test
+
+The before hook seeds against the demo server's self-hosted `/api/posts` (POST), and the after
+hook cleans up via DELETE. Because the hooks run on the host worker (not on the device), the demo
+server must be up on the host — run this suite with `--demo` on any platform, e.g.
+`spectra run "specs/ApiSeeding/TC-0014-seed-and-cleanup-via-hooks/common.test.ts" -t android --demo`.
+
+## Test Steps
+1. Before hook seeds a post via a real POST to the demo server's self-hosted API and stashes it on globalThis
+2. Verify the seeded post is present on globalThis
+3. Assert the seeded post has a numeric id and the expected title
+4. Assert cleanup has not yet run (the after hook runs after this suite finishes)

package/templates/default/specs/ApiSeeding/hooks/after/common.hook.ts

@@ -0,0 +1,16 @@
+// Suite-level `after` hook — runs once after this suite's tests complete, regardless of whether
+// they passed, so seeded data is always cleaned up rather than leaking into later runs.
+export default async function () {
+  const seeding = (globalThis as any).__apiSeeding;
+  if (!seeding?.seededPost?.id) return;
+
+  const res = await fetch(`http://localhost:5200/api/posts/${seeding.seededPost.id}`, {
+    method: "DELETE",
+  });
+
+  if (!res.ok) {
+    throw new Error(`ApiSeeding after hook: failed to clean up seeded post ${seeding.seededPost.id} (${res.status})`);
+  }
+
+  seeding.cleanedUp = true;
+}