@testspectra/cli 1.1.8-rc.9 → 1.1.10

package/templates/nx/spectra.config.ts

@@ -3,6 +3,19 @@ import { defineConfig } from "@testspectra/cli";
 export default defineConfig({
   webConfig: {
     baseUrl: "http://localhost:5173",
+    hosts: {
+      // Named host aliases for microfrontends and multi-entrypoint apps
+      // e.g. sso: "https://sso.local:5174", admin: "https://admin.local:5176"
+    },
+    devServers: [
+      // Auto-start and healthcheck local development servers before running tests
+      // {
+      //   name: "app",
+      //   command: "pnpm dev",
+      //   url: "http://localhost:5173",
+      //   reuseExistingServer: true,
+      // },
+    ],
     maxConcurrentSessions: "1",
     headless: true,
     implicitWait: "5000",

package/templates/react-component/package.json

@@ -14,9 +14,9 @@
     "postinstall": "spectra sync-types"
   },
   "devDependencies": {
-    "@testspectra/cli": "link:../..",
-    "@testspectra/matchers": "link:../../../tools/matchers",
-    "@testspectra/react": "link:../../../tools/react",
+    "@testspectra/cli": "^1.1.10",
+    "@testspectra/matchers": "^1.1.10",
+    "@testspectra/react": "^1.1.10",
     "@types/node": "^20.14.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

package/templates/react-component/page-objects/BadgeComponent/web.ts

@@ -1,22 +1,22 @@
 class BadgeComponent {
   /** Root badge element */
   get root() {
-    return Spectra.get("[data-testid='testspectra-badge']");
+    return Spectra.get('~badge');
   }
 
   /** Dot indicator element */
   get dot() {
-    return Spectra.get("[data-testid='badge-dot']");
+    return Spectra.get('~badge-dot');
   }
 
   /** Badge label text element */
   get label() {
-    return Spectra.get("[data-testid='badge-label']");
+    return Spectra.get('~badge-label');
   }
 
   /** Lookup badge by severity attribute */
   bySeverity(severity: 'info' | 'success' | 'warning' | 'danger') {
-    return Spectra.get(`[data-testid='testspectra-badge'][data-severity='${severity}']`);
+    return Spectra.get(`~badge[data-severity='${severity}']`);
   }
 }
 

package/templates/react-component/page-objects/ButtonComponent/web.ts

@@ -1,17 +1,17 @@
 class ButtonComponent {
   /** Root button element */
   get root() {
-    return Spectra.get("[data-testid='testspectra-button']");
+    return Spectra.get('~button');
   }
 
   /** Label element inside button */
   get label() {
-    return Spectra.get("[data-testid='button-label']");
+    return Spectra.get('~button-label');
   }
 
   /** Optional icon element */
   get icon() {
-    return Spectra.get("[data-testid='button-icon']");
+    return Spectra.get('~button-icon');
   }
 
   /** Lookup button element by visible text */

package/templates/react-component/page-objects/InputComponent/web.ts

@@ -1,7 +1,7 @@
 class InputComponent {
   /** Root input element */
   get root() {
-    return Spectra.get("[data-testid='testspectra-input']");
+    return Spectra.get('~input');
   }
 
   /** Lookup input element by placeholder substring */

package/templates/react-component/specs/ButtonComponent/TC-0001-button-rendering-and-click/web.test.tsx

@@ -22,7 +22,4 @@ it('Verify button render, text, and click with Spectra DSL', async () => {
   await ButtonComponent.root.shouldHaveText('Save Changes');
   await ButtonComponent.root.shouldHaveAttribute('data-variant', 'primary');
   await ButtonComponent.root.click();
-
-  // Verify callback state
-  expect(isClicked).toBe(true);
 });

package/templates/react-component/specs/ButtonComponent/TC-0004-disabled-button-not-clickable/web.test.tsx

@@ -1,22 +1,13 @@
 import { Button } from '../../../src/components/Button/Button.js';
 
 it('Verify disabled button cannot be clicked', async () => {
-  let isClicked = false;
-
   await Spectra.mount(
     <Button
       label="Disabled Action"
       disabled
-      onClick={() => {
-        isClicked = true;
-      }}
     />,
   );
 
   await ButtonComponent.root.shouldBeVisible();
   await ButtonComponent.root.shouldBeDisabled();
-
-  // Attempt click - should not fire callback
-  await ButtonComponent.root.click().catch(() => {});
-  expect(isClicked).toBe(false);
 });

package/templates/react-component/specs/ButtonComponent/TC-0005-button-renders-icon/web.test.tsx

@@ -1,7 +1,7 @@
 import { Button } from '../../../src/components/Button/Button.js';
 
 it('Verify button renders optional icon', async () => {
-  await Spectra.mount(<Button label="Download Report" icon={<span data-testid="button-icon">📥</span>} />);
+  await Spectra.mount(<Button label="Download Report" icon={<span aria-label="button-icon">📥</span>} />);
 
   await ButtonComponent.icon.shouldBeVisible();
   await ButtonComponent.icon.shouldHaveText('📥');

package/templates/react-component/specs/InputComponent/TC-0003-input-typing-and-clear/web.test.tsx

@@ -2,15 +2,10 @@ import { Input } from '../../../src/components/Input/Input.js';
 import { withProviders } from '../../../src/test-utils.js';
 
 it('Verify input placeholder and typing interaction', async () => {
-  let currentVal = '';
-
   await Spectra.mount(
     withProviders(
       <Input
         placeholder="Enter email address"
-        onChange={(e) => {
-          currentVal = e.target.value;
-        }}
       />,
     ),
   );
@@ -19,10 +14,11 @@ it('Verify input placeholder and typing interaction', async () => {
   await InputComponent.root.shouldBeVisible();
   await InputComponent.byPlaceholder('email address').shouldBeVisible();
 
-  // 2. Type text using Spectra DSL
+  // 2. Type text using Spectra DSL and verify value
   await InputComponent.root.type('test@example.com');
   await InputComponent.root.shouldHaveValue('test@example.com');
 
-  // 3. Verify onChange state
-  expect(currentVal).toBe('test@example.com');
+  // 3. Clear text using Spectra DSL and verify cleared state
+  await InputComponent.root.clear();
+  await InputComponent.root.shouldHaveValue('');
 });

package/templates/react-component/spectra.config.ts

@@ -6,22 +6,12 @@ export default defineConfig({
     maxConcurrentSessions: "4",
     headless: true,
     implicitWait: "5000",
-    pageLoadTimeout: "30000",
-    scriptTimeout: "30000",
     parallelizationMode: "testcase",
   },
-  browsers: [
-    {
-      id: "chrome-desktop",
-      type: "chrome",
-      mobileEmulation: false,
-    },
-  ],
   executionConfig: {
     networkMonitoringEnabled: true,
     fastResponseTime: "200",
     normalResponseTime: "1000",
     monitoredDomains: [],
-    environmentVariables: [],
   },
 });

package/templates/react-component/src/components/Badge/Badge.tsx

@@ -29,7 +29,7 @@ export const Badge: React.FC<BadgeProps> = ({
 
   return (
     <span
-      data-testid="testspectra-badge"
+      aria-label="badge"
       data-severity={severity}
       style={{
         display: 'inline-flex',
@@ -45,7 +45,7 @@ export const Badge: React.FC<BadgeProps> = ({
     >
       {dot && (
         <span
-          data-testid="badge-dot"
+          aria-label="badge-dot"
           style={{
             width: '6px',
             height: '6px',
@@ -54,7 +54,7 @@ export const Badge: React.FC<BadgeProps> = ({
           }}
         />
       )}
-      <span data-testid="badge-label">{label}</span>
+      <span aria-label="badge-label">{label}</span>
     </span>
   );
 };

package/templates/react-component/src/components/Button/Button.tsx

@@ -6,6 +6,7 @@ export interface ButtonProps {
   disabled?: boolean;
   onClick?: () => void;
   icon?: React.ReactNode;
+  ariaLabel?: string;
 }
 
 export const Button: React.FC<ButtonProps> = ({
@@ -14,6 +15,7 @@ export const Button: React.FC<ButtonProps> = ({
   disabled = false,
   onClick,
   icon,
+  ariaLabel,
 }) => {
   const getBackgroundColor = () => {
     if (disabled) return '#9ca3af';
@@ -31,7 +33,7 @@ export const Button: React.FC<ButtonProps> = ({
   return (
     <button
       type="button"
-      data-testid="testspectra-button"
+      aria-label={ariaLabel || 'button'}
       data-variant={variant}
       disabled={disabled}
       onClick={onClick}
@@ -50,8 +52,8 @@ export const Button: React.FC<ButtonProps> = ({
         transition: 'background-color 0.2s ease',
       }}
     >
-      {icon && <span data-testid="button-icon">{icon}</span>}
-      <span>{label}</span>
+      {icon && <span aria-label="button-icon">{icon}</span>}
+      <span aria-label="button-label">{label}</span>
     </button>
   );
 };

package/templates/react-component/src/components/Input/Input.tsx

@@ -15,18 +15,17 @@ export const Input: React.FC<InputProps> = ({
   defaultValue,
   disabled = false,
   onChange,
-  ariaLabel,
+  ariaLabel = 'input',
 }) => {
   return (
     <input
       type="text"
-      data-testid="testspectra-input"
+      aria-label={ariaLabel}
       placeholder={placeholder}
       value={value}
       defaultValue={defaultValue}
       disabled={disabled}
       onChange={onChange}
-      aria-label={ariaLabel}
       style={{
         padding: '8px 12px',
         borderRadius: '6px',