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

package/dist/linter/schemas/suite.schema.d.ts

@@ -14,36 +14,36 @@ export declare const SuiteFrontmatterSchema: z.ZodEffects<z.ZodObject<{
     tags: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
 }, "strip", z.ZodTypeAny, {
     id: string;
+    name?: string | undefined;
     status?: "active" | "draft" | "deprecated" | undefined;
     title?: string | undefined;
-    name?: string | undefined;
     tags?: string[] | undefined;
     description?: string | undefined;
     executionOrder?: number | undefined;
     parallel?: boolean | undefined;
 }, {
     id: string;
+    name?: string | undefined;
     status?: "active" | "draft" | "deprecated" | undefined;
     title?: string | undefined;
-    name?: string | undefined;
     tags?: string[] | undefined;
     description?: string | undefined;
     executionOrder?: number | undefined;
     parallel?: boolean | undefined;
 }>, {
     id: string;
+    name?: string | undefined;
     status?: "active" | "draft" | "deprecated" | undefined;
     title?: string | undefined;
-    name?: string | undefined;
     tags?: string[] | undefined;
     description?: string | undefined;
     executionOrder?: number | undefined;
     parallel?: boolean | undefined;
 }, {
     id: string;
+    name?: string | undefined;
     status?: "active" | "draft" | "deprecated" | undefined;
     title?: string | undefined;
-    name?: string | undefined;
     tags?: string[] | undefined;
     description?: string | undefined;
     executionOrder?: number | undefined;

package/dist/reporter/semantic-formatter.js

@@ -50,6 +50,11 @@ function formatCollectionTarget(target) {
 export function formatAction(actionKey, target, args = {}) {
     const el = formatElementTarget(target);
     switch (actionKey) {
+        // Component testing only (@testspectra/react's Spectra.mount()) — target is a component name,
+        // not a DOM selector, so it's rendered plainly rather than through formatElementTarget's
+        // `element "..."` wrapping.
+        case 'mount':
+            return `Mount component "${extractTargetString(target) || '{component}'}"`;
         case 'click':
             return `Click on ${el}`;
         case 'doubleClick':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testspectra/cli",
-  "version": "1.1.8-rc.1",
+  "version": "1.1.8-rc.3",
   "description": "TestSpectra Zero-Config Cross-Platform Test Runner CLI",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -35,9 +35,9 @@
   ],
   "dependencies": {
     "@clack/prompts": "catalog:",
-    "@testspectra/matchers": "^1.1.8-rc.1",
-    "@testspectra/react": "workspace:*",
-    "@testspectra/skills": "^1.1.8-rc.1",
+    "@testspectra/matchers": "^1.1.8-rc.3",
+    "@testspectra/react": "^1.1.8-rc.3",
+    "@testspectra/skills": "^1.1.8-rc.3",
     "chalk": "catalog:",
     "commander": "catalog:",
     "dotenv": "catalog:",

package/templates/default/CLAUDE.md

@@ -1,16 +1,16 @@
-# CLAUDE.md - TestSpectra Framework Conventions
-
-## Commands
-- Run all Web tests: `pnpm test:web` (or `spectra run -t web`)
-- Run all Mobile tests: `pnpm test:mobile` (or `spectra run -t mobile`)
-- Run Android tests: `pnpm test:android` (or `spectra run -t android`)
-- Run iOS tests: `pnpm test:ios` (or `spectra run -t ios`)
-- Run specific spec: `spectra run "specs/Playground/TC-0001-form-controls/mobile.test.ts" -t mobile`
-- Type checking: `pnpm type-check` (or `tsc -b`)
-- Preflight doctor: `pnpm doctor` (or `spectra doctor`)
-- Sync ambient types: `pnpm sync-types`
-
-## Element Selectors
-- `~name` → **accessibility id** (Android `content-desc`, RN `accessibilityLabel`, web `aria-label`) — the portable default.
-- `#name` → **native id** (Android `resource-id`, RN `testID`, web CSS `id`).
-- Each prefix maps to exactly one attribute (no silent cross-matching). Prefer `~` for user-perceivable elements, `#` for stable test ids. See `docs/v2/cli/selectors.md`.
+# CLAUDE.md - TestSpectra Framework Conventions
+
+## Commands
+- Run all Web tests: `pnpm test:web` (or `spectra run -t web`)
+- Run all Mobile tests: `pnpm test:mobile` (or `spectra run -t mobile`)
+- Run Android tests: `pnpm test:android` (or `spectra run -t android`)
+- Run iOS tests: `pnpm test:ios` (or `spectra run -t ios`)
+- Run specific spec: `spectra run "specs/Playground/TC-0001-form-controls/mobile.test.ts" -t mobile`
+- Type checking: `pnpm type-check` (or `tsc -b`)
+- Preflight doctor: `pnpm doctor` (or `spectra doctor`)
+- Sync ambient types: `pnpm sync-types`
+
+## Element Selectors
+- `~name` → **accessibility id** (Android `content-desc`, RN `accessibilityLabel`, web `aria-label`) — the portable default.
+- `#name` → **native id** (Android `resource-id`, RN `testID`, web CSS `id`).
+- Each prefix maps to exactly one attribute (no silent cross-matching). Prefer `~` for user-perceivable elements, `#` for stable test ids. See `docs/v2/cli/selectors.md`.

package/templates/default/global-hooks/after/mobile.hook.ts

@@ -1,3 +1,3 @@
-export default async function () {
-  // Global mobile teardown
-}
+export default async function () {
+  // Global mobile teardown
+}

package/templates/default/global-hooks/after/web.hook.ts

@@ -1,3 +1,3 @@
-export default async function () {
-  // Global web teardown
-}
+export default async function () {
+  // Global web teardown
+}

package/templates/default/global-hooks/before/mobile.hook.ts

@@ -1,3 +1,3 @@
-export default async function () {
-  // Global mobile initialization
-}
+export default async function () {
+  // Global mobile initialization
+}

package/templates/default/global-hooks/before/web.hook.ts

@@ -1,3 +1,3 @@
-export default async function () {
-  // Global web initialization
-}
+export default async function () {
+  // Global web initialization
+}

package/templates/default/package.json

@@ -17,8 +17,8 @@
     "postinstall": "spectra sync-types"
   },
   "devDependencies": {
-    "@testspectra/cli": "^1.1.8-rc.1",
-    "@testspectra/matchers": "^1.1.8-rc.1",
+    "@testspectra/cli": "^1.1.8-rc.3",
+    "@testspectra/matchers": "^1.1.8-rc.3",
     "@types/node": "^20.14.0",
     "@wdio/cli": "^9.2.8",
     "@wdio/local-runner": "^9.2.8",

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

@@ -1,5 +1,5 @@
-class AuthPage {
-  get statusBadge() { return Spectra.get("~auth-status-badge"); }
-}
-
-export default new AuthPage();
+class AuthPage {
+  get statusBadge() { return Spectra.get("~auth-status-badge"); }
+}
+
+export default new AuthPage();

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

@@ -1,10 +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();
+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,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();