46 lines
1.8 KiB
Markdown
46 lines
1.8 KiB
Markdown
# 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
|
|
```python
|
|
# 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. |