@testspectra/cli 1.1.8-rc.3 → 1.1.8-rc.31

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

@@ -1,70 +1,70 @@
-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();
+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,43 +1,43 @@
-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();
+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 @@
-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 @@
-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,42 +1,42 @@
-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();
+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 @@
-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();
+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,53 +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);
-});
+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,19 +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
+---
+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