xmlui 0.10.14 → 0.10.16

package/dist/scripts/src/components/TextBox/TextBox.spec.js

@@ -15,233 +15,271 @@ const fixtures_1 = require("../../testing/fixtures");
 // BASIC FUNCTIONALITY TESTS
 // =============================================================================
 fixtures_1.test.describe("Basic Functionality", () => {
-    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component renders with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox label="Username" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("Username")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("initialValue sets field value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox initialValue="test value" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("test value");
-    }));
-    (0, fixtures_1.test)("initialValue accepts empty as empty string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox initialValue="" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("initialValue accepts different data types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("component renders with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" label="Username" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
+    }));
+    (0, fixtures_1.test)("initialValue sets field value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" initialValue="test value" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("test value");
+    }));
+    (0, fixtures_1.test)("initialValue accepts empty as empty string", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" initialValue="" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("initialValue accepts different data types", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         // Test string
-        yield initTestBed(`<TextBox initialValue="hello" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("hello");
+        yield initTestBed(`<TextBox testId="test" initialValue="hello" />`);
+        const driver1 = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver1.input).toHaveValue("hello");
         // Test number
-        yield initTestBed(`<TextBox initialValue="{123}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("123");
+        yield initTestBed(`<TextBox testId="test" initialValue="{123}" />`);
+        const driver2 = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver2.input).toHaveValue("123");
         // Test boolean
-        yield initTestBed(`<TextBox initialValue="{true}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("true");
-    }));
-    (0, fixtures_1.test)("initialValue handles null", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox initialValue="{null}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("initialValue handles undefined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox initialValue="{undefined}" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("component accepts user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox />`);
-        yield page.getByRole("textbox").fill("user input");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("user input");
-    }));
-    (0, fixtures_1.test)("component clears input correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox initialValue="initial text" />`);
-        const textbox = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textbox).toHaveValue("initial text");
-        yield textbox.clear();
-        yield (0, fixtures_1.expect)(textbox).toHaveValue("");
-    }));
-    (0, fixtures_1.test)("component required prop adds required attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox required="true" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("required");
-    }));
-    (0, fixtures_1.test)("enabled=false disables control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox enabled="false" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeDisabled();
-    }));
-    (0, fixtures_1.test)("enabled=false prevents user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox enabled="false" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).not.toBeEditable();
-    }));
-    (0, fixtures_1.test)("readOnly prevents editing but allows focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox readOnly="true" initialValue="read only text" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("readonly");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("read only text");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).not.toBeEditable();
-        yield page.getByRole("textbox").focus();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("autoFocus focuses input on mount", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox autoFocus="true" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("autoFocus focuses input on mount with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox autoFocus="true" label="Auto-focused input" />`);
-        yield (0, fixtures_1.expect)(page.getByLabel("Auto-focused input")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("placeholder shows when input is empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox placeholder="Enter text here..." />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("placeholder", "Enter text here...");
-    }));
-    (0, fixtures_1.test)("maxLength limits input length", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox maxLength="5" />`);
-        yield page.getByRole("textbox").fill("12345678");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("12345");
-    }));
-    (0, fixtures_1.test)("can render startIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox startIcon="search" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("img")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("can render endIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox endIcon="search" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("img")).toBeVisible();
+        yield initTestBed(`<TextBox testId="test" initialValue="{true}" />`);
+        const driver3 = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver3.input).toHaveValue("true");
+    }));
+    (0, fixtures_1.test)("initialValue handles null", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" initialValue="{null}" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("initialValue handles undefined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" initialValue="{undefined}" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("component accepts user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield driver.input.fill("user input");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("user input");
+    }));
+    (0, fixtures_1.test)("component clears input correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" initialValue="initial text" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("initial text");
+        yield driver.input.clear();
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("");
+    }));
+    (0, fixtures_1.test)("component required prop adds required attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" required="true" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("required");
+    }));
+    (0, fixtures_1.test)("enabled=false disables control", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" enabled="false" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toBeDisabled();
+    }));
+    (0, fixtures_1.test)("enabled=false prevents user input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" enabled="false" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).not.toBeEditable();
+    }));
+    (0, fixtures_1.test)("readOnly prevents editing but allows focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" readOnly="true" initialValue="read only text" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("readonly");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("read only text");
+        yield (0, fixtures_1.expect)(driver.input).not.toBeEditable();
+        yield driver.input.focus();
+        yield (0, fixtures_1.expect)(driver.input).toBeFocused();
+    }));
+    (0, fixtures_1.test)("autoFocus focuses input on mount", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" autoFocus="true" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toBeFocused();
+    }));
+    (0, fixtures_1.test)("autoFocus focuses input on mount with label", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" autoFocus="true" label="Auto-focused input" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toBeFocused();
+    }));
+    (0, fixtures_1.test)("placeholder shows when input is empty", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" placeholder="Enter text here..." />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("placeholder", "Enter text here...");
+    }));
+    (0, fixtures_1.test)("maxLength limits input length", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" maxLength="5" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield driver.input.fill("12345678");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("12345");
+    }));
+    (0, fixtures_1.test)("can render startIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" startIcon="search" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.startAdornment).toBeVisible();
+    }));
+    (0, fixtures_1.test)("can render endIcon", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" endIcon="search" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.endAdornment).toBeVisible();
     }));
 });
 // =============================================================================
 // ACCESSIBILITY TESTS
 // =============================================================================
 fixtures_1.test.describe("Accessibility", () => {
-    (0, fixtures_1.test)("label is properly associated with input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox label="Username" />`);
-        yield (0, fixtures_1.expect)(page.getByLabel("Username")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component supports keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox label="Input" />`);
-        yield page.keyboard.press("Tab", { delay: 100 });
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeFocused();
-    }));
-    (0, fixtures_1.test)("component supports keyboard navigation from other elements", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, }) {
+    (0, fixtures_1.test)("label is properly associated with input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" label="Username" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
+    }));
+    (0, fixtures_1.test)("component supports keyboard navigation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" label="Input" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield driver.input.focus();
+        yield (0, fixtures_1.expect)(driver.input).toBeFocused();
+    }));
+    (0, fixtures_1.test)("component supports keyboard navigation from other elements", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver, }) {
         yield initTestBed(`
       <Fragment>
         <TextBox testId="first-input" label="First input" />
         <TextBox testId="second-input" label="Second input" />
       </Fragment>
     `);
-        const firstInput = page.getByTestId("first-input").getByRole("textbox");
-        const secondInput = page.getByTestId("second-input").getByRole("textbox");
-        yield firstInput.focus();
-        yield (0, fixtures_1.expect)(firstInput).toBeFocused();
+        const firstInput = yield createTextBoxDriver("first-input");
+        const secondInput = yield createTextBoxDriver("second-input");
+        yield firstInput.input.focus();
+        yield (0, fixtures_1.expect)(firstInput.input).toBeFocused();
         yield page.keyboard.press("Tab", { delay: 100 });
-        yield (0, fixtures_1.expect)(secondInput).toBeFocused();
-    }));
-    (0, fixtures_1.test)("required has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox required="true" label="Required input" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("required");
-        yield (0, fixtures_1.expect)(page.getByText("Required input")).toContainText("*");
-    }));
-    (0, fixtures_1.test)("disabled component has proper attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox enabled="false" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("disabled");
-    }));
-    (0, fixtures_1.test)("readOnly has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox readOnly="true" label="Read-only input" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("readonly");
+        yield (0, fixtures_1.expect)(secondInput.input).toBeFocused();
+    }));
+    (0, fixtures_1.test)("required has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" required="true" label="Required input" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("required");
+        yield (0, fixtures_1.expect)(driver.label).toContainText("*");
+    }));
+    (0, fixtures_1.test)("disabled component has proper attribute", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" enabled="false" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("disabled");
+    }));
+    (0, fixtures_1.test)("readOnly has proper ARIA attributes", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" readOnly="true" label="Read-only input" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("readonly");
+        yield (0, fixtures_1.expect)(driver.label).toContainText("Read-only input");
+        yield (0, fixtures_1.expect)(driver.input).not.toBeEditable();
     }));
 });
 // =============================================================================
 // LABEL POSITIONING TESTS
 // =============================================================================
 fixtures_1.test.describe("Label", () => {
-    (0, fixtures_1.test)("labelPosition=start positions label before input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox direction="ltr" label="test" labelPosition="start" />`);
-        const { left: textboxLeft } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
-        const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
+    (0, fixtures_1.test)("labelPosition=start positions label before input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" direction="ltr" label="test" labelPosition="start" />`);
+        const driver = yield createTextBoxDriver("test");
+        const { left: textboxLeft } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        const { right: labelRight } = yield (0, component_test_helpers_1.getBounds)(driver.label);
         (0, fixtures_1.expect)(labelRight).toBeLessThan(textboxLeft);
     }));
-    (0, fixtures_1.test)("labelPosition=end positions label after input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox direction="ltr" label="test" labelPosition="end" />`);
-        const { right: textboxRight } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
-        const { left: labelLeft } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
+    (0, fixtures_1.test)("labelPosition=end positions label after input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" direction="ltr" label="test" labelPosition="end" />`);
+        const driver = yield createTextBoxDriver("test");
+        const { right: textboxRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        const { left: labelLeft } = yield (0, component_test_helpers_1.getBounds)(driver.label);
         (0, fixtures_1.expect)(labelLeft).toBeGreaterThan(textboxRight);
     }));
-    (0, fixtures_1.test)("labelPosition=top positions label above input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox label="test" labelPosition="top" />`);
-        const { top: textboxTop } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
-        const { bottom: labelBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
+    (0, fixtures_1.test)("labelPosition=top positions label above input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" label="test" labelPosition="top" />`);
+        const driver = yield createTextBoxDriver("test");
+        const { top: textboxTop } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        const { bottom: labelBottom } = yield (0, component_test_helpers_1.getBounds)(driver.label);
         (0, fixtures_1.expect)(labelBottom).toBeLessThan(textboxTop);
     }));
-    (0, fixtures_1.test)("labelPosition=bottom positions label below input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox label="test" labelPosition="bottom" />`);
-        const { bottom: textboxBottom } = yield (0, component_test_helpers_1.getBounds)(page.getByLabel("test"));
-        const { top: labelTop } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test"));
+    (0, fixtures_1.test)("labelPosition=bottom positions label below input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" label="test" labelPosition="bottom" />`);
+        const driver = yield createTextBoxDriver("test");
+        const { bottom: textboxBottom } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        const { top: labelTop } = yield (0, component_test_helpers_1.getBounds)(driver.label);
         (0, fixtures_1.expect)(labelTop).toBeGreaterThan(textboxBottom);
     }));
-    (0, fixtures_1.test)("labelWidth applies custom label width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("labelWidth applies custom label width", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         const expected = 200;
-        yield initTestBed(`<TextBox label="test test" labelWidth="${expected}px" />`);
-        const { width } = yield (0, component_test_helpers_1.getBounds)(page.getByText("test test"));
+        yield initTestBed(`<TextBox testId="test" label="test test" labelWidth="${expected}px" />`);
+        const driver = yield createTextBoxDriver("test");
+        const { width } = yield (0, component_test_helpers_1.getBounds)(driver.label);
         (0, fixtures_1.expect)(width).toEqual(expected);
     }));
-    (0, fixtures_1.test)("labelBreak enables label line breaks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("labelBreak enables label line breaks", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         const labelText = "Very long label text that should break";
         const commonProps = `label="${labelText}" labelWidth="100px"`;
         yield initTestBed(`<Fragment>
         <TextBox ${commonProps} testId="break" labelBreak="{true}" />
         <TextBox ${commonProps} testId="oneLine" labelBreak="{false}" />
       </Fragment>`);
-        const labelBreak = page.getByTestId("break").getByText(labelText);
-        const labelOneLine = page.getByTestId("oneLine").getByText(labelText);
-        const { height: heightBreak } = yield (0, component_test_helpers_1.getBounds)(labelBreak);
-        const { height: heightOneLine } = yield (0, component_test_helpers_1.getBounds)(labelOneLine);
+        const driverBreak = yield createTextBoxDriver("break");
+        const driverOneLine = yield createTextBoxDriver("oneLine");
+        const { height: heightBreak } = yield (0, component_test_helpers_1.getBounds)(driverBreak.label);
+        const { height: heightOneLine } = yield (0, component_test_helpers_1.getBounds)(driverOneLine.label);
         (0, fixtures_1.expect)(heightBreak).toBeGreaterThan(heightOneLine);
     }));
-    (0, fixtures_1.test)("component handles invalid labelPosition gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox labelPosition="invalid" label="test" />`);
-        yield (0, fixtures_1.expect)(page.getByLabel("test")).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByText("test")).toBeVisible();
+    (0, fixtures_1.test)("component handles invalid labelPosition gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="test" labelPosition="invalid" label="test" />`);
+        const driver = yield createTextBoxDriver("test");
+        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.input).toBeVisible();
     }));
 });
 // =============================================================================
 // EVENT HANDLING TESTS
 // =============================================================================
 fixtures_1.test.describe("Event Handling", () => {
-    (0, fixtures_1.test)("didChange event fires on input change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("didChange event fires on input change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         const { testStateDriver } = yield initTestBed(`
-      <TextBox onDidChange="testState = 'changed'" />
+      <TextBox testId="test" onDidChange="testState = 'changed'" />
     `);
-        yield page.getByRole("textbox").fill("test");
+        const driver = yield createTextBoxDriver("test");
+        yield driver.input.fill("test");
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("changed");
     }));
-    (0, fixtures_1.test)("didChange event passes new value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("didChange event passes new value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         const { testStateDriver } = yield initTestBed(`
-      <TextBox onDidChange="arg => testState = arg" />
+      <TextBox testId="test" onDidChange="arg => testState = arg" />
     `);
-        yield page.getByRole("textbox").fill("test value");
+        const driver = yield createTextBoxDriver("test");
+        yield driver.input.fill("test value");
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("test value");
     }));
-    (0, fixtures_1.test)("gotFocus event fires on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("gotFocus event fires on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         const { testStateDriver } = yield initTestBed(`
-      <TextBox onGotFocus="testState = 'focused'" />
+      <TextBox testId="test" onGotFocus="testState = 'focused'" />
     `);
-        yield page.getByRole("textbox").focus();
+        const driver = yield createTextBoxDriver("test");
+        yield driver.input.focus();
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("focused");
     }));
-    (0, fixtures_1.test)("component lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component lostFocus event fires on blur", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         const { testStateDriver } = yield initTestBed(`
-      <TextBox onLostFocus="testState = 'blurred'" />
+      <TextBox testId="test" onLostFocus="testState = 'blurred'" />
     `);
-        yield page.getByRole("textbox").focus();
-        yield page.getByRole("textbox").blur();
+        const driver = yield createTextBoxDriver("test");
+        yield driver.input.focus();
+        yield driver.input.blur();
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("blurred");
     }));
-    (0, fixtures_1.test)("events do not fire when component is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("events do not fire when component is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         const { testStateDriver } = yield initTestBed(`
-      <TextBox enabled="false" didChange="testState = 'changed'" gotFocus="testState = 'focused'" />
+      <TextBox testId="test" enabled="false" didChange="testState = 'changed'" gotFocus="testState = 'focused'" />
     `);
-        yield page.getByRole("textbox").focus();
-        yield page.getByRole("textbox").fill("test", { force: true });
+        const driver = yield createTextBoxDriver("test");
+        yield driver.input.focus();
+        yield driver.input.fill("test", { force: true });
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual(null);
     }));
 });
@@ -258,26 +296,28 @@ fixtures_1.test.describe("Api", () => {
     `);
         yield (0, fixtures_1.expect)(page.getByTestId("value")).toHaveText("initial");
     }));
-    (0, fixtures_1.test)("component value API returns state after change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component value API returns state after change", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver }) {
         yield initTestBed(`
       <Fragment>
-        <TextBox id="myTextBox" />
+        <TextBox id="myTextBox" testId="myTextBox" />
         <Text testId="value">{myTextBox.value}</Text>
       </Fragment>
     `);
+        const driver = yield createTextBoxDriver("myTextBox");
         yield (0, fixtures_1.expect)(page.getByTestId("value")).toHaveText("");
-        yield page.getByRole("textbox").fill("new value");
+        yield driver.input.fill("new value");
         yield (0, fixtures_1.expect)(page.getByTestId("value")).toHaveText("new value");
     }));
-    (0, fixtures_1.test)("component setValue API updates state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component setValue API updates state", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver }) {
         yield initTestBed(`
       <Fragment>
-        <TextBox id="myTextBox" />
+        <TextBox id="myTextBox" testId="myTextBox" />
         <Button testId="setBtn" onClick="myTextBox.setValue('api value')" />
       </Fragment>
     `);
+        const driver = yield createTextBoxDriver("myTextBox");
         yield page.getByTestId("setBtn").click();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("api value");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("api value");
     }));
     (0, fixtures_1.test)("component setValue API triggers events", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
         const { testStateDriver } = yield initTestBed(`
@@ -289,103 +329,83 @@ fixtures_1.test.describe("Api", () => {
         yield page.getByTestId("setBtn").click();
         yield fixtures_1.expect.poll(testStateDriver.testState).toEqual("api-changed");
     }));
-    (0, fixtures_1.test)("focus API focuses the input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("focus API focuses the input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver }) {
         yield initTestBed(`
       <Fragment>
         <TextBox id="myTextBox" />
         <Button testId="focusBtn" onClick="myTextBox.focus()">Focus</Button>
       </Fragment>
     `);
-        const textbox = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textbox).not.toBeFocused();
+        const driver = yield createTextBoxDriver("myTextBox");
+        yield (0, fixtures_1.expect)(driver.input).not.toBeFocused();
         yield page.getByTestId("focusBtn").click();
-        yield (0, fixtures_1.expect)(textbox).toBeFocused();
+        yield (0, fixtures_1.expect)(driver.input).toBeFocused();
     }));
-    (0, fixtures_1.test)("focus API does nothing when component is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("focus API does nothing when component is disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver }) {
         yield initTestBed(`
       <Fragment>
         <TextBox id="myTextBox" enabled="false" />
         <Button testId="focusBtn" onClick="myTextBox.focus()">Focus</Button>
       </Fragment>
     `);
+        const driver = yield createTextBoxDriver("myTextBox");
         yield page.getByTestId("focusBtn").click();
-        const textbox = page.getByRole("textbox");
-        yield (0, fixtures_1.expect)(textbox).not.toBeFocused();
+        yield (0, fixtures_1.expect)(driver.input).not.toBeFocused();
     }));
 });
 // =============================================================================
 // INPUT ADORNMENTS TESTS
 // =============================================================================
 fixtures_1.test.describe("Input Adornments", () => {
-    (0, fixtures_1.test)("startText displays at beginning of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox testId="input" direction="ltr" startText="$" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("$"));
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("$");
+    (0, fixtures_1.test)("startText displays at beginning of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="input" startText="$" />`);
+        const driver = yield createTextBoxDriver("input");
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(driver.startAdornment);
+        yield (0, fixtures_1.expect)(driver.startAdornment).toContainText("$");
         (0, fixtures_1.expect)(textRight - compLeft).toBeLessThanOrEqual(compRight - textLeft);
     }));
-    (0, fixtures_1.test)("startText displays at beginning of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox testId="input" direction="rtl" startText="$" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("$"));
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("$");
-        (0, fixtures_1.expect)(textRight - compLeft).toBeGreaterThanOrEqual(compRight - textLeft);
-    }));
-    (0, fixtures_1.test)("endText displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox testId="input" direction="ltr" endText="USD" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("USD"));
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("USD");
+    (0, fixtures_1.test)("endText displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="input" endText="USD" />`);
+        const driver = yield createTextBoxDriver("input");
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(driver.endAdornment);
+        yield (0, fixtures_1.expect)(driver.endAdornment).toContainText("USD");
         (0, fixtures_1.expect)(textRight - compLeft).toBeGreaterThanOrEqual(compRight - textLeft);
     }));
-    (0, fixtures_1.test)("endText displays at end of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox testId="input" direction="rtl" endText="USD" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: textLeft, right: textRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("USD"));
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("USD");
-        (0, fixtures_1.expect)(textRight - compLeft).toBeLessThanOrEqual(compRight - textLeft);
-    }));
-    (0, fixtures_1.test)("startIcon displays at beginning of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox testId="input" direction="ltr" startIcon="search" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img"));
+    (0, fixtures_1.test)("startIcon displays at beginning of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="input" startIcon="search" />`);
+        const driver = yield createTextBoxDriver("input");
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(driver.startAdornment);
         (0, fixtures_1.expect)(iconRight - compLeft).toBeLessThanOrEqual(compRight - iconLeft);
     }));
-    (0, fixtures_1.test)("startIcon displays at beginning of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox testId="input" direction="rtl" startIcon="search" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img"));
-        (0, fixtures_1.expect)(iconRight - compLeft).toBeGreaterThanOrEqual(compRight - iconLeft);
-    }));
-    (0, fixtures_1.test)("endIcon displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("endIcon displays at end of input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" endIcon="search" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img"));
+        const driver = yield createTextBoxDriver("input");
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(driver.endAdornment);
         (0, fixtures_1.expect)(iconRight - compLeft).toBeGreaterThanOrEqual(compRight - iconLeft);
     }));
-    (0, fixtures_1.test)("endIcon displays at end of input (rtl)", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox testId="input" direction="rtl" endIcon="search" />`);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: iconLeft, right: iconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img"));
-        (0, fixtures_1.expect)(iconRight - compLeft).toBeLessThanOrEqual(compRight - iconLeft);
-    }));
-    (0, fixtures_1.test)("multiple adornments can be combined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("multiple adornments can be combined", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`
       <TextBox testId="input" startText="$" endText="USD" startIcon="search" endIcon="search" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("$");
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toContainText("USD");
-        yield (0, fixtures_1.expect)(page.getByRole("img").first()).toBeVisible();
-        yield (0, fixtures_1.expect)(page.getByRole("img").last()).toBeVisible();
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.startAdornment).toContainText("$");
+        yield (0, fixtures_1.expect)(driver.endAdornment).toContainText("USD");
+        yield (0, fixtures_1.expect)(driver.startAdornment).toBeVisible();
+        yield (0, fixtures_1.expect)(driver.endAdornment).toBeVisible();
     }));
-    (0, fixtures_1.test)("all adornments appear in the right place", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("all adornments appear in the right place", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`
       <TextBox testId="input" startText="$" endText="USD" startIcon="search" endIcon="search" direction="ltr" />
     `);
-        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(page.getByTestId("input"));
-        const { left: startTextLeft, right: startTextRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("$"));
-        const { left: endTextLeft, right: endTextRight } = yield (0, component_test_helpers_1.getBounds)(page.getByText("USD"));
-        const { left: startIconLeft, right: startIconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").first());
-        const { left: endIconLeft, right: endIconRight } = yield (0, component_test_helpers_1.getBounds)(page.getByRole("img").last());
+        const driver = yield createTextBoxDriver("input");
+        const { left: compLeft, right: compRight } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        const { left: startTextLeft, right: startTextRight } = yield (0, component_test_helpers_1.getBounds)(driver.startAdornment);
+        const { left: endTextLeft, right: endTextRight } = yield (0, component_test_helpers_1.getBounds)(driver.endAdornment);
+        const { left: startIconLeft, right: startIconRight } = yield (0, component_test_helpers_1.getBounds)(driver.startAdornment);
+        const { left: endIconLeft, right: endIconRight } = yield (0, component_test_helpers_1.getBounds)(driver.endAdornment);
         // Check order of adornments
         (0, fixtures_1.expect)(startTextRight - compLeft).toBeLessThanOrEqual(compRight - startTextLeft);
         (0, fixtures_1.expect)(startIconRight - compLeft).toBeLessThanOrEqual(compRight - startIconLeft);
@@ -397,30 +417,34 @@ fixtures_1.test.describe("Input Adornments", () => {
 // PASSWORD INPUT TESTS
 // =============================================================================
 fixtures_1.test.describe("Password Input", () => {
-    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<PasswordInput />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component has password type", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<PasswordInput />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("type", "password");
-    }));
-    (0, fixtures_1.test)("component has initial value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<PasswordInput initialValue="secret" />`);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("secret");
-    }));
-    (0, fixtures_1.test)("showPasswordToggle displays visibility toggle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component renders", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<PasswordInput testId="input" />`);
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toBeVisible();
+    }));
+    (0, fixtures_1.test)("component has password type", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<PasswordInput testId="input" />`);
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("type", "password");
+    }));
+    (0, fixtures_1.test)("component has initial value", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<PasswordInput testId="input" initialValue="secret" />`);
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("secret");
+    }));
+    (0, fixtures_1.test)("showPasswordToggle displays visibility toggle", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<PasswordInput testId="input" showPasswordToggle="true" />`);
-        yield (0, fixtures_1.expect)(page.getByTestId("input").getByRole("button")).toBeVisible();
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.input).toBeVisible();
     }));
-    (0, fixtures_1.test)("password toggle switches between visible and hidden", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("password toggle switches between visible and hidden", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<PasswordInput testId="input" showPasswordToggle="true" />`);
-        const toggleButton = page.getByTestId("input").getByRole("button");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("type", "password");
-        yield toggleButton.click();
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveAttribute("type", "text");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("type", "password");
+        yield driver.button.click();
+        yield (0, fixtures_1.expect)(driver.input).toHaveAttribute("type", "text");
     }));
-    (0, fixtures_1.test)("custom password icons work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("custom password icons work correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`
       <PasswordInput
         testId="input"
@@ -432,9 +456,10 @@ fixtures_1.test.describe("Password Input", () => {
                 "icon.test": "resources/bell.svg",
             },
         });
-        const icon = page.getByTestId("input").getByRole("img");
+        const driver = yield createTextBoxDriver("input");
+        const icon = driver.button;
         yield (0, fixtures_1.expect)(icon).toBeVisible();
-        yield page.getByTestId("input").getByRole("button").click();
+        yield icon.click();
         yield (0, fixtures_1.expect)(icon).toBeVisible();
     }));
 });
@@ -442,118 +467,130 @@ fixtures_1.test.describe("Password Input", () => {
 // VISUAL STATE TESTS
 // =============================================================================
 fixtures_1.test.describe("Theme Vars", () => {
-    (0, fixtures_1.test)("backgroundColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("backgroundColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" />`, {
             testThemeVars: {
                 "backgroundColor-TextBox": "rgb(255, 240, 240)",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(255, 240, 240)");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(255, 240, 240)");
     }));
-    (0, fixtures_1.test)("borderColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("borderColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" />`, {
             testThemeVars: {
                 "borderColor-TextBox": "rgb(255, 0, 0)",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 0, 0)");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 0, 0)");
     }));
-    (0, fixtures_1.test)("textColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("textColor applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" />`, {
             testThemeVars: {
                 "textColor-TextBox": "rgb(0, 0, 255)",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("color", "rgb(0, 0, 255)");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("color", "rgb(0, 0, 255)");
     }));
-    (0, fixtures_1.test)("focus borderColor applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("focus borderColor applies on focus", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" />`, {
             testThemeVars: {
                 "borderColor-TextBox--focus": "rgb(0, 255, 0)",
             },
         });
-        const input = page.getByTestId("input");
-        yield input.focus();
-        yield (0, fixtures_1.expect)(input).toHaveCSS("border-color", "rgb(0, 255, 0)");
+        const driver = yield createTextBoxDriver("input");
+        yield driver.input.focus();
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(0, 255, 0)");
     }));
-    (0, fixtures_1.test)("disabled backgroundColor applies when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("disabled backgroundColor applies when disabled", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" enabled="false" />`, {
             testThemeVars: {
                 "backgroundColor-TextBox--disabled": "rgb(240, 240, 240)",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("background-color", "rgb(240, 240, 240)");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("background-color", "rgb(240, 240, 240)");
     }));
-    (0, fixtures_1.test)("error borderColor applies with error validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("error borderColor applies with error validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" validationStatus="error" />`, {
             testThemeVars: {
                 "borderColor-TextBox-error": "rgb(255, 0, 0)",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 0, 0)");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 0, 0)");
     }));
-    (0, fixtures_1.test)("warning borderColor applies with warning validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("warning borderColor applies with warning validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" validationStatus="warning" />`, {
             testThemeVars: {
                 "borderColor-TextBox-warning": "rgb(255, 165, 0)",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 165, 0)");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 165, 0)");
     }));
-    (0, fixtures_1.test)("success borderColor applies with valid validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("success borderColor applies with valid validation", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" validationStatus="valid" />`, {
             testThemeVars: {
                 "borderColor-TextBox-success": "rgb(0, 255, 0)",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(0, 255, 0)");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(0, 255, 0)");
     }));
-    (0, fixtures_1.test)("borderRadius applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("borderRadius applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" />`, {
             testThemeVars: {
                 "borderRadius-TextBox": "8px",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-radius", "8px");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-radius", "8px");
     }));
-    (0, fixtures_1.test)("padding applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("padding applies correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" />`, {
             testThemeVars: {
                 "padding-TextBox": "12px",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("padding", "12px");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("padding", "12px");
     }));
 });
 // =============================================================================
 // VALIDATION STATUS TESTS
 // =============================================================================
 fixtures_1.test.describe("Validation", () => {
-    (0, fixtures_1.test)("validationStatus=error correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("validationStatus=error correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" validationStatus="error" />`, {
             testThemeVars: {
                 "borderColor-TextBox-error": "rgb(255, 0, 0)",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 0, 0)");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 0, 0)");
     }));
-    (0, fixtures_1.test)("validationStatus=warning correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("validationStatus=warning correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" validationStatus="warning" />`, {
             testThemeVars: {
                 "borderColor-TextBox-warning": "rgb(255, 165, 0)",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(255, 165, 0)");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(255, 165, 0)");
     }));
-    (0, fixtures_1.test)("validationStatus=valid correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("validationStatus=valid correctly displayed", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" validationStatus="valid" />`, {
             testThemeVars: {
                 "borderColor-TextBox-success": "rgb(0, 255, 0)",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(0, 255, 0)");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(0, 255, 0)");
     }));
-    (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("handles invalid validationStatus gracefully", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<TextBox testId="input" validationStatus="invalid-status" />`, {
             testThemeVars: {
                 "borderColor-TextBox": "rgb(0, 0, 0)",
@@ -562,82 +599,89 @@ fixtures_1.test.describe("Validation", () => {
                 "borderColor-TextBox-success": "rgb(0, 255, 0)",
             },
         });
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).not.toHaveCSS("border-color", "rgb(255, 0, 0)");
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).not.toHaveCSS("border-color", "rgb(255, 165, 0)");
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).not.toHaveCSS("border-color", "rgb(0, 255, 0)");
-        yield (0, fixtures_1.expect)(page.getByTestId("input")).toHaveCSS("border-color", "rgb(0, 0, 0)");
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.component).not.toHaveCSS("border-color", "rgb(255, 0, 0)");
+        yield (0, fixtures_1.expect)(driver.component).not.toHaveCSS("border-color", "rgb(255, 165, 0)");
+        yield (0, fixtures_1.expect)(driver.component).not.toHaveCSS("border-color", "rgb(0, 255, 0)");
+        yield (0, fixtures_1.expect)(driver.component).toHaveCSS("border-color", "rgb(0, 0, 0)");
     }));
 });
 // =============================================================================
 // EDGE CASE TESTS
 // =============================================================================
 fixtures_1.test.describe("Edge Cases", () => {
-    (0, fixtures_1.test)("handle special characters in input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox />`);
-        yield page.getByRole("textbox").fill("Hello 日本語 @#$%!");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("Hello 日本語 @#$%!");
-    }));
-    (0, fixtures_1.test)("handle Unicode characters in input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox />`);
-        yield page.getByRole("textbox").fill("🚀 Unicode test 🎉");
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue("🚀 Unicode test 🎉");
-    }));
-    (0, fixtures_1.test)("component handles very long input text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("handle special characters in input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="input"/>`);
+        const driver = yield createTextBoxDriver("input");
+        yield driver.input.fill("Hello 日本語 @#$%!");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("Hello 日本語 @#$%!");
+    }));
+    (0, fixtures_1.test)("handle Unicode characters in input", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="input"/>`);
+        const driver = yield createTextBoxDriver("input");
+        yield driver.input.fill("🚀 Unicode test 🎉");
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue("🚀 Unicode test 🎉");
+    }));
+    (0, fixtures_1.test)("component handles very long input text", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         const longText = "This is a very long text that might cause layout or performance issues in the component".repeat(10);
-        yield initTestBed(`<TextBox />`);
-        yield page.getByRole("textbox").fill(longText);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue(longText);
-    }));
-    (0, fixtures_1.test)("component handles special characters correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox label="Input with !@#$%^&*()"/>`, {});
-        yield (0, fixtures_1.expect)(page.getByText("Input with !@#$%^&*()")).toBeVisible();
-    }));
-    (0, fixtures_1.test)("component handles extremely long input values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<TextBox />`);
+        yield initTestBed(`<TextBox testId="input"/>`);
+        const driver = yield createTextBoxDriver("input");
+        yield driver.input.fill(longText);
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue(longText);
+    }));
+    (0, fixtures_1.test)("component handles special characters correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="input" label="Input with !@#$%^&*()"/>`, {});
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
+    }));
+    (0, fixtures_1.test)("component handles extremely long input values", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<TextBox testId="input"/>`);
+        const driver = yield createTextBoxDriver("input");
         const veryLongText = "A".repeat(10000);
-        yield page.getByRole("textbox").fill(veryLongText);
-        yield (0, fixtures_1.expect)(page.getByRole("textbox")).toHaveValue(veryLongText);
+        yield driver.input.fill(veryLongText);
+        yield (0, fixtures_1.expect)(driver.input).toHaveValue(veryLongText);
     }));
 });
 // =============================================================================
 // INTEGRATION TESTS
 // =============================================================================
 fixtures_1.test.describe("Integration", () => {
-    (0, fixtures_1.test)("component works correctly in Stack layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component works correctly in Stack layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<Stack><TextBox testId="input" /></Stack>`);
-        const input = page.getByTestId("input");
-        const { width, height } = yield (0, component_test_helpers_1.getBounds)(input);
-        yield (0, fixtures_1.expect)(input).toBeVisible();
+        const driver = yield createTextBoxDriver("input");
+        const { width, height } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        yield (0, fixtures_1.expect)(driver.input).toBeVisible();
         (0, fixtures_1.expect)(width).toBeGreaterThan(0);
         (0, fixtures_1.expect)(height).toBeGreaterThan(0);
     }));
-    (0, fixtures_1.test)("component works correctly in FlowLayout layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component works correctly in FlowLayout layout contexts", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
         yield initTestBed(`<FlowLayout><TextBox testId="input" /></FlowLayout>`);
-        const input = page.getByTestId("input");
-        const { width, height } = yield (0, component_test_helpers_1.getBounds)(input);
-        yield (0, fixtures_1.expect)(input).toBeVisible();
+        const driver = yield createTextBoxDriver("input");
+        const { width, height } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        yield (0, fixtures_1.expect)(driver.input).toBeVisible();
         (0, fixtures_1.expect)(width).toBeGreaterThan(0);
         (0, fixtures_1.expect)(height).toBeGreaterThan(0);
     }));
-    (0, fixtures_1.test)("component integrates with forms correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
-        yield initTestBed(`<Form><TextBox label="Username" /></Form>`);
-        const input = page.getByLabel("Username");
-        const { width, height } = yield (0, component_test_helpers_1.getBounds)(input);
-        yield (0, fixtures_1.expect)(input).toBeVisible();
+    (0, fixtures_1.test)("component integrates with forms correctly", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, createTextBoxDriver }) {
+        yield initTestBed(`<Form><TextBox testId="input" label="Username" /></Form>`);
+        const driver = yield createTextBoxDriver("input");
+        const { width, height } = yield (0, component_test_helpers_1.getBounds)(driver.input);
+        yield (0, fixtures_1.expect)(driver.input).toBeVisible();
         (0, fixtures_1.expect)(width).toBeGreaterThan(0);
         (0, fixtures_1.expect)(height).toBeGreaterThan(0);
     }));
-    (0, fixtures_1.test)("component works with conditional rendering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page }) {
+    (0, fixtures_1.test)("component works with conditional rendering", (_a) => __awaiter(void 0, [_a], void 0, function* ({ initTestBed, page, createTextBoxDriver }) {
         yield initTestBed(`
       <Fragment var.showInput="{true}">
         <Fragment when="{showInput}">
-          <TextBox label="Conditional input" />
+          <TextBox testId="input" label="Conditional input" />
         </Fragment>
         <Button testId="toggleBtn" onClick="showInput = !showInput">Toggle</Button>
       </Fragment>
     `);
-        yield (0, fixtures_1.expect)(page.getByLabel("Conditional input")).toBeVisible();
+        const driver = yield createTextBoxDriver("input");
+        yield (0, fixtures_1.expect)(driver.label).toBeVisible();
         yield page.getByTestId("toggleBtn").click();
-        yield (0, fixtures_1.expect)(page.getByLabel("Conditional input")).not.toBeVisible();
+        yield (0, fixtures_1.expect)(driver.label).not.toBeVisible();
     }));
 });