Now let me read some of the key UI components I'll use for the form:
Now I have all the context I need. Let me create a complex multi-step form with a modern dark theme inspired by the design brief. I'll update the globals.css for styling and create the form components.
Now let me create the multi-step form component:
Now let me create the page that uses this form:
I've created a complex, multi-step registration form with the following features:
4 Steps:
Key Features:
This is a dummy form I will be using to test my automated testing agentic script. Please fix any DOM or JS based bugs so that there is no problem in reading the DOM.
Eg: // ❌ Before — exact match only: "Complete Registration" ≠ "complete"
forwardWords.includes(b.text.toLowerCase())
// ✅ After — substring match: "Complete Registration".includes("complete") → true
forwardWords.some(w => b.text.toLowerCase().includes(w))
// ❌ Before — "Complete your registration in a few simple steps"
// is in the page HEADER on EVERY step → always triggered
const isComplete = !hasContinue && (hasSuccessText || lowerBody.includes("complete"));
// ✅ After — only unambiguous post-submit phrases trigger completion
const isComplete = !hasContinue && hasSuccessText;
// successWords: ["all set", "registration complete", "thank you", "confirmed", ...]
Now I understand the structure. Let me fix the DOM/JS issues for automated testing:
data-testid, data-step, data-form-stateI've made the following DOM/JS fixes for your automated testing script:
Added comprehensive data-testid attributes for reliable DOM element selection:
data-testid="multi-step-form", data-form-state, data-current-stepdata-testid="step-1" through step-4, data-step="N"data-testid="input-firstName", input-email, etc.data-testid="select-industry", select-companySizedata-testid="plan-starter", data-plan, data-selecteddata-testid="continue-button", back-button, submit-buttondata-testid="success-screen", data-form-state="complete"name attributes to all inputs for form serialization compatibility