@testspectra/cli 1.1.7 → 1.1.8-rc.2

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

@@ -0,0 +1,10 @@
+class AuthPage {
+  get checkStatusButton() { return Spectra.get("#check-auth-status-btn"); }
+  get statusBadge() { return Spectra.get("#auth-status-badge"); }
+
+  async open() {
+    await Spectra.navigate("/#auth");
+  }
+}
+
+export default new AuthPage();

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

@@ -1,46 +1,70 @@
-export class MatchersPage {
-  get visibleElement() { return Spectra.get("~visible-element"); }
-  get hiddenElement() { return Spectra.get("~hidden-element"); }
-  get existingElement() { return Spectra.get("~existing-element"); }
-  get removableElement() { return Spectra.get("~removable-element"); }
-  get submitButton() { return Spectra.get("~submit-button"); }
-  get disabledButton() { return Spectra.get("~disabled-button"); }
-  get checkbox() { return Spectra.get("~terms-checkbox"); }
-  get radio() { 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 styledElement() { return Spectra.get("~styled-element"); }
-  get focusInput() { return Spectra.get("~focus-input"); }
-  get productCards() { return Spectra.getAll("~product-item-1, ~product-item-2, ~product-item-3, ~product-item-4"); }
-  get emptyList() { return Spectra.getAll("~empty-list-item"); }
-
-  // API Demo elements
-  get fetchApiButton() { return Spectra.get("~fetch-api-btn"); }
-  get fetchStatusBadge() { return Spectra.get("~fetch-status-badge"); }
-  get fetchedItems() { return Spectra.getAll("~api-post-item"); }
-  get fetchLoadingIndicator() { return Spectra.get("~fetch-loading-indicator"); }
-  get postTitleInput() { return Spectra.get("~post-title-input"); }
-  get postBodyInput() { return Spectra.get("~post-body-input"); }
-  get submitPostButton() { return Spectra.get("~submit-post-btn"); }
-  get postStatusBadge() { return Spectra.get("~post-status-badge"); }
-  get postSuccessBanner() { return Spectra.get("~post-success-banner"); }
-  get postResponseJson() { return Spectra.get("~post-response-json"); }
-
-  async open(section = "") {
-    try {
-      const isDrawerOpen = await Spectra.get("~close-sidebar-btn").isDisplayed().catch(() => false);
-      if (!isDrawerOpen) {
-        await Spectra.get("~toggle-sidebar-btn").click();
-      }
-      if (section) {
-        await Spectra.get(`~nav-item-${section}`).click();
-      }
-    } catch {}
-  }
-}
-
-export default new MatchersPage();
+class MatchersPage {
+  get visibleElement() { return Spectra.get("~visible-element"); }
+  get hiddenElement() { return Spectra.get("~hidden-element"); }
+  get existingElement() { return Spectra.get("~existing-element"); }
+  get removableElement() { return Spectra.get("~removable-element"); }
+  get submitButton() { return Spectra.get("~submit-button"); }
+  get disabledButton() { return Spectra.get("~disabled-button"); }
+  get checkbox() { return Spectra.get("~terms-checkbox"); }
+  get radio() { 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"); }
+  // `#` = native id (RN testID → resource-id). Its accessibility label deliberately reads
+  // "active-tab is-active" (RN exposes no CSS classes, so the class is carried in the a11y label
+  // for `shouldHaveClass`), so it isn't addressable by the a11y-id form `~active-tab`.
+  get activeTab() { return Spectra.get("#active-tab"); }
+  get navLink() { return Spectra.get("~nav-link"); }
+  get styledElement() { return Spectra.get("~styled-element"); }
+  get focusInput() { return Spectra.get("~focus-input"); }
+  get productCards() { return Spectra.getAll("~product-item-1, ~product-item-2, ~product-item-3, ~product-item-4"); }
+  get emptyList() { return Spectra.getAll("~empty-list-item"); }
+  get overviewSection() { return Spectra.get("#overview-section"); }
+  // Scoped lookups via element.get() — resolved within overview-section's own bounds (Android
+  // has no ancestor API, so this is a bounds-containment lookup), not screen-wide.
+  overviewSubtitle() { return this.overviewSection.get("#demo-page-subtitle"); }
+  overviewOutsideElement() { return this.overviewSection.get("~submit-button"); }
+
+  // API Demo elements
+  get fetchApiButton() { return Spectra.get("~fetch-api-btn"); }
+  get fetchStatusBadge() { return Spectra.get("~fetch-status-badge"); }
+  get fetchedItems() { return Spectra.getAll("~api-post-item"); }
+  get fetchLoadingIndicator() { return Spectra.get("~fetch-loading-indicator"); }
+  get fetchCustomUrlInput() { return Spectra.get("~fetch-custom-url"); }
+  get postTitleInput() { return Spectra.get("~post-title-input"); }
+  get postBodyInput() { return Spectra.get("~post-body-input"); }
+  get submitPostButton() { return Spectra.get("~submit-post-btn"); }
+  get postStatusBadge() { return Spectra.get("~post-status-badge"); }
+  get postSuccessBanner() { return Spectra.get("~post-success-banner"); }
+  get postResponseJson() { return Spectra.get("~post-response-json"); }
+
+  async open(section = "") {
+    try {
+      // A fresh app process (relaunched by the orchestrator's bootstrap before every suite) has to
+      // fetch, parse, and execute the RN JS bundle from Metro before anything is on screen — on a
+      // cold start this can take well past a normal action's poll budget. Wait for the home screen
+      // itself first so that timing doesn't silently swallow the sidebar click below and leave the
+      // real failure to surface confusingly on whatever element the test touches next.
+      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();
+        // The mobile drawer is a React Native `<Modal>` — a separate OS-level window with its own
+        // slide-in animation, not a plain re-rendered View — so its content (including every
+        // nav-item below) isn't in the accessibility tree at all until Android actually finishes
+        // creating that window, which is async and occasionally slow under load. Without this
+        // wait, clicking a nav item right after the toggle relies entirely on click()'s own
+        // poll-retry to bridge that gap, which can eat most of the ~10s implicit-wait budget when
+        // the Modal is slow to materialize.
+        await Spectra.get("~close-sidebar-btn").waitForElement(10000);
+      }
+      if (section) {
+        await Spectra.get(`~nav-item-${section}`).click();
+      }
+    } catch {}
+  }
+}
+
+export default new MatchersPage();

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

@@ -1,37 +1,43 @@
-export class MatchersPage {
-  get visibleElement() { return Spectra.get("#demo-visible-el"); }
-  get hiddenElement() { return Spectra.get("#demo-hidden-el"); }
-  get existingElement() { return Spectra.get("#demo-existing-el"); }
-  get submitButton() { return Spectra.get("#demo-submit-btn"); }
-  get disabledButton() { return Spectra.get("#demo-disabled-btn"); }
-  get checkbox() { return Spectra.get("#demo-checkbox"); }
-  get radio() { return Spectra.get("#demo-radio"); }
-  get emailInput() { return Spectra.get("#demo-email-input"); }
-  get tokenInput() { return Spectra.get("#demo-token-input"); }
-  get exactText() { return Spectra.get("#demo-exact-text"); }
-  get partialText() { return Spectra.get("#demo-partial-text"); }
-  get activeTab() { return Spectra.get("#demo-active-tab"); }
-  get navLink() { return Spectra.get("#demo-nav-link"); }
-  get styledElement() { return Spectra.get("#demo-styled-el"); }
-  get focusInput() { return Spectra.get("#demo-focus-input"); }
-  get productCards() { return Spectra.getAll(".demo-product-card"); }
-  get emptyList() { return Spectra.getAll("#demo-empty-list > *"); }
-
-  // API Interception & Mocking elements
-  get fetchApiButton() { return Spectra.get("#fetch-api-btn"); }
-  get fetchStatusBadge() { return Spectra.get("#fetch-status-badge"); }
-  get fetchedItems() { return Spectra.getAll(".api-fetched-item"); }
-  get fetchLoadingIndicator() { return Spectra.get("#fetch-loading-indicator"); }
-  get postTitleInput() { return Spectra.get("#post-input-title"); }
-  get postBodyInput() { return Spectra.get("#post-input-body"); }
-  get submitPostButton() { return Spectra.get("#submit-post-btn"); }
-  get postStatusBadge() { return Spectra.get("#post-status-badge"); }
-  get postSuccessBanner() { return Spectra.get("#post-success-banner"); }
-  get postResponseJson() { return Spectra.get("#post-response-json"); }
-
-  async open(section = "") {
-    await browser.url("/" + (section ? "#" + section : ""));
-  }
-}
-
-export default new MatchersPage();
+class MatchersPage {
+  get visibleElement() { return Spectra.get("#demo-visible-el"); }
+  get hiddenElement() { return Spectra.get("#demo-hidden-el"); }
+  get existingElement() { return Spectra.get("#demo-existing-el"); }
+  get submitButton() { return Spectra.get("#demo-submit-btn"); }
+  get disabledButton() { return Spectra.get("#demo-disabled-btn"); }
+  get checkbox() { return Spectra.get("#demo-checkbox"); }
+  get radio() { return Spectra.get("#demo-radio"); }
+  get emailInput() { return Spectra.get("#demo-email-input"); }
+  get tokenInput() { return Spectra.get("#demo-token-input"); }
+  get exactText() { return Spectra.get("#demo-exact-text"); }
+  get partialText() { return Spectra.get("#demo-partial-text"); }
+  get activeTab() { return Spectra.get("#demo-active-tab"); }
+  get navLink() { return Spectra.get("#demo-nav-link"); }
+  get styledElement() { return Spectra.get("#demo-styled-el"); }
+  get focusInput() { return Spectra.get("#demo-focus-input"); }
+  get productCards() { return Spectra.getAll(".demo-product-card"); }
+  get emptyList() { return Spectra.getAll("#demo-empty-list > *"); }
+  get overviewSection() { return Spectra.get("#overview"); }
+  // Scoped lookups via element.get() — resolved within overview-section's own subtree, not
+  // document-wide.
+  overviewSubtitle() { return this.overviewSection.get("#demo-page-subtitle"); }
+  overviewOutsideElement() { return this.overviewSection.get("#demo-submit-btn"); }
+
+  // API Interception & Mocking elements
+  get fetchApiButton() { return Spectra.get("#fetch-api-btn"); }
+  get fetchStatusBadge() { return Spectra.get("#fetch-status-badge"); }
+  get fetchedItems() { return Spectra.getAll(".api-fetched-item"); }
+  get fetchLoadingIndicator() { return Spectra.get("#fetch-loading-indicator"); }
+  get fetchCustomUrlInput() { return Spectra.get("#fetch-custom-url-input"); }
+  get postTitleInput() { return Spectra.get("#post-input-title"); }
+  get postBodyInput() { return Spectra.get("#post-input-body"); }
+  get submitPostButton() { return Spectra.get("#submit-post-btn"); }
+  get postStatusBadge() { return Spectra.get("#post-status-badge"); }
+  get postSuccessBanner() { return Spectra.get("#post-success-banner"); }
+  get postResponseJson() { return Spectra.get("#post-response-json"); }
+
+  async open(section = "") {
+    await Spectra.navigate("/" + (section ? "#" + section : ""));
+  }
+}
+
+export default new MatchersPage();

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

@@ -1,14 +1,14 @@
-export class NavigationPage {
-  get sidebarLinks() {
-    return Spectra.getAll(
-      "~nav-item-overview, ~nav-item-element-matchers, ~nav-item-visibility, ~nav-item-existence, ~nav-item-state, ~nav-item-value, ~nav-item-text, ~nav-item-class-attr, ~nav-item-browser-matchers, ~nav-item-url, ~nav-item-title, ~nav-item-collection-matchers, ~nav-item-length, ~nav-item-api-matchers, ~nav-item-api-fetch, ~nav-item-api-post, ~nav-item-playground"
-    );
-  }
-  get toggleSidebarButton() { return Spectra.get("~toggle-sidebar-btn"); }
-  get closeSidebarButton() { return Spectra.get("~close-sidebar-btn"); }
-  get overviewLink() { return Spectra.get("~nav-item-overview"); }
-  get visibilityLink() { return Spectra.get("~nav-item-visibility"); }
-  get playgroundLink() { return Spectra.get("~nav-item-playground"); }
-}
-
-export default new NavigationPage();
+class NavigationPage {
+  get sidebarLinks() {
+    return Spectra.getAll(
+      "~nav-item-overview, ~nav-item-element-matchers, ~nav-item-visibility, ~nav-item-existence, ~nav-item-state, ~nav-item-value, ~nav-item-text, ~nav-item-class-attr, ~nav-item-browser-matchers, ~nav-item-url, ~nav-item-title, ~nav-item-collection-matchers, ~nav-item-length, ~nav-item-api-matchers, ~nav-item-api-fetch, ~nav-item-api-post, ~nav-item-playground"
+    );
+  }
+  get toggleSidebarButton() { return Spectra.get("~toggle-sidebar-btn"); }
+  get closeSidebarButton() { return Spectra.get("~close-sidebar-btn"); }
+  get overviewLink() { return Spectra.get("~nav-item-overview"); }
+  get visibilityLink() { return Spectra.get("~nav-item-visibility"); }
+  get playgroundLink() { return Spectra.get("~nav-item-playground"); }
+}
+
+export default new NavigationPage();

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

@@ -1,8 +1,8 @@
-export class NavigationPage {
-  get sidebarLinks() { return Spectra.getAll("aside a"); }
-  get overviewLink() { return Spectra.get("aside a[href='#overview']"); }
-  get visibilityLink() { return Spectra.get("aside a[href='#visibility']"); }
-  get playgroundLink() { return Spectra.get("aside a[href='#playground']"); }
-}
-
-export default new NavigationPage();
+class NavigationPage {
+  get sidebarLinks() { return Spectra.getAll("aside a"); }
+  get overviewLink() { return Spectra.get("aside a[href='#overview']"); }
+  get visibilityLink() { return Spectra.get("aside a[href='#visibility']"); }
+  get playgroundLink() { return Spectra.get("aside a[href='#playground']"); }
+}
+
+export default new NavigationPage();

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

@@ -1,36 +1,42 @@
-export 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("~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-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() {
-    try {
-      const isDrawerOpen = await Spectra.get("~close-sidebar-btn").isDisplayed().catch(() => false);
-      if (!isDrawerOpen) {
-        await Spectra.get("~toggle-sidebar-btn").click();
-      }
-      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);
-  }
-}
-
-export default new PlaygroundPage();
+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() {
+    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);
+  }
+}
+
+export default new PlaygroundPage();

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

@@ -1,31 +1,31 @@
-export 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"); }
-  get removedElement() { return Spectra.get("#demo-removed-el-pg"); }
-  get enabledButton() { return Spectra.get("#demo-enabled-btn"); }
-  get disabledButton() { return Spectra.get("#demo-disabled-btn-pg"); }
-  get termsCheckbox() { return Spectra.get("#demo-terms-checkbox"); }
-  get modeRadio() { return Spectra.get("#demo-mode-radio"); }
-  get emailInput() { return Spectra.get("#demo-email-input-pg"); }
-  get tokenInput() { return Spectra.get("#demo-token-input-pg"); }
-  get exactText() { return Spectra.get("#demo-exact-text-pg"); }
-  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");
-  }
-
-  async fillCredentials(email = Fixture.playgroundData.defaultEmail, token = Fixture.playgroundData.defaultToken) {
-    await this.emailInput.type(email);
-    await this.tokenInput.type(token);
-  }
-}
-
-export default new 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"); }
+  get removedElement() { return Spectra.get("#demo-removed-el-pg"); }
+  get enabledButton() { return Spectra.get("#demo-enabled-btn"); }
+  get disabledButton() { return Spectra.get("#demo-disabled-btn-pg"); }
+  get termsCheckbox() { return Spectra.get("#demo-terms-checkbox"); }
+  get modeRadio() { return Spectra.get("#demo-mode-radio"); }
+  get emailInput() { return Spectra.get("#demo-email-input-pg"); }
+  get tokenInput() { return Spectra.get("#demo-token-input-pg"); }
+  get exactText() { return Spectra.get("#demo-exact-text-pg"); }
+  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 Spectra.navigate("/#playground");
+  }
+
+  async fillCredentials(email = Fixture.playgroundData.defaultEmail, token = Fixture.playgroundData.defaultToken) {
+    await this.emailInput.type(email);
+    await this.tokenInput.type(token);
+  }
+}
+
+export default new PlaygroundPage();

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

@@ -1,11 +1,53 @@
-it("should verify GET API fetch response items and state on Mobile", async () => {
-  // Navigate to API Fetch section
-  await MatchersPage.open("api-fetch");
-
-  // Trigger fetch button in mobile demo app
-  await MatchersPage.fetchApiButton.click();
-
-  // Assert status badge and response items rendered
-  await MatchersPage.fetchStatusBadge.shouldHaveText("200 OK");
-  await MatchersPage.fetchedItems.shouldHaveLengthGreaterThan(0);
-});
+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

@@ -1,12 +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
+---
+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

@@ -1,27 +1,31 @@
-it("should mock GET API response using browser.intercept and verify rendered items", async () => {
-  // Navigate to API Fetch section
-  await MatchersPage.open("api-fetch");
-
-  // Setup API interception with Fixture data
-  const mock = await browser.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");
-});
+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

@@ -1,16 +1,27 @@
-it("should verify POST API form submission and response payload on Mobile", async () => {
-  // Navigate to API POST section
-  await MatchersPage.open("api-post");
-
-  // 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 badge
-  await MatchersPage.postStatusBadge.shouldHaveText("201 Created");
-  await MatchersPage.postSuccessBanner.shouldBeVisible();
-  await MatchersPage.postResponseJson.shouldContainText(Fixture.apiData.mockNewPost.title);
-});
+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);
+});