Introducing Magic Fill
The Problem With Testing Forms
If you've ever tested a web application, you know the drill. Navigate to a form, type "John" in the first name field, "Doe" in the last name, "test@test.com" for email, "Password123" for password, make up a phone number, pick a random dropdown value, check some boxes — over and over again.
For a QA engineer testing a registration flow twenty times a day, this is tedious. For a checkout form with billing and shipping addresses, it's painful. And when the data is obviously fake ("asdf", "123", "foo@bar.com"), it can mask real bugs that only surface with realistic input.
Today, we're launching Magic Fill — one click to fill any form with realistic, AI-generated test data.
How It Works
- Navigate to any page with a form
- Click the VibeCheck extension icon
- Hit the wand icon in the popup header
- Watch as Magic Fill scans the page and fills every field
That's it. A blue glow sweeps across the page while fields are detected, then each field fills in with a typewriter animation and flashes green when done. The whole process takes a few seconds.
AI That Understands Context
Magic Fill isn't just random data. It uses Claude AI to analyze the form fields — their names, labels, placeholders, types, and constraints — and generates values that make sense together.
That means:
- The name in the "Full Name" field matches the name in the email address
- The city, state, and ZIP code are consistent with each other
- Phone numbers use the right format
- Dropdown selections are contextually appropriate, not just the first option
- Passwords meet common strength requirements
- Dates are valid and properly formatted
The AI generates a coherent persona each time, so the filled form looks like a real person submitted it — exactly the kind of data you want when testing.
Built-In Fallback
We know speed matters during testing. If the AI takes longer than 8 seconds to respond (rare, but possible under heavy load), Magic Fill automatically switches to a built-in heuristic engine. This pattern-matching fallback analyzes field attributes and fills values instantly, so you're never left waiting.
Works With Every Framework
Forms built with React, Vue, Angular, or plain HTML all work. Magic Fill uses native property setters and dispatches the correct DOM events so framework state stays in sync. React's controlled components, Vue's v-model bindings, Angular's form controls — all handled.
What Gets Filled
| Field Type | How It's Handled |
|---|---|
| Text inputs | Name, company, address, username — contextual values |
| Realistic email matching the generated persona | |
| Phone | Properly formatted numbers |
| Password | Strong passwords meeting common requirements |
| Date | Valid dates in the correct input format |
| Textarea | Contextual multi-line text for bios, messages, etc. |
| Dropdowns | Selects a meaningful option from the list |
| Checkboxes | Required ones checked; optional ones randomly toggled |
| Radio buttons | Random valid option selected |
Hidden, disabled, and read-only fields are automatically skipped. Up to 50 fields per form.
Pair It With Screen Recording
Here's where Magic Fill really shines for QA workflows: fill a form instantly, then start a screen recording to capture the submission flow. If anything breaks — validation errors, incorrect redirects, server errors — you have the full recording with console logs and network requests. What used to take minutes of setup now takes seconds.
Try It Today
Magic Fill is available now for all VibeCheck users. Open the extension on any page with a form and click the wand icon. We think it'll change how you test.