From 4f925085f73924fb059c8fd3415eb29b30b87b2e Mon Sep 17 00:00:00 2001
From: guynikan <jr-lol@live.com>
Date: Wed, 28 Jan 2026 15:14:38 +0000
Subject: [PATCH 1/5] feat(core): inject data-test-id from component key for
 E2E

- Add data-test-id to custom and base props in renderer orchestrator
- Use FormSchema type in resolveSpec and remove unused getComponentRegistry import
---
 packages/core/src/orchestrator/renderer-orchestrator.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/core/src/orchestrator/renderer-orchestrator.ts b/packages/core/src/orchestrator/renderer-orchestrator.ts
index 5e850f6..c3ae2a8 100644
--- a/packages/core/src/orchestrator/renderer-orchestrator.ts
+++ b/packages/core/src/orchestrator/renderer-orchestrator.ts
@@ -8,11 +8,12 @@
 import type { RuntimeAdapter, ComponentSpec, DebugContextValue } from '../runtime/types';
 import type { FormAdapter } from '../forms/types';
 import type { MiddlewareFn, MiddlewareContext } from '../middleware/types';
-import { getComponentSpec, getComponentRegistry } from '../registry/component-registry';
+import { getComponentSpec } from '../registry/component-registry';
 import { getRendererForType } from '../registry/renderer-registry';
 import { applyMiddlewares } from '../middleware/types';
 import { processValue } from '../expressions/template-processor';
 import { createDefaultResolver } from '../expressions/variable-resolver';
+import { FormSchema } from '../schema/schema-types';
 
 /**
  * Resolution result - successful component resolution
@@ -47,7 +48,7 @@ export interface FactorySetupResult {
  * Resolve component spec from schema
  */
 export function resolveSpec(
-  schema: any,
+  schema: FormSchema,
   componentKey: string,
   components: Record<string, ComponentSpec>,
   localRenderers?: Partial<Record<string, any>>,
@@ -148,6 +149,8 @@ export function createRendererOrchestrator(
         // Build props for custom component
         const customProps = {
           ...customSpec.defaultProps,
+          // Injected for E2E: identifies component key in DOM
+          'data-test-id': `${componentKey}`,
           // Pass the original schema so custom component can access x-component-props, etc.
           schema: processedSchema,
           // Pass the component key
@@ -235,6 +238,8 @@ export function createRendererOrchestrator(
     const baseProps = {
       ...renderSpec.defaultProps,
       ...parentProps,
+      // Injected for E2E: identifies component key in DOM
+      'data-test-id': `${componentKey}`,
       // Add name prop ONLY for field components
       ...(isFieldComponent && currentName ? { name: currentName } : {}),
       ...(Object.keys(componentProps).length > 0 ? { 'x-component-props': componentProps } : {}),

From 00cf7391d6b9fa47e6b5caaaf14a8f501dc90e90 Mon Sep 17 00:00:00 2001
From: guynikan <jr-lol@live.com>
Date: Wed, 28 Jan 2026 15:14:47 +0000
Subject: [PATCH 2/5] refactor(factories-react): forward data-test-id and props
 in default components

- Spread data-test-id and externalContext in FormField and all Default* components
- Forward data-test-id in field-renderer wrapper props
- Remove hardcoded data-test-id in favor of orchestrator-injected value
---
 .../react/src/components/DefaultFormContainer.tsx      | 10 +++++++---
 .../react/src/components/DefaultFormField.tsx          |  6 +++++-
 .../src/components/DefaultFormSectionContainer.tsx     |  6 +++++-
 .../react/src/components/DefaultFormSectionGroup.tsx   |  6 +++++-
 .../components/DefaultFormSectionGroupContainer.tsx    |  6 +++++-
 .../react/src/components/DefaultFormSectionTitle.tsx   |  6 +++++-
 .../react/src/components/DefaultInputAutocomplete.tsx  |  6 ++++--
 .../react/src/components/DefaultInputCheckbox.tsx      |  3 ++-
 .../react/src/components/DefaultInputDate.tsx          |  6 ++++--
 .../react/src/components/DefaultInputNumber.tsx        |  6 ++++--
 .../react/src/components/DefaultInputPhone.tsx         |  6 ++++--
 .../react/src/components/DefaultInputSelect.tsx        |  5 ++++-
 .../react/src/components/DefaultInputText.tsx          |  6 ++++--
 .../react/src/components/DefaultInputTextarea.tsx      |  6 ++++--
 .../factories/react/src/renderers/field-renderer.ts    |  1 +
 15 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/packages/factories/react/src/components/DefaultFormContainer.tsx b/packages/factories/react/src/components/DefaultFormContainer.tsx
index 504e64a..f5898d3 100644
--- a/packages/factories/react/src/components/DefaultFormContainer.tsx
+++ b/packages/factories/react/src/components/DefaultFormContainer.tsx
@@ -18,6 +18,8 @@ export interface FormContainerProps {
   children?: React.ReactNode;
   /** Submit handler - when provided, renders a submit button */
   onSubmit?: (values: Record<string, any>) => void | Promise<void>;
+  /** Test ID for the form container */
+  'data-test-id'?: string;
   /** External context passed from FormFactory */
   externalContext?: Record<string, any>;
   /** 
@@ -47,9 +49,11 @@ export interface FormContainerProps {
  * <button onClick={() => formRef.current?.submit(handleSubmit)}>Submit</button>
  * ```
  */
-export const DefaultFormContainer: React.FC<FormContainerProps> = ({ 
-  children, 
+export const DefaultFormContainer: React.FC<FormContainerProps> = ({
+  children,
   onSubmit,
+  externalContext,
+  ...props
 }) => {
   const adapter = useScheptaFormAdapter();
 
@@ -61,7 +65,7 @@ export const DefaultFormContainer: React.FC<FormContainerProps> = ({
   };
 
   return (
-    <form data-test-id="FormContainer" onSubmit={handleFormSubmit}>
+    <form onSubmit={handleFormSubmit} {...props}>
       {children}
       {onSubmit && <DefaultSubmitButton />}
     </form>
diff --git a/packages/factories/react/src/components/DefaultFormField.tsx b/packages/factories/react/src/components/DefaultFormField.tsx
index f74ba9c..8e44d38 100644
--- a/packages/factories/react/src/components/DefaultFormField.tsx
+++ b/packages/factories/react/src/components/DefaultFormField.tsx
@@ -13,6 +13,9 @@ import React from 'react';
 export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Form field children (typically the rendered input) */
   children?: React.ReactNode;
+  /** Test ID for the form field */
+  'data-test-id'?: string;
+  externalContext?: Record<string, any>;
 }
 
 /**
@@ -26,10 +29,11 @@ export type FormFieldComponentType = React.ComponentType<FormFieldProps>;
  */
 export const DefaultFormField: React.FC<FormFieldProps> = ({
   children,
+  externalContext,
   ...props
 }) => {
   return (
-    <div data-test-id="FormField" {...props}>
+    <div {...props}>
       {children}
     </div>
   );
diff --git a/packages/factories/react/src/components/DefaultFormSectionContainer.tsx b/packages/factories/react/src/components/DefaultFormSectionContainer.tsx
index e0523d7..579148d 100644
--- a/packages/factories/react/src/components/DefaultFormSectionContainer.tsx
+++ b/packages/factories/react/src/components/DefaultFormSectionContainer.tsx
@@ -14,6 +14,9 @@ export interface FormSectionContainerProps
   extends React.HTMLAttributes<HTMLDivElement> {
   /** Section children (FormSectionTitle, FormSectionGroupContainer) */
   children?: React.ReactNode;
+  /** Test ID for the form section container */
+  'data-test-id'?: string;
+  externalContext?: Record<string, any>;
 }
 
 /**
@@ -28,10 +31,11 @@ export type FormSectionContainerComponentType =
  */
 export const DefaultFormSectionContainer: React.FC<FormSectionContainerProps> = ({
   children,
+  externalContext,
   ...props
 }) => {
   return (
-    <div data-test-id="FormSectionContainer" style={{ marginBottom: '24px', ...props.style }} {...props}>
+    <div style={{ marginBottom: '24px', ...props.style }} {...props}>
       {children}
     </div>
   );
diff --git a/packages/factories/react/src/components/DefaultFormSectionGroup.tsx b/packages/factories/react/src/components/DefaultFormSectionGroup.tsx
index 0f3646b..c35dcef 100644
--- a/packages/factories/react/src/components/DefaultFormSectionGroup.tsx
+++ b/packages/factories/react/src/components/DefaultFormSectionGroup.tsx
@@ -14,6 +14,9 @@ export interface FormSectionGroupProps
   extends React.HTMLAttributes<HTMLDivElement> {
   /** Group children (FormField components) */
   children?: React.ReactNode;
+  /** Test ID for the form section group */
+  'data-test-id'?: string;
+  externalContext?: Record<string, any>;
   [key: string]: any;
 }
 
@@ -29,10 +32,11 @@ export type FormSectionGroupComponentType =
  */
 export const DefaultFormSectionGroup: React.FC<FormSectionGroupProps> = ({
   children,
+  externalContext,
   ...props
 }) => {
   return (
-    <div data-test-id="FormSectionGroup" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', ...props.style }} {...props}>
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', ...props.style }} {...props}>
       {children}
     </div>
   );
diff --git a/packages/factories/react/src/components/DefaultFormSectionGroupContainer.tsx b/packages/factories/react/src/components/DefaultFormSectionGroupContainer.tsx
index 3ecc13f..30f6f88 100644
--- a/packages/factories/react/src/components/DefaultFormSectionGroupContainer.tsx
+++ b/packages/factories/react/src/components/DefaultFormSectionGroupContainer.tsx
@@ -14,6 +14,9 @@ export interface FormSectionGroupContainerProps
   extends React.HTMLAttributes<HTMLDivElement> {
   /** Container children (FormSectionGroup components) */
   children?: React.ReactNode;
+  /** Test ID for the form section group container */
+  'data-test-id'?: string;
+  externalContext?: Record<string, any>;
 }
 
 /**
@@ -28,10 +31,11 @@ export type FormSectionGroupContainerComponentType =
  */
 export const DefaultFormSectionGroupContainer: React.FC<FormSectionGroupContainerProps> = ({
   children,
+  externalContext,
   ...props
 }) => {
   return (
-    <div data-test-id="FormSectionGroupContainer" {...props}>
+    <div {...props}>
       {children}
     </div>
   );
diff --git a/packages/factories/react/src/components/DefaultFormSectionTitle.tsx b/packages/factories/react/src/components/DefaultFormSectionTitle.tsx
index 522eb6c..7d3f9e8 100644
--- a/packages/factories/react/src/components/DefaultFormSectionTitle.tsx
+++ b/packages/factories/react/src/components/DefaultFormSectionTitle.tsx
@@ -16,6 +16,9 @@ export interface FormSectionTitleProps
   'x-content'?: string;
   /** Optional children (alternative to x-content) */
   children?: React.ReactNode;
+  /** Test ID for the form section title */
+  'data-test-id'?: string;
+  externalContext?: Record<string, any>;
 }
 
 /**
@@ -31,10 +34,11 @@ export type FormSectionTitleComponentType =
 export const DefaultFormSectionTitle: React.FC<FormSectionTitleProps> = ({
   'x-content': content,
   children,
+  externalContext,
   ...props
 }) => {
   return (
-    <h2 data-test-id="FormSectionTitle" style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333', ...props.style }} {...props}>
+    <h2 style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333', ...props.style }} {...props}>
       {content ?? children}
     </h2>
   );
diff --git a/packages/factories/react/src/components/DefaultInputAutocomplete.tsx b/packages/factories/react/src/components/DefaultInputAutocomplete.tsx
index 9927917..6a1f24a 100644
--- a/packages/factories/react/src/components/DefaultInputAutocomplete.tsx
+++ b/packages/factories/react/src/components/DefaultInputAutocomplete.tsx
@@ -21,12 +21,15 @@ export interface InputAutocompleteProps
     React.InputHTMLAttributes<HTMLInputElement>,
     'value' | 'onChange' | 'list'
   > {
+  /** Test ID for the input autocomplete */
+  'data-test-id'?: string;
   name: string;
   value?: string;
   onChange?: (value: string) => void;
   label?: string;
   /** List of options for autocomplete (value used for both value and label if label omitted) */
   options?: InputAutocompleteOption[] | string[];
+  externalContext?: Record<string, any>;
 }
 
 /**
@@ -64,7 +67,7 @@ function normalizeOptions(
 export const DefaultInputAutocomplete = React.forwardRef<
   HTMLInputElement,
   InputAutocompleteProps
->(({ label, name, value, onChange, placeholder, options = [], ...rest }, ref) => {
+>(({ label, name, value, onChange, placeholder, options = [], externalContext, ...rest }, ref) => {
   const listId = `${name}-datalist`;
   const normalizedOptions = normalizeOptions(options);
 
@@ -79,7 +82,6 @@ export const DefaultInputAutocomplete = React.forwardRef<
         ref={ref}
         id={name}
         name={name}
-        data-test-id={name}
         list={listId}
         value={value ?? ''}
         placeholder={placeholder}
diff --git a/packages/factories/react/src/components/DefaultInputCheckbox.tsx b/packages/factories/react/src/components/DefaultInputCheckbox.tsx
index 9690f4a..b902aff 100644
--- a/packages/factories/react/src/components/DefaultInputCheckbox.tsx
+++ b/packages/factories/react/src/components/DefaultInputCheckbox.tsx
@@ -15,6 +15,8 @@ export interface InputCheckboxProps
     React.InputHTMLAttributes<HTMLInputElement>,
     'value' | 'onChange' | 'checked' | 'type'
   > {
+  /** Test ID for the input checkbox */
+  'data-test-id'?: string;
   name: string;
   value?: boolean;
   onChange?: (value: boolean) => void;
@@ -48,7 +50,6 @@ export const DefaultInputCheckbox = React.forwardRef<HTMLInputElement, InputChec
             ref={ref}
             type="checkbox"
             name={name}
-            data-test-id={name}
             checked={value ?? false}
             onChange={(e) => onChange?.(e.target.checked)}
             {...rest}
diff --git a/packages/factories/react/src/components/DefaultInputDate.tsx b/packages/factories/react/src/components/DefaultInputDate.tsx
index a569388..bd87d34 100644
--- a/packages/factories/react/src/components/DefaultInputDate.tsx
+++ b/packages/factories/react/src/components/DefaultInputDate.tsx
@@ -19,6 +19,9 @@ export interface InputDateProps
   value?: string;
   onChange?: (value: string) => void;
   label?: string;
+  /** Test ID for the input date */
+  'data-test-id'?: string;
+  externalContext?: Record<string, any>;
 }
 
 /**
@@ -46,7 +49,7 @@ const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
  * Default date input component.
  */
 export const DefaultInputDate = React.forwardRef<HTMLInputElement, InputDateProps>(
-  ({ label, name, value, onChange, ...rest }, ref) => {
+  ({ label, name, value, onChange, externalContext, ...rest }, ref) => {
     return (
       <div style={wrapperStyle}>
         {label && (
@@ -59,7 +62,6 @@ export const DefaultInputDate = React.forwardRef<HTMLInputElement, InputDateProp
           type="date"
           id={name}
           name={name}
-          data-test-id={name}
           value={value ?? ''}
           onChange={(e) => onChange?.(e.target.value)}
           style={inputStyle}
diff --git a/packages/factories/react/src/components/DefaultInputNumber.tsx b/packages/factories/react/src/components/DefaultInputNumber.tsx
index 1e4b91d..ef88fab 100644
--- a/packages/factories/react/src/components/DefaultInputNumber.tsx
+++ b/packages/factories/react/src/components/DefaultInputNumber.tsx
@@ -15,6 +15,8 @@ export interface InputNumberProps
     React.InputHTMLAttributes<HTMLInputElement>,
     'value' | 'onChange' | 'type'
   > {
+  /** Test ID for the input number */
+  'data-test-id'?: string;
   name: string;
   value?: number | string;
   onChange?: (value: number | string) => void;
@@ -22,6 +24,7 @@ export interface InputNumberProps
   min?: number;
   max?: number;
   step?: number | string;
+  externalContext?: Record<string, any>;
 }
 
 /**
@@ -49,7 +52,7 @@ const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
  * Default number input component.
  */
 export const DefaultInputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>(
-  ({ label, name, value, onChange, placeholder, min, max, step, ...rest }, ref) => {
+  ({ label, name, value, onChange, placeholder, min, max, step, externalContext, ...rest }, ref) => {
     return (
       <div style={wrapperStyle}>
         {label && (
@@ -62,7 +65,6 @@ export const DefaultInputNumber = React.forwardRef<HTMLInputElement, InputNumber
           type="number"
           id={name}
           name={name}
-          data-test-id={name}
           value={value ?? ''}
           placeholder={placeholder}
           min={min}
diff --git a/packages/factories/react/src/components/DefaultInputPhone.tsx b/packages/factories/react/src/components/DefaultInputPhone.tsx
index 3bd9d8d..3132b4f 100644
--- a/packages/factories/react/src/components/DefaultInputPhone.tsx
+++ b/packages/factories/react/src/components/DefaultInputPhone.tsx
@@ -16,10 +16,13 @@ export interface InputPhoneProps
     React.InputHTMLAttributes<HTMLInputElement>,
     'value' | 'onChange' | 'type'
   > {
+  /** Test ID for the input phone */
+  'data-test-id'?: string;
   name: string;
   value?: string;
   onChange?: (value: string) => void;
   label?: string;
+  externalContext?: Record<string, any>;
 }
 
 /**
@@ -47,7 +50,7 @@ const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
  * Default phone input component (uses type="tel").
  */
 export const DefaultInputPhone = React.forwardRef<HTMLInputElement, InputPhoneProps>(
-  ({ label, name, value, onChange, placeholder, ...rest }, ref) => {
+  ({ label, name, value, onChange, placeholder, externalContext, ...rest }, ref) => {
     return (
       <div style={wrapperStyle}>
         {label && (
@@ -60,7 +63,6 @@ export const DefaultInputPhone = React.forwardRef<HTMLInputElement, InputPhonePr
           type="tel"
           id={name}
           name={name}
-          data-test-id={name}
           value={value ?? ''}
           placeholder={placeholder}
           onChange={(e) => onChange?.(e.target.value)}
diff --git a/packages/factories/react/src/components/DefaultInputSelect.tsx b/packages/factories/react/src/components/DefaultInputSelect.tsx
index 82145d4..c59cdc7 100644
--- a/packages/factories/react/src/components/DefaultInputSelect.tsx
+++ b/packages/factories/react/src/components/DefaultInputSelect.tsx
@@ -20,6 +20,8 @@ export interface InputSelectProps
     React.SelectHTMLAttributes<HTMLSelectElement>,
     'value' | 'onChange'
   > {
+  /** Test ID for the input select */
+  'data-test-id'?: string;
   name: string;
   value?: string;
   onChange?: (value: string) => void;
@@ -27,6 +29,7 @@ export interface InputSelectProps
   placeholder?: string;
   options?: InputSelectOption[];
   children?: React.ReactNode;
+  externalContext?: Record<string, any>;
 }
 
 /**
@@ -63,6 +66,7 @@ export const DefaultInputSelect = React.forwardRef<HTMLSelectElement, InputSelec
       options = [],
       placeholder = 'Select...',
       children,
+      externalContext,
       ...rest
     },
     ref
@@ -78,7 +82,6 @@ export const DefaultInputSelect = React.forwardRef<HTMLSelectElement, InputSelec
           ref={ref}
           id={name}
           name={name}
-          data-test-id={name}
           value={value ?? ''}
           onChange={(e) => onChange?.(e.target.value)}
           style={inputStyle}
diff --git a/packages/factories/react/src/components/DefaultInputText.tsx b/packages/factories/react/src/components/DefaultInputText.tsx
index 2afc71f..17a70a4 100644
--- a/packages/factories/react/src/components/DefaultInputText.tsx
+++ b/packages/factories/react/src/components/DefaultInputText.tsx
@@ -19,6 +19,9 @@ export interface InputTextProps
   value?: string;
   onChange?: (value: string) => void;
   label?: string;
+  /** Test ID for the input text */
+  'data-test-id'?: string;
+  externalContext?: Record<string, any>;
 }
 
 /**
@@ -46,7 +49,7 @@ const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
  * Default text input component.
  */
 export const DefaultInputText = React.forwardRef<HTMLInputElement, InputTextProps>(
-  ({ label, name, value, onChange, placeholder, ...rest }, ref) => {
+  ({ label, name, value, onChange, placeholder, externalContext, ...rest }, ref) => {
     return (
       <div style={wrapperStyle}>
         {label && (
@@ -58,7 +61,6 @@ export const DefaultInputText = React.forwardRef<HTMLInputElement, InputTextProp
           ref={ref}
           id={name}
           name={name}
-          data-test-id={name}
           value={value ?? ''}
           placeholder={placeholder}
           onChange={(e) => onChange?.(e.target.value)}
diff --git a/packages/factories/react/src/components/DefaultInputTextarea.tsx b/packages/factories/react/src/components/DefaultInputTextarea.tsx
index 5d04c34..81b61bc 100644
--- a/packages/factories/react/src/components/DefaultInputTextarea.tsx
+++ b/packages/factories/react/src/components/DefaultInputTextarea.tsx
@@ -20,6 +20,9 @@ export interface InputTextareaProps
   onChange?: (value: string) => void;
   label?: string;
   rows?: number;
+  /** Test ID for the input textarea */
+  'data-test-id'?: string;
+  externalContext?: Record<string, any>;
 }
 
 /**
@@ -50,7 +53,7 @@ const wrapperStyle: React.CSSProperties = { marginBottom: '16px' };
 export const DefaultInputTextarea = React.forwardRef<
   HTMLTextAreaElement,
   InputTextareaProps
->(({ label, name, value, onChange, placeholder, rows = 4, ...rest }, ref) => {
+>(({ label, name, value, onChange, placeholder, rows = 4, externalContext, ...rest }, ref) => {
   return (
     <div style={wrapperStyle}>
       {label && (
@@ -62,7 +65,6 @@ export const DefaultInputTextarea = React.forwardRef<
         ref={ref}
         id={name}
         name={name}
-        data-test-id={name}
         value={value ?? ''}
         placeholder={placeholder}
         rows={rows}
diff --git a/packages/factories/react/src/renderers/field-renderer.ts b/packages/factories/react/src/renderers/field-renderer.ts
index 0891594..545bf65 100644
--- a/packages/factories/react/src/renderers/field-renderer.ts
+++ b/packages/factories/react/src/renderers/field-renderer.ts
@@ -64,6 +64,7 @@ export function createFieldRenderer(options: FieldRendererOptions = {}): Rendere
         ...(props.externalContext ? { externalContext: props.externalContext } : {}),
         ...(props.schema ? { schema: props.schema } : {}),
         ...(props.componentKey ? { componentKey: props.componentKey } : {}),
+        ...(props['data-test-id'] ? { 'data-test-id': props['data-test-id'] } : {}),
       };
 
       // Create FieldWrapper using React.createElement directly since we're in React context

From f6baca86c70c161b8bd1fd946df38991e56f26ab Mon Sep 17 00:00:00 2001
From: guynikan <jr-lol@live.com>
Date: Wed, 28 Jan 2026 15:14:51 +0000
Subject: [PATCH 3/5] refactor(factories-vue): use FormSchema type in
 form-renderer props

---
 packages/factories/vue/src/form-renderer.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/factories/vue/src/form-renderer.ts b/packages/factories/vue/src/form-renderer.ts
index 3dc4994..02ab4e4 100644
--- a/packages/factories/vue/src/form-renderer.ts
+++ b/packages/factories/vue/src/form-renderer.ts
@@ -7,7 +7,7 @@ import type { FormSchema } from '@schepta/core';
 
 export interface FormRendererProps {
   componentKey: string;
-  schema: any;
+  schema: FormSchema;
   renderer: (componentKey: string, schema: any, parentProps?: Record<string, any>) => any;
   onSubmit?: () => void;
 }

From 699857c9271f9749bd77ab4ac4af233e95f9cedf Mon Sep 17 00:00:00 2001
From: guynikan <jr-lol@live.com>
Date: Wed, 28 Jan 2026 15:14:57 +0000
Subject: [PATCH 4/5] refactor(examples-react): use factory default components
 only

- Remove local FormField, FormSection*, InputCheckbox, InputDate, InputNumber, InputSelect, InputTextarea
- Simplify ComponentRegistry to InputText only; form/container components use factory defaults
- Update FormWithFormik, FormWithRHF and form containers accordingly
---
 .../basic-ui/components/ComponentRegistry.tsx | 66 -------------------
 .../components/Containers/FormField.tsx       |  6 --
 .../Containers/FormSectionContainer.tsx       |  6 --
 .../Containers/FormSectionGroup.tsx           |  6 --
 .../Containers/FormSectionGroupContainer.tsx  |  6 --
 .../Containers/FormSectionTitle.tsx           |  6 --
 .../components/Forms/FormWithFormik.tsx       |  3 -
 .../basic-ui/components/Forms/FormWithRHF.tsx |  4 +-
 .../components/Inputs/InputCheckbox.tsx       | 21 ------
 .../basic-ui/components/Inputs/InputDate.tsx  | 32 ---------
 .../components/Inputs/InputNumber.tsx         | 38 -----------
 .../components/Inputs/InputSelect.tsx         | 42 ------------
 .../basic-ui/components/Inputs/InputText.tsx  |  2 +-
 .../components/Inputs/InputTextarea.tsx       | 42 ------------
 .../components/formik/FormikFormContainer.tsx |  3 +-
 .../components/rhf/RHFFormContainer.tsx       |  3 +-
 16 files changed, 6 insertions(+), 280 deletions(-)
 delete mode 100644 examples/react/src/basic-ui/components/Containers/FormField.tsx
 delete mode 100644 examples/react/src/basic-ui/components/Containers/FormSectionContainer.tsx
 delete mode 100644 examples/react/src/basic-ui/components/Containers/FormSectionGroup.tsx
 delete mode 100644 examples/react/src/basic-ui/components/Containers/FormSectionGroupContainer.tsx
 delete mode 100644 examples/react/src/basic-ui/components/Containers/FormSectionTitle.tsx
 delete mode 100644 examples/react/src/basic-ui/components/Inputs/InputCheckbox.tsx
 delete mode 100644 examples/react/src/basic-ui/components/Inputs/InputDate.tsx
 delete mode 100644 examples/react/src/basic-ui/components/Inputs/InputNumber.tsx
 delete mode 100644 examples/react/src/basic-ui/components/Inputs/InputSelect.tsx
 delete mode 100644 examples/react/src/basic-ui/components/Inputs/InputTextarea.tsx

diff --git a/examples/react/src/basic-ui/components/ComponentRegistry.tsx b/examples/react/src/basic-ui/components/ComponentRegistry.tsx
index 4268111..d2bd3e0 100644
--- a/examples/react/src/basic-ui/components/ComponentRegistry.tsx
+++ b/examples/react/src/basic-ui/components/ComponentRegistry.tsx
@@ -1,15 +1,5 @@
 import { createComponentSpec } from "@schepta/core";
 import { InputText } from "./Inputs/InputText";
-import { InputSelect } from "./Inputs/InputSelect";
-import { InputCheckbox } from "./Inputs/InputCheckbox";
-import { InputTextarea } from "./Inputs/InputTextarea";
-import { InputNumber } from "./Inputs/InputNumber";
-import { InputDate } from "./Inputs/InputDate";
-import { FormField } from "./Containers/FormField";
-import { FormSectionContainer } from "./Containers/FormSectionContainer";
-import { FormSectionTitle } from "./Containers/FormSectionTitle";
-import { FormSectionGroupContainer } from "./Containers/FormSectionGroupContainer";
-import { FormSectionGroup } from "./Containers/FormSectionGroup";
 
 export const components = {
   InputText: createComponentSpec({
@@ -17,60 +7,4 @@ export const components = {
     type: "field",
     factory: (props, runtime) => InputText,
   }),
-  InputSelect: createComponentSpec({
-    id: "InputSelect",
-    type: "field",
-    factory: (props, runtime) => InputSelect,
-  }),
-  InputCheckbox: createComponentSpec({
-    id: "InputCheckbox",
-    type: "field",
-    factory: (props, runtime) => InputCheckbox,
-  }),
-  InputPhone: createComponentSpec({
-    id: "InputPhone",
-    type: "field",
-    factory: (props, runtime) => InputText,
-    defaultProps: { type: "tel" },
-  }),
-  InputTextarea: createComponentSpec({
-    id: "InputTextarea",
-    type: "field",
-    factory: (props, runtime) => InputTextarea,
-  }),
-  InputNumber: createComponentSpec({
-    id: "InputNumber",
-    type: "field",
-    factory: (props, runtime) => InputNumber,
-  }),
-  InputDate: createComponentSpec({
-    id: "InputDate",
-    type: "field",
-    factory: (props, runtime) => InputDate,
-  }),
-  FormField: createComponentSpec({
-    id: "FormField",
-    type: 'container',
-    factory: (props, runtime) => FormField,
-  }),
-  FormSectionContainer: createComponentSpec({
-    id: "FormSectionContainer",
-    type: "container",
-    factory: (props, runtime) => FormSectionContainer,
-  }),
-  FormSectionTitle: createComponentSpec({
-    id: "FormSectionTitle",
-    type: 'content',
-    factory: (props, runtime) => FormSectionTitle,
-  }),
-  FormSectionGroupContainer: createComponentSpec({
-    id: "FormSectionGroupContainer",
-    type: 'container',
-    factory: (props, runtime) => FormSectionGroupContainer,
-  }),
-  FormSectionGroup: createComponentSpec({
-    id: "FormSectionGroup",
-    type: 'container',
-    factory: (props, runtime) => FormSectionGroup,
-  }),
 };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Containers/FormField.tsx b/examples/react/src/basic-ui/components/Containers/FormField.tsx
deleted file mode 100644
index a9d393b..0000000
--- a/examples/react/src/basic-ui/components/Containers/FormField.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import type { FormFieldProps } from '@schepta/factory-react';
-
-export const FormField: React.FC<FormFieldProps> = ({ children, ...props }) => {
-    return <div data-test-id="FormField" {...props}>{children}</div>;
-  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Containers/FormSectionContainer.tsx b/examples/react/src/basic-ui/components/Containers/FormSectionContainer.tsx
deleted file mode 100644
index fdbed14..0000000
--- a/examples/react/src/basic-ui/components/Containers/FormSectionContainer.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import type { FormSectionContainerProps } from '@schepta/factory-react';
-
-export const FormSectionContainer: React.FC<FormSectionContainerProps> = ({ children, ...props }) => {
-    return <div data-test-id="FormSectionContainer" style={{ marginBottom: '24px' }} {...props}>{children}</div>;
-  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Containers/FormSectionGroup.tsx b/examples/react/src/basic-ui/components/Containers/FormSectionGroup.tsx
deleted file mode 100644
index 7e62108..0000000
--- a/examples/react/src/basic-ui/components/Containers/FormSectionGroup.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import type { FormSectionGroupProps } from '@schepta/factory-react';
-
-export const FormSectionGroup: React.FC<FormSectionGroupProps> = ({ children, ...props }) => {
-    return <div data-test-id="FormSectionGroup" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', ...props.style }} {...props}>{children}</div>;
-  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Containers/FormSectionGroupContainer.tsx b/examples/react/src/basic-ui/components/Containers/FormSectionGroupContainer.tsx
deleted file mode 100644
index e070cde..0000000
--- a/examples/react/src/basic-ui/components/Containers/FormSectionGroupContainer.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import type { FormSectionGroupContainerProps } from '@schepta/factory-react';
-
-export const FormSectionGroupContainer: React.FC<FormSectionGroupContainerProps> = ({ children, ...props }) => {
-    return <div data-test-id="FormSectionGroupContainer" {...props}>{children}</div>;
-  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Containers/FormSectionTitle.tsx b/examples/react/src/basic-ui/components/Containers/FormSectionTitle.tsx
deleted file mode 100644
index 3a6482d..0000000
--- a/examples/react/src/basic-ui/components/Containers/FormSectionTitle.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react';
-import type { FormSectionTitleProps } from '@schepta/factory-react';
-
-export const FormSectionTitle: React.FC<FormSectionTitleProps> = ({ 'x-content': content, children, ...props }) => {
-    return <h2 data-test-id="FormSectionTitle" style={{ marginBottom: '16px', fontSize: '20px', fontWeight: '600', color: '#333', ...props.style }} {...props}>{content || children}</h2>;
-  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Forms/FormWithFormik.tsx b/examples/react/src/basic-ui/components/Forms/FormWithFormik.tsx
index 916376a..988b2c1 100644
--- a/examples/react/src/basic-ui/components/Forms/FormWithFormik.tsx
+++ b/examples/react/src/basic-ui/components/Forms/FormWithFormik.tsx
@@ -15,8 +15,6 @@ import {
 import { FormikFieldWrapper } from '../formik/FormikFieldWrapper';
 import { FormikFormContainer } from '../formik/FormikFormContainer';
 
-import { components } from '../ComponentRegistry';
-
 interface FormWithFormikProps {
   schema: FormSchema;
 }
@@ -43,7 +41,6 @@ export const FormWithFormik: React.FC<FormWithFormikProps> = ({ schema }) => {
       type: 'FormContainer',
       factory: () => FormikFormContainer,
     }),
-    ...components,
   }), []);
 
   const handleSubmit = (values: Record<string, any>) => {
diff --git a/examples/react/src/basic-ui/components/Forms/FormWithRHF.tsx b/examples/react/src/basic-ui/components/Forms/FormWithRHF.tsx
index 6449640..8732fd0 100644
--- a/examples/react/src/basic-ui/components/Forms/FormWithRHF.tsx
+++ b/examples/react/src/basic-ui/components/Forms/FormWithRHF.tsx
@@ -12,8 +12,6 @@ import { createComponentSpec, FormSchema } from '@schepta/core';
 import { RHFFormContainer } from '../rhf/RHFFormContainer';
 import { RHFFieldWrapper } from '../rhf/RHFFieldWrapper';
 
-import { components } from '../ComponentRegistry';
-
 interface FormWithRHFProps {
   schema: FormSchema;
 }
@@ -69,7 +67,7 @@ export const FormWithRHF: React.FC<FormWithRHFProps> = ({ schema }) => {
         </div>
         <FormFactory
           schema={schema}
-          components={{...components, ...rhfComponents}}
+          components={rhfComponents}
           onSubmit={handleSubmit}
           debug={true}
         />
diff --git a/examples/react/src/basic-ui/components/Inputs/InputCheckbox.tsx b/examples/react/src/basic-ui/components/Inputs/InputCheckbox.tsx
deleted file mode 100644
index 1f76e81..0000000
--- a/examples/react/src/basic-ui/components/Inputs/InputCheckbox.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import type { InputCheckboxProps } from '@schepta/factory-react';
-
-export const InputCheckbox: React.FC<InputCheckboxProps> = ({ label, name, value, onChange, children, ...rest }) => {
-    return (
-      <div style={{ marginBottom: "16px" }}>
-        <label style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-          <input
-            type="checkbox"
-            name={name}
-            data-test-id={name}
-            checked={value || false}
-            onChange={(e) => onChange?.(e.target.checked)}
-            {...rest}
-          />
-          {label}
-        </label>
-        {children}
-      </div>
-    );
-  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Inputs/InputDate.tsx b/examples/react/src/basic-ui/components/Inputs/InputDate.tsx
deleted file mode 100644
index 632a9e1..0000000
--- a/examples/react/src/basic-ui/components/Inputs/InputDate.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import type { InputDateProps } from '@schepta/factory-react';
-
-export const InputDate: React.FC<InputDateProps> = ({ label, name, value, onChange, ...rest }) => {
-    return (
-      <div style={{ marginBottom: "16px" }}>
-        {label && (
-          <label
-            htmlFor={name}
-            style={{ display: "block", marginBottom: "4px", fontWeight: "500" }}
-          >
-            {label}
-          </label>
-        )}
-        <input
-          type="date"
-          id={name}
-          name={name}
-          data-test-id={name}
-          value={value || ""}
-          onChange={(e) => onChange?.(e.target.value)}
-          style={{
-            width: "100%",
-            padding: "8px",
-            border: "1px solid #ccc",
-            borderRadius: "4px",
-          }}
-          {...rest}
-        />
-      </div>
-    );
-  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Inputs/InputNumber.tsx b/examples/react/src/basic-ui/components/Inputs/InputNumber.tsx
deleted file mode 100644
index ac223ce..0000000
--- a/examples/react/src/basic-ui/components/Inputs/InputNumber.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import type { InputNumberProps } from '@schepta/factory-react';
-import React from 'react';
-
-export const InputNumber: React.FC<InputNumberProps> = ({ label, name, value, onChange, placeholder, min, max, step, ...rest }) => {
-    return (
-      <div style={{ marginBottom: "16px" }}>
-        {label && (
-          <label
-            htmlFor={name}
-            style={{ display: "block", marginBottom: "4px", fontWeight: "500" }}
-          >
-            {label}
-          </label>
-        )}
-        <input
-          type="number"
-          id={name}
-          name={name}
-          data-test-id={name}
-          value={value || ""}
-          placeholder={placeholder}
-          min={min}
-          max={max}
-          step={step}
-          onChange={(e) =>
-            onChange?.(e.target.value ? Number(e.target.value) : "")
-          }
-          style={{
-            width: "100%",
-            padding: "8px",
-            border: "1px solid #ccc",
-            borderRadius: "4px",
-          }}
-          {...rest}
-        />
-      </div>
-    );
-  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Inputs/InputSelect.tsx b/examples/react/src/basic-ui/components/Inputs/InputSelect.tsx
deleted file mode 100644
index c2abeb6..0000000
--- a/examples/react/src/basic-ui/components/Inputs/InputSelect.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { InputSelectProps } from '@schepta/factory-react';
-import React from 'react';
-
-export const InputSelect: React.FC<InputSelectProps> = ({ label, name, value, onChange, options = [], placeholder = "Select...", children, ...rest }) => {
-    return (
-      <div style={{ marginBottom: "16px" }}>
-        {label && (
-          <label
-            htmlFor={name}
-            style={{ display: "block", marginBottom: "4px", fontWeight: "500" }}
-          >
-            {label}
-          </label>
-        )}
-        <select
-          id={name}
-          name={name}
-          data-test-id={name}
-          value={value || ""}
-          onChange={(e) => onChange?.(e.target.value)}
-          style={{
-            width: "100%",
-            padding: "8px",
-            border: "1px solid #ccc",
-            borderRadius: "4px",
-          }}
-          {...rest}
-        >
-          <option value="">{placeholder}</option>
-          {options.map((opt: any) => (
-            <option
-              key={opt.value}
-              value={opt.value}
-            >
-              {opt.label}
-            </option>
-          ))}
-        </select>
-        {children}
-      </div>
-    );
-  };
\ No newline at end of file
diff --git a/examples/react/src/basic-ui/components/Inputs/InputText.tsx b/examples/react/src/basic-ui/components/Inputs/InputText.tsx
index 38a30dc..0ab0676 100644
--- a/examples/react/src/basic-ui/components/Inputs/InputText.tsx
+++ b/examples/react/src/basic-ui/components/Inputs/InputText.tsx
@@ -1,7 +1,7 @@
 import type { InputTextProps } from '@schepta/factory-react';
 import React from "react";
 
-export const InputText: React.FC<InputTextProps> = ({ label, name, value, onChange, placeholder, ...rest }) => {
+export const InputText: React.FC<InputTextProps> = ({ label, name, value, onChange, placeholder, externalContext, ...rest }) => {
   return (
     <div style={{ marginBottom: "16px" }}>
       {label && (
diff --git a/examples/react/src/basic-ui/components/Inputs/InputTextarea.tsx b/examples/react/src/basic-ui/components/Inputs/InputTextarea.tsx
deleted file mode 100644
index 3f28f0c..0000000
--- a/examples/react/src/basic-ui/components/Inputs/InputTextarea.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { InputTextareaProps } from "@schepta/factory-react";
-import React from "react";
-
-export const InputTextarea: React.FC<InputTextareaProps> = ({
-  label,
-  name,
-  value,
-  onChange,
-  placeholder,
-  rows = 4,
-  ...rest
-}) => {
-  return (
-    <div style={{ marginBottom: "16px" }}>
-      {label && (
-        <label
-          htmlFor={name}
-          style={{ display: "block", marginBottom: "4px", fontWeight: "500" }}
-        >
-          {label}
-        </label>
-      )}
-      <textarea
-        id={name}
-        name={name}
-        data-test-id={name}
-        value={value || ""}
-        placeholder={placeholder}
-        rows={rows}
-        onChange={(e) => onChange?.(e.target.value)}
-        style={{
-          width: "100%",
-          padding: "8px",
-          border: "1px solid #ccc",
-          borderRadius: "4px",
-          fontFamily: "inherit",
-        }}
-        {...rest}
-      />
-    </div>
-  );
-};
diff --git a/examples/react/src/basic-ui/components/formik/FormikFormContainer.tsx b/examples/react/src/basic-ui/components/formik/FormikFormContainer.tsx
index dcf2285..25497ec 100644
--- a/examples/react/src/basic-ui/components/formik/FormikFormContainer.tsx
+++ b/examples/react/src/basic-ui/components/formik/FormikFormContainer.tsx
@@ -28,6 +28,7 @@ import { useSchepta } from "@schepta/adapter-react";
 export const FormikFormContainer: React.FC<FormContainerProps> = ({
   children,
   onSubmit,
+  ...props
 }) => {
   const { schema } = useSchepta();
   const { initialValues, validate } = useMemo(() => {
@@ -71,7 +72,7 @@ export const FormikFormContainer: React.FC<FormContainerProps> = ({
       onSubmit={handleSubmit}
     >
       {({ isSubmitting, errors, touched }) => (
-        <Form data-test-id="FormContainer">
+        <Form {...props}>
           {children}
           {onSubmit && (
             <div style={{ marginTop: "24px", textAlign: "right" }}>
diff --git a/examples/react/src/basic-ui/components/rhf/RHFFormContainer.tsx b/examples/react/src/basic-ui/components/rhf/RHFFormContainer.tsx
index 398bcfb..b538ea0 100644
--- a/examples/react/src/basic-ui/components/rhf/RHFFormContainer.tsx
+++ b/examples/react/src/basic-ui/components/rhf/RHFFormContainer.tsx
@@ -40,6 +40,7 @@ import { useSchepta } from '@schepta/adapter-react';
 export const RHFFormContainer: React.FC<FormContainerProps> = ({
   children,
   onSubmit,
+  ...props
 }) => {
   const { schema } = useSchepta();
   const { jsonSchema, initialValues } = useMemo(() => 
@@ -68,7 +69,7 @@ export const RHFFormContainer: React.FC<FormContainerProps> = ({
 
     return (
         <FormProvider {...methods}>
-          <form data-test-id="FormContainer" onSubmit={handleFormSubmit}>
+          <form onSubmit={handleFormSubmit} {...props}>
             {children}
             {onSubmit && (
               <div style={{ marginTop: '24px', textAlign: 'right' }}>

From dd143417c22d6f37980bc71eebba8f41829150b1 Mon Sep 17 00:00:00 2001
From: guynikan <jr-lol@live.com>
Date: Wed, 28 Jan 2026 15:15:02 +0000
Subject: [PATCH 5/5] test(e2e): use element-specific selectors for React form
 fields

- Target input, select, textarea by tag with data-test-id for reliable selection
- Handle InputSelect and InputTextarea in fill and assertion logic
---
 tests/e2e/react.spec.ts | 90 ++++++++++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 38 deletions(-)

diff --git a/tests/e2e/react.spec.ts b/tests/e2e/react.spec.ts
index 2821cb9..5c6b59a 100644
--- a/tests/e2e/react.spec.ts
+++ b/tests/e2e/react.spec.ts
@@ -13,25 +13,31 @@ test.describe('React Form Factory', () => {
     const fields = extractFieldsFromSchema(simpleFormSchema as FormSchema);
 
     // Wait for form to be rendered
-    await page.waitForSelector('[data-test-id*="firstName"]', { timeout: 10000 });
+    await page.waitForSelector('input[data-test-id*="firstName"]', { timeout: 10000 });
 
     // Check if all form fields from schema are present
     for (const field of fields) {
-      await expect(page.locator(`[data-test-id*="${field.name}"]`)).toBeVisible();
+      await expect(page.locator(`input[data-test-id*="${field.name}"]`)).toBeVisible();
     }
   });
 
   test('should render complex form with all field types', async ({ page, baseURL }) => {
     await page.click('[data-test-id*="complex-form-tab"]');
 
-    const fields = extractFieldsFromSchema(complexFormSchema as FormSchema).filter(field => field.visible === true && field.custom === false).map(field => field.name);
+    const fields = extractFieldsFromSchema(complexFormSchema as FormSchema).filter(field => field.visible === true && field.custom === false);
 
     // Wait for form to be rendered
-    await page.waitForSelector('[data-test-id*="email"]', { timeout: 10000 });
+    await page.waitForSelector('input[data-test-id*="email"]', { timeout: 10000 });
 
     // Check if all form fields from schema are present
     for (const field of fields) {
-      await expect(page.locator(`[data-test-id*="${field}"]`).first()).toBeVisible();
+      if (field.component === 'InputSelect') {
+        await expect(page.locator(`select[data-test-id*="${field.name}"]`).first()).toBeVisible();
+      } else if (field.component === 'InputTextarea') {
+        await expect(page.locator(`textarea[data-test-id*="${field.name}"]`).first()).toBeVisible();
+      } else {
+        await expect(page.locator(`input[data-test-id*="${field.name}"]`).first()).toBeVisible();
+      }
     }
   });
 
@@ -54,23 +60,31 @@ test.describe('React Form Factory', () => {
     }
 
     await page.click('[data-test-id*="complex-form-tab"]');
-    await page.waitForSelector('[data-test-id*="email"]', { timeout: 10000 });
+    await page.waitForSelector('input[data-test-id*="email"]', { timeout: 10000 });
 
     for (const field of fields) {
-      if (field.component === 'InputText' || field.component === 'InputPhone' || field.component === 'InputDate' || field.component === 'InputTextarea') {
-        await page.locator(`[data-test-id*="${field.name}"]`).first().fill(inputValues[field.name as keyof typeof inputValues] as string);
-      } else if (field.component === 'InputSelect') {
-        await page.locator(`[data-test-id*="${field.name}"]`).first().selectOption(inputValues[field.name as keyof typeof inputValues] as string);
+      if (field.component === 'InputText' || field.component === 'InputPhone' || field.component === 'InputDate') {
+        await page.locator(`input[data-test-id*="${field.name}"]`).first().fill(inputValues[field.name as keyof typeof inputValues] as string);
+      } else if (field.component === 'InputTextarea') {
+        await page.locator(`textarea[data-test-id*="${field.name}"]`).first().fill(inputValues[field.name as keyof typeof inputValues] as string);
+      }
+      else if (field.component === 'InputSelect') {
+        await page.locator(`select[data-test-id*="${field.name}"]`).first().selectOption(inputValues[field.name as keyof typeof inputValues] as string);
       } else if (field.component === 'InputCheckbox') {
-        await page.locator(`[data-test-id*="${field.name}"]`).first().check();
+        await page.locator(`input[data-test-id*="${field.name}"]`).first().check();
       }
     }
 
     for (const field of fields) {
       if (field.component === 'InputCheckbox') {
-        await expect(page.locator(`[data-test-id*="${field.name}"]`).first()).toBeChecked();
-      } else {
-        await expect(page.locator(`[data-test-id*="${field.name}"]`).first()).toHaveValue(inputValues[field.name as keyof typeof inputValues] as string);
+        await expect(page.locator(`input[data-test-id*="${field.name}"]`).first()).toBeChecked();
+      } else if (field.component === 'InputSelect') {
+        await expect(page.locator(`select[data-test-id*="${field.name}"]`).first()).toHaveValue(inputValues[field.name as keyof typeof inputValues] as string);
+      } else if (field.component === 'InputTextarea') {
+        await expect(page.locator(`textarea[data-test-id*="${field.name}"]`).first()).toHaveValue(inputValues[field.name as keyof typeof inputValues] as string);
+      }
+      else {
+        await expect(page.locator(`input[data-test-id*="${field.name}"]`).first()).toHaveValue(inputValues[field.name as keyof typeof inputValues] as string);
       }
     }
   });
@@ -81,10 +95,10 @@ test.describe('React Form Factory', () => {
       .map(field => field.name);
 
     await page.click('[data-test-id*="complex-form-tab"]');
-    await page.waitForSelector('[data-test-id*="email"]', { timeout: 10000 });
+    await page.waitForSelector('input[data-test-id*="email"]', { timeout: 10000 });
 
     for (const field of disabledFields) {
-      await expect(page.locator(`[data-test-id*="${field}"]`).first()).toBeDisabled();
+      await expect(page.locator(`input[data-test-id*="${field}"]`).first()).toBeDisabled();
     }
   });
 
@@ -94,29 +108,29 @@ test.describe('React Form Factory', () => {
       .map(field => field.name);
 
     await page.click('[data-test-id*="complex-form-tab"]');
-    await page.waitForSelector('[data-test-id*="email"]', { timeout: 10000 });
+    await page.waitForSelector('input[data-test-id*="email"]', { timeout: 10000 });
 
     for (const field of requiredFields) {
-      const fieldLocator = page.locator(`[data-test-id*="${field}"]`).first();
+      const fieldLocator = page.locator(`input[data-test-id*="${field}"]`).first();
       await expect(fieldLocator).toHaveAttribute('required', '');
     }
   });
 
   test('should show spouse name field when marital status is married', async ({ page }) => {
     await page.click('[data-test-id*="complex-form-tab"]');
-    await page.waitForSelector('[data-test-id*="email"]', { timeout: 10000 });
+    await page.waitForSelector('input[data-test-id*="email"]', { timeout: 10000 });
 
-    await page.locator('[data-test-id*="maritalStatus"]').selectOption('married');
-    await expect(page.locator('[data-test-id*="spouseName"]')).toBeVisible();
+    await page.locator('select[data-test-id*="maritalStatus"]').first().selectOption('married');
+    await expect(page.locator('input[data-test-id*="spouseName"]')).toBeVisible();
   });
 
   test('should toggle social name custom field visibility', async ({ page }) => {
     await page.click('[data-test-id*="complex-form-tab"]');
-    await page.waitForSelector('[data-test-id*="email"]', { timeout: 10000 });
+    await page.waitForSelector('input[data-test-id*="email"]', { timeout: 10000 });
 
     // Get the toggle button and input locators
-    const toggleButton = page.locator('[data-test-id="social-name-toggle"]');
-    const socialNameInput = page.locator('[data-test-id="social-name-input"]');
+    const toggleButton = page.locator('button[data-test-id="social-name-toggle"]');
+    const socialNameInput = page.locator('input[data-test-id="social-name-input"]');
 
     // Initially, the "Add Social Name" button should be visible
     await expect(toggleButton).toBeVisible();
@@ -154,25 +168,25 @@ test.describe('React Hook Form Integration', () => {
     await page.goto(`${baseURL || 'http://localhost:3000'}/basic`);
     // Navigate to RHF form tab
     await page.click('[data-test-id*="rhf-form-tab"]');
-    await page.waitForSelector('[data-test-id="FormContainer"]', { timeout: 10000 });
+    await page.waitForSelector('[data-test-id^="FormContainer"]', { timeout: 10000 });
   });
 
   test('should render RHF form with initial values', async ({ page }) => {
     // Verify the form container is rendered
-    await expect(page.locator('[data-test-id="FormContainer"]')).toBeVisible();
+    await expect(page.locator('[data-test-id^="FormContainer"]')).toBeVisible();
 
     // Verify fields are present
-    await expect(page.locator('[data-test-id*="firstName"]')).toBeVisible();
-    await expect(page.locator('[data-test-id*="lastName"]')).toBeVisible();
+    await expect(page.locator('input[data-test-id*="firstName"]')).toBeVisible();
+    await expect(page.locator('input[data-test-id*="lastName"]')).toBeVisible();
   });
 
   test('should submit RHF form with valid data', async ({ page }) => {
     // Fill form fields
-    await page.locator('[data-test-id*="firstName"]').fill('John');
-    await page.locator('[data-test-id*="lastName"]').fill('Doe');
+    await page.locator('input[data-test-id*="firstName"]').fill('John');
+    await page.locator('input[data-test-id*="lastName"]').fill('Doe');
 
     // Submit the form
-    await page.click('[data-test-id="submit-button"]');
+    await page.click('button[data-test-id="submit-button"]');
 
     // Wait for submitted values to appear
     await page.waitForSelector('text=Submitted Values', { timeout: 5000 });
@@ -189,25 +203,25 @@ test.describe('Formik Integration', () => {
     await page.goto(`${baseURL || 'http://localhost:3000'}/basic`);
     // Navigate to Formik form tab
     await page.click('[data-test-id*="formik-form-tab"]');
-    await page.waitForSelector('[data-test-id="FormContainer"]', { timeout: 10000 });
+    await page.waitForSelector('[data-test-id^="FormContainer"]', { timeout: 10000 });
   });
 
   test('should render Formik form with initial values', async ({ page }) => {
     // Verify the form container is rendered
-    await expect(page.locator('[data-test-id="FormContainer"]')).toBeVisible();
+    await expect(page.locator('[data-test-id^="FormContainer"]')).toBeVisible();
 
     // Verify fields are present
-    await expect(page.locator('[data-test-id*="firstName"]')).toBeVisible();
-    await expect(page.locator('[data-test-id*="lastName"]')).toBeVisible();
+    await expect(page.locator('input[data-test-id*="firstName"]')).toBeVisible();
+    await expect(page.locator('input[data-test-id*="lastName"]')).toBeVisible();
   });
 
   test('should submit Formik form with valid data', async ({ page }) => {
     // Fill form fields
-    await page.locator('[data-test-id*="firstName"]').fill('Jane');
-    await page.locator('[data-test-id*="lastName"]').fill('Smith');
+    await page.locator('input[data-test-id*="firstName"]').fill('Jane');
+    await page.locator('input[data-test-id*="lastName"]').fill('Smith');
 
     // Submit the form
-    await page.click('[data-test-id="submit-button"]');
+    await page.click('button[data-test-id="submit-button"]');
 
     // Wait for submitted values to appear
     await page.waitForSelector('text=Submitted Values', { timeout: 5000 });