autoreg-skills-max/skills/grok-autoreg/references/react-form-filling.md

React Form Filling Pattern for Browser Automation

Problem

React controlled inputs ignore Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set — the form validation sees empty values and refuses to submit.

Solution

Use locator.fill() + dispatch input event after each fill.

Working Code Snippet

# Fill name
name_input = page.locator("input[autocomplete='given-name']").first
await name_input.click()
await name_input.fill("Max")
await page.evaluate("""
    document.querySelector('input[autocomplete="given-name"]')
        ?.dispatchEvent(new Event('input', {bubbles: true}));
""")

# Fill surname
surname_input = page.locator("input[autocomplete='family-name']").first
await surname_input.click()
await surname_input.fill("Mustermann")
await page.evaluate("""
    document.querySelector('input[autocomplete="family-name"]')
        ?.dispatchEvent(new Event('input', {bubbles: true}));
""")

# Fill password (use fill() NOT JS value setter!)
pwd_input = page.locator("input[type='password']").first
await pwd_input.click()
await pwd_input.fill(password)
await page.evaluate("""
    document.querySelector('input[type="password"]')
        ?.dispatchEvent(new Event('input', {bubbles: true}));
""")

# Click submit — use Playwright locator, NOT JS querySelector with :has-text()
btn = page.locator("button:has-text('Завершить регистрацию')").first
await btn.click()

Pitfalls

• :has-text() in JS: document.querySelector('button:has-text("...")') throws SyntaxError. :has-text() is a Playwright pseudo-selector, not valid CSS.
• JS fallback: Use textContent.includes() loop if JS click is needed
• OneTrust buttons: button:has-text('Подтвердить') matches cookie consent buttons. Check class attribute for "onetrust" and skip.