---
name: playwright-react-spa
description: Браузерная автоматизация React/Next.js SPA через Playwright — обход controlled inputs, детекция навигации, клики по кнопкам, отладка.
triggers:
  - playwright + react
  - fill() не работает
  - type() не работает
  - controlled input
  - кнопка не кликается
  - страница не детектит переход
  - SPA навигация
  - OpenAI регистрация
  - Camoufox
  - headed browser registration
  - авторег ChatGPT
references:
  - openai-reg-flow.md — схема регистрации OpenAI, таблицы БД, формат кодов
---

# Playwright: автоматизация React SPA

Ключевые паттерны для работы с React/Next.js одностраничниками, где стандартные Playwright-методы (`fill`, `type`, `click`) не работают из-за React-controlled компонентов.

## 1. JS injection — обход React controlled inputs

React перехватывает `input.value` через свой synthetic event system. Playwright `fill()` / `type()` могут не сработать или сброситься. Решение: использовать `page.evaluate()` с native setter'ом.

```python
page.evaluate(f"""
    (() => {{
        const otp = '{code}';
        const inputs = document.querySelectorAll('input[inputmode="numeric"], input[autocomplete="one-time-code"], input[type="tel"], input[type="number"], input[type="text"]');
        for (const input of inputs) {{
            if (input.offsetParent !== null) {{
                const nativeSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value').set;
                nativeSetter.call(input, otp);
                input.dispatchEvent(new Event('input', {{ bubbles: true }}));
                input.dispatchEvent(new Event('change', {{ bubbles: true }}));
                break;
            }}
        }}
    }})()
""")
```

**Порядок важен**: `page.wait_for_selector(..., state="visible", timeout=10000)` перед injection, затем `page.wait_for_load_state("networkidle")` а не `domcontentloaded`.

## 2. Детекция навигации в SPA

React SPA меняет контент без смены URL. `page.url` может оставаться `/email-verification`, а заголовок уже `How old are you?`. Всегда проверять **оба**:

```python
current_url = page.url
page_title = page.title()
if ("target-path" not in current_url) or ("expected title" in page_title.lower()):
    return success
```

Никогда не полагаться только на URL.

## 3. Клик по кнопкам в React SPA

Playwright `locator.click()` часто падает с таймаутом даже когда элемент видим. Приоритет: **JS `btn.click()` > `form.requestSubmit()` > Playwright selectors**.

```python
page.evaluate("""
    (() => {
        const buttons = document.querySelectorAll('button');
        for (const btn of buttons) {
            const text = (btn.textContent || '').toLowerCase();
            if (text.includes('continue') || text.includes('finish creating account') || btn.type === 'submit') {
                if (btn.offsetParent !== null) {
                    btn.click();
                    return 'clicked:' + text.trim().substring(0,30);
                }
            }
        }
        // Fallback: submit the form
        const forms = document.querySelectorAll('form');
        for (const f of forms) {
            if (f.offsetParent !== null) {
                f.requestSubmit();
                return 'form_submitted';
            }
        }
        return 'no_button';
    })()
""")
```

## 4. Python .pyc cache — всегда чистить перед рестартом

После правок `.py` файлов Python может грузить старый `.pyc`. Перед перезапуском сервера:

```bash
find "/path/to/project" -name "__pycache__" -type d -exec rm -rf {} + 2>/dev/null
find "/path/to/project" -name "*.pyc" -delete 2>/dev/null
```

## 5. Отладка: скриншоты и HTML-дампы

Когда автоматизация падает на странице — сохранять **и скриншот, и HTML**:

```python
page.screenshot(path=f"debug_{ts}.png", full_page=True)
with open(f"debug_{ts}.html", "w") as f:
    f.write(page.content())
```

⚠️ `page.content()` возвращает **статический HTML** (React shell), не rendered DOM. Для понимания реального состояния страницы — смотреть **только скриншот**. HTML показывает лишь заголовок `<title>`.

## 6. Ожидание загрузки React-компонентов

```python
# Неправильно — только DOM
page.wait_for_load_state("domcontentloaded", timeout=5000)

# Правильно — ждать сеть + специфичные элементы
page.wait_for_load_state("networkidle", timeout=15000)
page.wait_for_selector("input[inputmode='numeric'], input[autocomplete='one-time-code']", state="visible", timeout=10000)
time.sleep(2)  # дополнительно для React hydration
```

## Pitfalls

- **Не ждать только `domcontentloaded`** — React рендерит асинхронно, контента ещё нет.
- **Не проверять только `page.url`** — SPA меняет контент без смены URL, проверять `page.title()`.
- **Не использовать `element.fill()` / `element.type()`** на React controlled inputs — использовать JS native setter.
- **Исключение — multi-box OTP-сетки (auto-advance)**: `keyboard.type(code)` гонит с авто-advance/перемещением фокуса и ТИХО переставляет цифры — страница показывает «Invalid one-time code», а введённая последовательность ≠ ожидаемой. Надёжный способ = посимвольный `locator.fill(char)` в каждый видимый инпут (nth(k) по `input:visible`), затем ждать автосабмит ~6с; при ошибке не перенабирать, а resend + повторный поллинг почты с фильтром свежести (min_ts).
- **Playwright `click()` на кнопках** часто таймаутит даже на видимых элементах — предпочитать JS `btn.click()`.
- **Python кеширует `.pyc`** — после правок всегда чистить `__pycache__`.
- **`page.content()` показывает React shell**, а не rendered DOM — для отладки смотреть скриншот.
- **"Illegal invocation" в `page.evaluate()`**: `Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set` бросает "Illegal invocation" когда вызывается из `page.evaluate()` в Playwright (this-binding ломается). Это работает в MCP-браузере (`evaluate_script`) но НЕ в Playwright. Для Playwright использовать `page.fill()` + `page.click()` или `page.evaluate()` с `arguments` вместо замыкания.
- **Headless Chromium блокируется Cloudflare**: использовать `launch(channel="chrome", headless=False)` для обхода.