Playwright Browser Automation — JS Form Fill Pattern

Overview

Problem

• Input masks — SSN fields (___-__-____), phone, date fields that fight with .fill()
• Session-sensitive forms — multi-page wizards (JSF, ASP.NET) that lose state between interactions
• Submit button targeting — .click() hitting wrong elements when multiple buttons share text
• Radio buttons with JS listeners — state changes that don't fire with Playwright's synthetic events

Solution: 3-Step JS Pattern

Step 1: Inspect — map all form fields

Step 2: Fill — set all values with proper event dispatch

Step 3: Submit — click by ID

Key Details

• Event dispatch is critical — React, JSF, and Angular forms listen for input, change, and blur events. Setting .value alone doesn't register.
• focus() before setting value — helps input mask fields initialize properly
• For radios: set .checked = true, then dispatch change and call .click()
• Inspect first, fill second, submit third — never combine steps; IDs may change between pages
• Return values for verification — every fill function returns true/false so you confirm all fields were set

When to Use

• Government forms (VitalChek, DMV, business registration)
• Any JSF/server-rendered form with input masks
• Multi-page wizards that lose state with slow UI interactions
• Forms where browser_type/browser_click fail more than once

When NOT to Use

• Simple forms with no input masks — standard Playwright tools work fine
• Forms behind iframes from different origins (Stripe Elements) — can't access cross-origin DOMs

Origin