@testspectra/cli 1.0.70 → 1.1.1

package/templates/default/fixtures/apiData.json

@@ -0,0 +1,24 @@
+{
+  "mockPosts": [
+    {
+      "id": 1,
+      "title": "Mocked Post 1 - TestSpectra Matchers",
+      "body": "First mocked post body for verifying GET API interception in TestSpectra."
+    },
+    {
+      "id": 2,
+      "title": "Mocked Post 2 - Cross-Platform Automation",
+      "body": "Second mocked post body for verifying collection and item assertions."
+    }
+  ],
+  "mockNewPost": {
+    "title": "TestSpectra Automated Post",
+    "body": "End-to-End API mock verification with browser.intercept command."
+  },
+  "mockPostResponse": {
+    "id": 101,
+    "title": "TestSpectra Automated Post",
+    "body": "End-to-End API mock verification with browser.intercept command.",
+    "userId": 1
+  }
+}

package/templates/default/package.json

@@ -5,11 +5,20 @@
   "type": "module",
   "scripts": {
     "test": "spectra run",
-    "type-check": "tsc -b"
+    "test:web": "spectra run -t web",
+    "test:mobile": "spectra run -t mobile",
+    "test:android": "spectra run -t android",
+    "test:ios": "spectra run -t ios",
+    "spectra": "spectra",
+    "doctor": "spectra doctor",
+    "watch": "spectra watch",
+    "type-check": "tsc -b",
+    "sync-types": "spectra sync-types",
+    "postinstall": "spectra sync-types"
   },
   "devDependencies": {
-    "@testspectra/cli": "^1.0.70",
-    "@testspectra/matchers": "^1.0.70",
+    "@testspectra/cli": "link:../..",
+    "@testspectra/matchers": "link:../../../tools/matchers",
     "@types/node": "^20.14.0",
     "@wdio/cli": "^9.2.8",
     "@wdio/local-runner": "^9.2.8",
@@ -20,4 +29,4 @@
     "webdriverio": "^9.2.8",
     "typescript": "^5.4.5"
   }
-}
+}

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

@@ -1,21 +1,46 @@
 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"); }
+  get visibleElement() { return Spectra.get("~visible-element"); }
+  get hiddenElement() { return Spectra.get("~hidden-element"); }
+  get existingElement() { return Spectra.get("~existing-element"); }
+  get removableElement() { return Spectra.get("~removable-element"); }
+  get submitButton() { return Spectra.get("~submit-button"); }
+  get disabledButton() { return Spectra.get("~disabled-button"); }
+  get checkbox() { return Spectra.get("~terms-checkbox"); }
+  get radio() { return Spectra.get("~mode-radio"); }
+  get emailInput() { return Spectra.get("~email-input"); }
+  get tokenInput() { return Spectra.get("~token-input"); }
+  get exactText() { return Spectra.get("~exact-text"); }
+  get partialText() { return Spectra.get("~partial-text"); }
+  get activeTab() { return Spectra.get("~active-tab"); }
+  get navLink() { return Spectra.get("~nav-link"); }
+  get styledElement() { return Spectra.get("~styled-element"); }
+  get focusInput() { return Spectra.get("~focus-input"); }
+  get productCards() { return Spectra.getAll("~product-item-1, ~product-item-2, ~product-item-3, ~product-item-4"); }
+  get emptyList() { return Spectra.getAll("~empty-list-item"); }
 
-  async open(_section = "") {}
+  // API Demo elements
+  get fetchApiButton() { return Spectra.get("~fetch-api-btn"); }
+  get fetchStatusBadge() { return Spectra.get("~fetch-status-badge"); }
+  get fetchedItems() { return Spectra.getAll("~api-post-item"); }
+  get fetchLoadingIndicator() { return Spectra.get("~fetch-loading-indicator"); }
+  get postTitleInput() { return Spectra.get("~post-title-input"); }
+  get postBodyInput() { return Spectra.get("~post-body-input"); }
+  get submitPostButton() { return Spectra.get("~submit-post-btn"); }
+  get postStatusBadge() { return Spectra.get("~post-status-badge"); }
+  get postSuccessBanner() { return Spectra.get("~post-success-banner"); }
+  get postResponseJson() { return Spectra.get("~post-response-json"); }
+
+  async open(section = "") {
+    try {
+      const isDrawerOpen = await Spectra.get("~close-sidebar-btn").isDisplayed().catch(() => false);
+      if (!isDrawerOpen) {
+        await Spectra.get("~toggle-sidebar-btn").click();
+      }
+      if (section) {
+        await Spectra.get(`~nav-item-${section}`).click();
+      }
+    } catch {}
+  }
 }
 
 export default new MatchersPage();

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

@@ -12,9 +12,23 @@ export class MatchersPage {
   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 : ""));
   }

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

@@ -1,5 +1,14 @@
 export class NavigationPage {
-  get sidebarLinks() { return Spectra.getAll("~sidebar_link"); }
+  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/PlaygroundPage/mobile.ts

@@ -1,22 +1,32 @@
 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"); }
+  get visibleElement() { return Spectra.get("~playground-visible"); }
+  get hiddenElement() { return Spectra.get("~playground-hidden"); }
+  get existingElement() { return Spectra.get("~playground-existing"); }
+  get removedElement() { return Spectra.get("~playground-removable"); }
+  get enabledButton() { return Spectra.get("~enabled-button"); }
+  get disabledButton() { return Spectra.get("~disabled-button"); }
+  get termsCheckbox() { return Spectra.get("~terms-checkbox"); }
+  get modeRadio() { return Spectra.get("~mode-radio"); }
+  get emailInput() { return Spectra.get("~email-input"); }
+  get tokenInput() { return Spectra.get("~token-input"); }
+  get exactText() { return Spectra.get("~exact-text-el"); }
+  get partialText() { return Spectra.get("~partial-text-el"); }
+  get activeTab() { return Spectra.get("~active-tab-el"); }
+  get navLink() { return Spectra.get("~nav-link-el"); }
+  get styledElement() { return Spectra.get("~playground-styled-element"); }
+  get focusInput() { return Spectra.get("~playground-focus-input"); }
+  get productItems() { return Spectra.getAll("~product-item-1, ~product-item-2, ~product-item-3, ~product-item-4"); }
+  get emptyList() { return Spectra.getAll("~empty-list-el-item"); }
 
-  async open() {}
+  async open() {
+    try {
+      const isDrawerOpen = await Spectra.get("~close-sidebar-btn").isDisplayed().catch(() => false);
+      if (!isDrawerOpen) {
+        await Spectra.get("~toggle-sidebar-btn").click();
+      }
+      await Spectra.get("~nav-item-playground").click();
+    } catch {}
+  }
   async fillCredentials(email = Fixture.playgroundData.defaultEmail, token = Fixture.playgroundData.defaultToken) {
     await this.emailInput.type(email);
     await this.tokenInput.type(token);

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

@@ -13,6 +13,8 @@ export class PlaygroundPage {
   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 > *"); }
 

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

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

package/templates/default/specs/ApiInterception/TC-0008-fetch-mocking/spec.md

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

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

@@ -0,0 +1,27 @@
+it("should mock GET API response using browser.intercept and verify rendered items", async () => {
+  // Navigate to API Fetch section
+  await MatchersPage.open("api-fetch");
+
+  // Setup API interception with Fixture data
+  const mock = await browser.intercept(
+    "/api/posts",
+    "GET",
+    Fixture.apiData.mockPosts
+  );
+
+  // Trigger fetch button
+  await MatchersPage.fetchApiButton.click();
+
+  // Assert status and mocked elements
+  await MatchersPage.fetchStatusBadge.shouldHaveText("200 OK");
+  await MatchersPage.fetchedItems.shouldHaveLength(Fixture.apiData.mockPosts.length);
+  await MatchersPage.fetchedItems.first().shouldContainText(Fixture.apiData.mockPosts[0].title);
+
+  // Dynamically update fixture response
+  await mock.respondWith([
+    { id: 99, title: "Dynamic Updated Mock Title", body: "Updated on the fly" }
+  ]);
+  await MatchersPage.fetchApiButton.click();
+  await MatchersPage.fetchedItems.shouldHaveLength(1);
+  await MatchersPage.fetchedItems.first().shouldContainText("Dynamic Updated Mock Title");
+});

package/templates/default/specs/ApiInterception/TC-0009-post-mocking/mobile.test.ts

@@ -0,0 +1,16 @@
+it("should verify POST API form submission and response payload on Mobile", async () => {
+  // Navigate to API POST section
+  await MatchersPage.open("api-post");
+
+  // Fill in form fields from Fixture
+  await MatchersPage.postTitleInput.type(Fixture.apiData.mockNewPost.title);
+  await MatchersPage.postBodyInput.type(Fixture.apiData.mockNewPost.body);
+
+  // Submit POST form
+  await MatchersPage.submitPostButton.click();
+
+  // Assert response elements and status badge
+  await MatchersPage.postStatusBadge.shouldHaveText("201 Created");
+  await MatchersPage.postSuccessBanner.shouldBeVisible();
+  await MatchersPage.postResponseJson.shouldContainText(Fixture.apiData.mockNewPost.title);
+});

package/templates/default/specs/ApiInterception/TC-0009-post-mocking/spec.md

@@ -0,0 +1,12 @@
+---
+id: TC-0009-post-mocking
+title: Mock and assert POST API requests using browser.intercept
+priority: High
+caseType: Positive
+status: ready-for-automation
+coverage:
+  web: automated
+  mobile: automated
+---
+
+# Mock and assert POST API requests using browser.intercept

package/templates/default/specs/ApiInterception/TC-0009-post-mocking/web.test.ts

@@ -0,0 +1,24 @@
+it("should mock POST API submission using browser.intercept and verify created response", async () => {
+  // Navigate to API POST section
+  await MatchersPage.open("api-post");
+
+  // Setup POST API interception with status 201
+  await browser.intercept(
+    "/api/posts",
+    "POST",
+    Fixture.apiData.mockPostResponse,
+    { statusCode: 201 }
+  );
+
+  // Fill in form fields from Fixture
+  await MatchersPage.postTitleInput.type(Fixture.apiData.mockNewPost.title);
+  await MatchersPage.postBodyInput.type(Fixture.apiData.mockNewPost.body);
+
+  // Submit POST form
+  await MatchersPage.submitPostButton.click();
+
+  // Assert response elements and status
+  await MatchersPage.postStatusBadge.shouldHaveText("201 Created");
+  await MatchersPage.postSuccessBanner.shouldBeVisible();
+  await MatchersPage.postResponseJson.shouldContainText(Fixture.apiData.mockNewPost.title);
+});

package/templates/default/specs/ApiInterception/suite.md

@@ -0,0 +1,9 @@
+---
+id: suite-api-interception
+name: ApiInterception
+description: REST API network mocking, GET/POST payload interception, and status assertions
+executionOrder: 1.4
+parallel: true
+---
+
+# Suite: ApiInterception

package/templates/default/specs/BrowserContext/TC-0007-title-and-navigation/mobile.test.ts

@@ -1,3 +1,9 @@
-it("should verify title on Mobile", async () => {
+it("should verify mobile screen navigation and component collections on Mobile", async () => {
   await MatchersPage.open();
+
+  // Navigation sidebar collection verification
+  await NavigationPage.sidebarLinks.shouldHaveLengthGreaterThan(0);
+
+  // Close sidebar drawer
+  await NavigationPage.closeSidebarButton.click();
 });

package/templates/default/specs/BrowserContext/TC-0007-title-and-navigation/web.test.ts

@@ -1,5 +1,19 @@
-it("should verify browser page title and navigation links on Web", async () => {
+it("should verify browser page title, URL, diagnostics, and navigation on Web", async () => {
   await MatchersPage.open();
-  await browser.shouldContainTitle("TestSpectra");
-  await NavigationPage.sidebarLinks.should("have.length.greaterThan", 0);
+
+  // Browser title assertions
+  await Spectra.browser.shouldHaveTitle("TestSpectra — Matchers API Reference");
+  await Spectra.browser.shouldContainTitle("TestSpectra");
+
+  // Browser URL assertions
+  const currentUrl = await browser.getUrl();
+  await Spectra.browser.shouldHaveUrl(currentUrl);
+  await Spectra.browser.shouldContainUrl("localhost:5173");
+
+  // Page lifecycle and console error diagnostics
+  await Spectra.browser.shouldBeLoaded();
+  await Spectra.browser.shouldHaveNoConsoleErrors();
+
+  // Navigation sidebar collection verification
+  await NavigationPage.sidebarLinks.shouldHaveLengthGreaterThan(0);
 });

package/templates/default/specs/ContentMatchers/TC-0005-text-and-values/mobile.test.ts

@@ -1,3 +1,17 @@
-it("should verify text on Mobile", async () => {
+it("should verify text and value matchers on Mobile", async () => {
   await MatchersPage.open("text");
+
+  // Text assertions (positive and negative)
+  await MatchersPage.exactText.shouldHaveText(Fixture.playgroundData.welcomeText);
+  await MatchersPage.exactText.shouldNotHaveText("Unexpected Text");
+
+  await MatchersPage.partialText.shouldContainText("Welcome");
+  await MatchersPage.partialText.shouldNotContainText("Goodbye");
+
+  // Value assertions (positive and negative)
+  await MatchersPage.emailInput.shouldHaveValue(Fixture.playgroundData.defaultEmail);
+  await MatchersPage.emailInput.shouldNotHaveValue("wrong.user@testspectra.dev");
+
+  await MatchersPage.tokenInput.shouldContainValue("JWT_");
+  await MatchersPage.tokenInput.shouldNotContainValue("EXPIRED_SESSION");
 });

package/templates/default/specs/ContentMatchers/TC-0005-text-and-values/web.test.ts

@@ -1,7 +1,17 @@
 it("should verify text and value matchers on Web", async () => {
   await MatchersPage.open("text");
-  await MatchersPage.exactText.should("have.text", Fixture.playgroundData.welcomeText);
-  await MatchersPage.partialText.should("contain.text", "Welcome");
-  await MatchersPage.emailInput.should("have.value", Fixture.playgroundData.defaultEmail);
-  await MatchersPage.tokenInput.should("contain.value", "JWT_");
+
+  // Text assertions (positive and negative)
+  await MatchersPage.exactText.shouldHaveText(Fixture.playgroundData.welcomeText);
+  await MatchersPage.exactText.shouldNotHaveText("Unexpected Text");
+
+  await MatchersPage.partialText.shouldContainText("Welcome");
+  await MatchersPage.partialText.shouldNotContainText("Goodbye");
+
+  // Value assertions (positive and negative)
+  await MatchersPage.emailInput.shouldHaveValue(Fixture.playgroundData.defaultEmail);
+  await MatchersPage.emailInput.shouldNotHaveValue("wrong.user@testspectra.dev");
+
+  await MatchersPage.tokenInput.shouldContainValue("JWT_");
+  await MatchersPage.tokenInput.shouldNotContainValue("EXPIRED_SESSION");
 });

package/templates/default/specs/ContentMatchers/TC-0006-collections-and-empty/mobile.test.ts

@@ -1,3 +1,11 @@
-it("should verify collection length on Mobile", async () => {
+it("should verify collection lengths and empty lists on Mobile", async () => {
   await MatchersPage.open("length");
+
+  // Receiver assertion methods
+  await MatchersPage.productCards.shouldHaveLength(4);
+  await MatchersPage.productCards.shouldNotHaveLength(0);
+  await MatchersPage.productCards.shouldHaveLengthGreaterThan(0);
+  await MatchersPage.productCards.shouldHaveLengthLessThan(10);
+  await MatchersPage.emptyList.shouldBeEmpty();
+  await MatchersPage.productCards.shouldNotBeEmpty();
 });

package/templates/default/specs/ContentMatchers/TC-0006-collections-and-empty/web.test.ts

@@ -1,6 +1,11 @@
 it("should verify collection lengths and empty lists on Web", async () => {
   await MatchersPage.open("length");
-  await MatchersPage.productCards.should("have.length", 4);
-  await MatchersPage.productCards.should("have.length.greaterThan", 0);
-  await MatchersPage.emptyList.should("be.empty");
+
+  // Receiver assertion methods
+  await MatchersPage.productCards.shouldHaveLength(4);
+  await MatchersPage.productCards.shouldNotHaveLength(0);
+  await MatchersPage.productCards.shouldHaveLengthGreaterThan(0);
+  await MatchersPage.productCards.shouldHaveLengthLessThan(10);
+  await MatchersPage.emptyList.shouldBeEmpty();
+  await MatchersPage.productCards.shouldNotBeEmpty();
 });

package/templates/default/specs/ElementMatchers/TC-0003-visibility-and-dom/mobile.test.ts

@@ -1,3 +1,11 @@
-it("should verify visibility on Mobile", async () => {
+it("should verify visibility and DOM existence matchers on Mobile", async () => {
   await MatchersPage.open("visibility");
+
+  // Element visibility (positive and negative)
+  await MatchersPage.visibleElement.shouldBeVisible();
+  await MatchersPage.hiddenElement.shouldNotBeVisible();
+
+  // DOM existence (positive and negative)
+  await MatchersPage.existingElement.shouldExist();
+  await Spectra.get("~non-existent-element").shouldNotExist();
 });

package/templates/default/specs/ElementMatchers/TC-0003-visibility-and-dom/web.test.ts

@@ -1,5 +1,11 @@
-it("should verify be.visible and exist matchers on Web", async () => {
+it("should verify visibility and DOM existence matchers on Web", async () => {
   await MatchersPage.open("visibility");
-  await MatchersPage.visibleElement.should("be.visible");
-  await MatchersPage.existingElement.should("exist");
+
+  // Element visibility (positive and negative)
+  await MatchersPage.visibleElement.shouldBeVisible();
+  await MatchersPage.hiddenElement.shouldNotBeVisible();
+
+  // DOM existence (positive and negative)
+  await MatchersPage.existingElement.shouldExist();
+  await Spectra.get("#demo-non-existent-el").shouldNotExist();
 });

package/templates/default/specs/ElementMatchers/TC-0004-states-and-attributes/mobile.test.ts

@@ -1,3 +1,29 @@
-it("should verify button state on Mobile", async () => {
+it("should verify interactivity states, classes, attributes, and styling on Mobile", async () => {
   await MatchersPage.open("state");
+
+  // Interactivity & state assertions
+  await MatchersPage.submitButton.shouldBeEnabled();
+  await MatchersPage.submitButton.shouldBeClickable();
+
+  await MatchersPage.disabledButton.shouldBeDisabled();
+  await MatchersPage.disabledButton.shouldNotBeClickable();
+
+  // Checked states
+  await MatchersPage.checkbox.shouldNotBeChecked();
+  await MatchersPage.radio.shouldBeChecked();
+
+  // Focus states
+  await MatchersPage.focusInput.shouldNotBeFocused();
+  await MatchersPage.focusInput.click();
+  await MatchersPage.focusInput.shouldBeFocused();
+
+  // Class, Attribute, and CSS assertions
+  await MatchersPage.activeTab.shouldHaveClass("is-active");
+  await MatchersPage.activeTab.shouldNotHaveClass("is-hidden");
+
+  await MatchersPage.navLink.shouldHaveAttribute("accessibilityLabel", "nav-link");
+  await MatchersPage.navLink.shouldNotHaveAttribute("disabled");
+
+  await MatchersPage.styledElement.shouldHaveCss("color", "rgba(239,68,68,1)");
+  await MatchersPage.styledElement.shouldNotHaveCss("color", "rgba(0,0,255,1)");
 });

package/templates/default/specs/ElementMatchers/TC-0004-states-and-attributes/web.test.ts

@@ -1,8 +1,29 @@
-it("should verify enabled/disabled states and HTML attributes on Web", async () => {
+it("should verify interactivity states, classes, attributes, and CSS styling on Web", async () => {
   await MatchersPage.open("state");
-  await MatchersPage.submitButton.should("be.enabled");
-  await MatchersPage.disabledButton.should("be.disabled");
-  await MatchersPage.checkbox.should("not.be.checked");
-  await MatchersPage.activeTab.should("have.class", "is-active");
-  await MatchersPage.navLink.should("have.attr", "href", Fixture.playgroundData.dashboardHref);
+
+  // Interactivity & state assertions
+  await MatchersPage.submitButton.shouldBeEnabled();
+  await MatchersPage.submitButton.shouldBeClickable();
+
+  await MatchersPage.disabledButton.shouldBeDisabled();
+  await MatchersPage.disabledButton.shouldNotBeClickable();
+
+  // Checked states
+  await MatchersPage.checkbox.shouldNotBeChecked();
+  await MatchersPage.radio.shouldBeChecked();
+
+  // Focus states
+  await MatchersPage.focusInput.shouldNotBeFocused();
+  await MatchersPage.focusInput.click();
+  await MatchersPage.focusInput.shouldBeFocused();
+
+  // Class, Attribute, and CSS assertions
+  await MatchersPage.activeTab.shouldHaveClass("is-active");
+  await MatchersPage.activeTab.shouldNotHaveClass("is-hidden");
+
+  await MatchersPage.navLink.shouldHaveAttribute("href", Fixture.playgroundData.dashboardHref);
+  await MatchersPage.navLink.shouldNotHaveAttribute("disabled");
+
+  await MatchersPage.styledElement.shouldHaveCss("color", "rgba(239,68,68,1)");
+  await MatchersPage.styledElement.shouldNotHaveCss("color", "rgba(0,0,255,1)");
 });

package/templates/default/specs/Playground/TC-0001-form-controls/mobile.test.ts

@@ -1,3 +1,6 @@
-it("should verify playground states (Mobile)", async () => {
+it("should verify live playground form inputs and default states (Mobile)", async () => {
   await Step.verifyPlaygroundState();
+  await PlaygroundPage.emailInput.shouldHaveValue(Fixture.playgroundData.defaultEmail);
+  await PlaygroundPage.tokenInput.shouldContainValue("JWT_");
+  await PlaygroundPage.exactText.shouldHaveText(Fixture.playgroundData.welcomeText);
 });

package/templates/default/specs/Playground/TC-0001-form-controls/web.test.ts

@@ -1,6 +1,6 @@
 it("should verify live playground form inputs and default states (Web)", async () => {
   await Step.verifyPlaygroundState();
-  await PlaygroundPage.emailInput.should("have.value", Fixture.playgroundData.defaultEmail);
-  await PlaygroundPage.tokenInput.should("contain.value", "JWT_");
-  await PlaygroundPage.exactText.should("have.text", Fixture.playgroundData.welcomeText);
+  await PlaygroundPage.emailInput.shouldHaveValue(Fixture.playgroundData.defaultEmail);
+  await PlaygroundPage.tokenInput.shouldContainValue("JWT_");
+  await PlaygroundPage.exactText.shouldHaveText(Fixture.playgroundData.welcomeText);
 });

package/templates/default/specs/Playground/TC-0002-toggle-elements/mobile.test.ts

@@ -1,3 +1,6 @@
-it("should fill credentials (Mobile)", async () => {
+it("should update input values and verify updated state (Mobile)", async () => {
   await PlaygroundPage.open();
+  await PlaygroundPage.fillCredentials("qa.expert@testspectra.dev", "JWT_custom_session_token");
+  await PlaygroundPage.emailInput.shouldHaveValue("qa.expert@testspectra.dev");
+  await PlaygroundPage.tokenInput.shouldContainValue("JWT_custom_session_token");
 });

package/templates/default/specs/Playground/TC-0002-toggle-elements/web.test.ts

@@ -1,6 +1,6 @@
 it("should update input values and verify updated state (Web)", async () => {
   await PlaygroundPage.open();
   await PlaygroundPage.fillCredentials("qa.expert@testspectra.dev", "JWT_custom_session_token");
-  await PlaygroundPage.emailInput.should("have.value", "qa.expert@testspectra.dev");
-  await PlaygroundPage.tokenInput.should("contain.value", "JWT_custom_session_token");
+  await PlaygroundPage.emailInput.shouldHaveValue("qa.expert@testspectra.dev");
+  await PlaygroundPage.tokenInput.shouldContainValue("JWT_custom_session_token");
 });