@testspectra/cli 1.1.7 → 1.1.8-rc.2

package/templates/nx/pnpm-workspace.yaml

@@ -1,9 +1,9 @@
-packages:
-  - "packages/**/*"
-  - "shared/**/*"
-allowBuilds:
-  chromedriver: true
-  edgedriver: true
-  esbuild: true
-  geckodriver: true
-  nx: true
+packages:
+  - "packages/**/*"
+  - "shared/**/*"
+allowBuilds:
+  chromedriver: true
+  edgedriver: true
+  esbuild: true
+  geckodriver: true
+  nx: true

package/templates/nx/shared/testing/page-objects/MatchersPage/mobile.ts

@@ -1,33 +1,33 @@
-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 submitButton() { return Spectra.get("~submit_button"); }
-  get disabledButton() { return Spectra.get("~disabled_button"); }
-  get checkbox() { return Spectra.get("~checkbox"); }
-  get radio() { return Spectra.get("~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 productCards() { return Spectra.getAll("~product_card"); }
-  get emptyList() { return Spectra.getAll("~empty_list"); }
-
-  // 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_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 = "") {}
-}
-
-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 submitButton() { return Spectra.get("~submit_button"); }
+  get disabledButton() { return Spectra.get("~disabled_button"); }
+  get checkbox() { return Spectra.get("~checkbox"); }
+  get radio() { return Spectra.get("~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 productCards() { return Spectra.getAll("~product_card"); }
+  get emptyList() { return Spectra.getAll("~empty_list"); }
+
+  // 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_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 = "") {}
+}
+
+export default new MatchersPage();

package/templates/nx/shared/testing/page-objects/MatchersPage/web.ts

@@ -1,37 +1,91 @@
-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 > *");
+  }
+
+  // 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 Spectra.navigate("/" + (section ? "#" + section : ""));
+  }
+}
+
+export default new MatchersPage();

package/templates/nx/shared/testing/page-objects/NavigationPage/mobile.ts

@@ -1,5 +1,5 @@
-export class NavigationPage {
-  get sidebarLinks() { return Spectra.getAll("~sidebar_link"); }
-}
-
-export default new NavigationPage();
+class NavigationPage {
+  get sidebarLinks() { return Spectra.getAll("~sidebar_link"); }
+}
+
+export default new NavigationPage();

package/templates/nx/shared/testing/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/nx/shared/testing/page-objects/PlaygroundPage/mobile.ts

@@ -1,26 +1,26 @@
-export class PlaygroundPage {
-  get visibleElement() { return Spectra.get("~visible_element"); }
-  get hiddenElement() { return Spectra.get("~hidden_element"); }
-  get existingElement() { return Spectra.get("~existing_element"); }
-  get removedElement() { return Spectra.get("~removed_element"); }
-  get enabledButton() { return Spectra.get("~enabled_button"); }
-  get disabledButton() { return Spectra.get("~disabled_button"); }
-  get termsCheckbox() { return Spectra.get("~terms_checkbox"); }
-  get modeRadio() { return Spectra.get("~mode_radio"); }
-  get emailInput() { return Spectra.get("~email_input"); }
-  get tokenInput() { return Spectra.get("~token_input"); }
-  get exactText() { return Spectra.get("~exact_text"); }
-  get partialText() { return Spectra.get("~partial_text"); }
-  get activeTab() { return Spectra.get("~active_tab"); }
-  get navLink() { return Spectra.get("~nav_link"); }
-  get productItems() { return Spectra.getAll("~product_item"); }
-  get emptyList() { return Spectra.getAll("~empty_list"); }
-
-  async open() {}
-  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("~visible_element"); }
+  get hiddenElement() { return Spectra.get("~hidden_element"); }
+  get existingElement() { return Spectra.get("~existing_element"); }
+  get removedElement() { return Spectra.get("~removed_element"); }
+  get enabledButton() { return Spectra.get("~enabled_button"); }
+  get disabledButton() { return Spectra.get("~disabled_button"); }
+  get termsCheckbox() { return Spectra.get("~terms_checkbox"); }
+  get modeRadio() { return Spectra.get("~mode_radio"); }
+  get emailInput() { return Spectra.get("~email_input"); }
+  get tokenInput() { return Spectra.get("~token_input"); }
+  get exactText() { return Spectra.get("~exact_text"); }
+  get partialText() { return Spectra.get("~partial_text"); }
+  get activeTab() { return Spectra.get("~active_tab"); }
+  get navLink() { return Spectra.get("~nav_link"); }
+  get productItems() { return Spectra.getAll("~product_item"); }
+  get emptyList() { return Spectra.getAll("~empty_list"); }
+
+  async open() {}
+  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/nx/shared/testing/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/nx/shared/testing/project.json

@@ -1,19 +1,19 @@
-{
-  "name": "shared-testing",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "sourceRoot": "shared/testing",
-  "targets": {
-    "type-check": {
-      "executor": "nx:run-commands",
-      "options": {
-        "command": "tsc -b",
-        "cwd": "."
-      }
-    }
-  },
-  "tags": [
-    "scope:shared",
-    "type:shared"
-  ]
-}
+{
+  "name": "shared-testing",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "sourceRoot": "shared/testing",
+  "targets": {
+    "type-check": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "tsc -b",
+        "cwd": "."
+      }
+    }
+  },
+  "tags": [
+    "scope:shared",
+    "type:shared"
+  ]
+}

package/templates/nx/shared/testing/support/actions/fillCredentials/mobile.action.ts

@@ -1,4 +1,4 @@
-export default async function fillCredentials(this: any, email: string, token: string) {
-  await this.get("~email_input").type(email);
-  await this.get("~token_input").type(token);
-}
+export default async function (this: any, email: string, token: string) {
+  await this.get("~email_input").type(email);
+  await this.get("~token_input").type(token);
+}

package/templates/nx/shared/testing/support/actions/fillCredentials/web.action.ts

@@ -1,4 +1,4 @@
-export default async function fillCredentials(this: any, email: string, token: string) {
-  await this.get("#demo-email-input-pg").type(email);
-  await this.get("#demo-token-input-pg").type(token);
-}
+export default async function (this: any, email: string, token: string) {
+  await this.get("#demo-email-input-pg").type(email);
+  await this.get("#demo-token-input-pg").type(token);
+}

package/templates/nx/shared/testing/support/steps/togglePlaygroundStates/mobile.step.ts

@@ -1,3 +1,3 @@
-export default async function togglePlaygroundStates() {
-  await PlaygroundPage.open();
-}
+export default async function () {
+  await PlaygroundPage.open();
+}

package/templates/nx/shared/testing/support/steps/togglePlaygroundStates/web.step.ts

@@ -1,5 +1,5 @@
-export default async function togglePlaygroundStates() {
-  await PlaygroundPage.open();
-  await PlaygroundPage.hiddenElement.shouldBeVisible();
-  await PlaygroundPage.existingElement.shouldExist();
-}
+export default async function () {
+  await PlaygroundPage.open();
+  await PlaygroundPage.hiddenElement.shouldBeVisible();
+  await PlaygroundPage.existingElement.shouldExist();
+}

package/templates/nx/shared/testing/support/steps/verifyPlaygroundState/mobile.step.ts

@@ -1,4 +1,4 @@
-export default async function verifyPlaygroundState() {
-  await PlaygroundPage.open();
-  await PlaygroundPage.visibleElement.shouldBeVisible();
-}
+export default async function () {
+  await PlaygroundPage.open();
+  await PlaygroundPage.visibleElement.shouldBeVisible();
+}

package/templates/nx/shared/testing/support/steps/verifyPlaygroundState/web.step.ts

@@ -1,6 +1,6 @@
-export default async function verifyPlaygroundState() {
-  await PlaygroundPage.open();
-  await PlaygroundPage.visibleElement.shouldBeVisible();
-  await PlaygroundPage.enabledButton.shouldBeEnabled();
-  await PlaygroundPage.termsCheckbox.shouldBeChecked();
-}
+export default async function () {
+  await PlaygroundPage.open();
+  await PlaygroundPage.visibleElement.shouldBeVisible();
+  await PlaygroundPage.enabledButton.shouldBeEnabled();
+  await PlaygroundPage.termsCheckbox.shouldBeChecked();
+}

package/templates/nx/spectra.config.ts

@@ -1,68 +1,52 @@
-import { defineConfig } from "@testspectra/cli";
-
-export default defineConfig({
-  webConfig: {
-    baseUrl: "http://localhost:5173",
-    maxConcurrentSessions: "1",
-    headless: true,
-    implicitWait: "5000",
-    pageLoadTimeout: "30000",
-    scriptTimeout: "30000",
-    parallelizationMode: "testcase",
-  },
-  browsers: [
-    {
-      id: "chrome-desktop",
-      type: "chrome",
-      mobileEmulation: false,
-    },
-  ],
-  androidConfig: {
-    driverServer: "tcp://127.0.0.1:8200",
-    appPackage: "",
-    appActivity: "",
-    autoGrantPermissions: true,
-    noReset: false,
-    implicitWait: "10000",
-    parallelizationMode: "suite",
-    devices: [
-      {
-        id: "emulator-5554",
-        name: "Pixel 7 Pro Emulator",
-        version: "14.0",
-        systemPort: 8200,
-      },
-    ],
-  },
-  iosConfig: {
-    appiumServer: "http://127.0.0.1:4723",
-    automationName: "XCUITest",
-    bundleId: "",
-    autoAcceptAlerts: true,
-    noReset: false,
-    implicitWait: "10000",
-    parallelizationMode: "suite",
-    devices: [
-      {
-        id: "iphone-15-pro",
-        name: "iPhone 15 Pro Simulator",
-        version: "17.0",
-        udid: "auto",
-        wdaLocalPort: 8100,
-      },
-    ],
-  },
-  loadConfig: {
-    virtualUsers: "10",
-    duration: "1m",
-  },
-  loadStages: [],
-  thresholds: [],
-  executionConfig: {
-    networkMonitoringEnabled: true,
-    fastResponseTime: "200",
-    normalResponseTime: "1000",
-    monitoredDomains: [],
-    environmentVariables: [],
-  },
-});
+import { defineConfig } from "@testspectra/cli";
+
+export default defineConfig({
+  webConfig: {
+    baseUrl: "http://localhost:5173",
+    maxConcurrentSessions: "1",
+    headless: true,
+    implicitWait: "5000",
+    parallelizationMode: "testcase",
+  },
+  androidConfig: {
+    driverServer: "tcp://127.0.0.1:8200",
+    appPackage: "",
+    appActivity: "",
+    noReset: false,
+    implicitWait: "10000",
+    parallelizationMode: "suite",
+    devices: [
+      {
+        id: "emulator-5554",
+        name: "Pixel 7 Pro Emulator",
+        version: "14.0",
+        systemPort: 8200,
+      },
+    ],
+  },
+  iosConfig: {
+    appiumServer: "http://127.0.0.1:4723",
+    automationName: "XCUITest",
+    bundleId: "",
+    autoAcceptAlerts: true,
+    noReset: false,
+    implicitWait: "10000",
+    parallelizationMode: "suite",
+    devices: [
+      {
+        id: "iphone-15-pro",
+        name: "iPhone 15 Pro Simulator",
+        version: "17.0",
+        udid: "auto",
+        wdaLocalPort: 8100,
+      },
+    ],
+  },
+  executionConfig: {
+    networkMonitoringEnabled: true,
+    fastResponseTime: "200",
+    normalResponseTime: "1000",
+    monitoredDomains: [],
+    environmentVariables: { DEMO_API_MODE: "sandbox" },
+  },
+});

package/templates/react-component/.cursorrules

@@ -0,0 +1,17 @@
+# TestSpectra AI Instructions for Cursor
+
+You are developing automated tests and React components with the TestSpectra testing framework.
+
+## Key Rules & Conventions
+1. **Zero-Import Standard**: Never add manual `import` statements for Page/Component Objects (`ButtonComponent`, `BadgeComponent`, `InputComponent`), Steps (`Step.*`), Fixtures (`Fixture.*`), or Actions (`Spectra.*`). All typings are provided globally and ambiently via `.testspectra/types/`.
+2. **Component Testing Pattern**: Mount React components using `await Spectra.mount(<Component />)` (real JSX and static component imports are allowed in `*.test.tsx` files, unlike zero-import `*.web.test.ts` E2E specs), then inspect and interact using `Spectra.get(...)` / `Spectra.getAll(...)` or Page/Component Objects. Each `Spectra.mount()` call replaces the previous mount automatically — no cleanup command needed. Run via `spectra test` (a separate suite from E2E's `spectra run`).
+3. **Platform Separation**:
+   - `web.test.ts` / `web.test.tsx` / `web.ts`: Web / Browser component implementations.
+   - `common.test.ts` / `common.ts`: Cross-platform shared implementations.
+4. **CamelCase Naming Convention**:
+   - Component Objects (`page-objects/ButtonComponent/`, `page-objects/BadgeComponent/`)
+   - Reusable Actions (`support/actions/fillInputField/`)
+   - Reusable Steps (`support/steps/verifyButtonState/`)
+5. **Spec-as-Code**:
+   - Suites are defined in `specs/<suite-name>/suite.md` with YAML frontmatter (`id`, `name`, `executionOrder`, `tags`).
+   - Test cases are defined in `specs/<suite-name>/<TC-ID-slug>/spec.md` with YAML frontmatter (`id`, `title`, `priority`, `coverage`).

package/templates/react-component/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "testspectra.testspectra-vscode"
+  ]
+}

package/templates/react-component/CLAUDE.md

@@ -0,0 +1,14 @@
+# TestSpectra React Component Testing Workspace
+
+## Commands
+- `pnpm test` or `spectra test` — Run the component test suite (bundled Vitest browser mode via `@testspectra/react`)
+- `pnpm run test:headed` — Run component tests with a visible browser window
+- `pnpm run sync-types` — Scan workspace and regenerate ambient `.testspectra/types/`
+- `pnpm run type-check` — Type check with `tsc -b`
+
+## Architecture Rules
+
+1. Zero-import standard for `Spectra.*`, `ButtonComponent`, `BadgeComponent`, `InputComponent`, `Step.*`, and `Fixture.*` — these stay ambient globals, auto-discovered from `page-objects/`, `support/steps/`, and `fixtures/`.
+2. Component testing uses `Spectra.mount(<Component />)` — real JSX, real static imports for the component under test are allowed and expected in `*.test.tsx` files (unlike `*.web.test.ts` E2E specs). `Spectra.mount()` always replaces whatever was previously mounted; no manual cleanup call is needed between tests.
+3. Component tests are a **separate test suite** from E2E (`spectra run`) — they live in `specs/<Suite>/<TC-ID>/web.test.tsx` alongside `spec.md`, run via `spectra test`, not `spectra run`. See `docs/v2/features/component-testing/react/`.
+4. Assertions use the same TestSpectra DSL as E2E (`Spectra.get().shouldBeVisible()`, `.shouldHaveText()`, etc.) — nothing new to learn beyond `Spectra.mount()`.