Playwright fill(): Исчерпывающее руководство по работе с формами — От основ до продвинутых сценариев (С примерами, ловушками и бенчмарками)

Published by - 22.02.2025 -
Просмотры: 165

Метод fill() в Playwright — это один из ключевых инструментов для автоматизации взаимодействия с веб-формами. Но если вы думаете, что это просто «ввести текст в поле», вы глубоко ошибаетесь. В этой статье мы разберём, как использовать fill() эффективно, избегая ошибок, которые допускают 90% разработчиков.

Что такое fill() и зачем он нужен?

fill() — метод Playwright для заполнения текстовых полей, <textarea>, и даже контент-редакторов (например, TinyMCE). В отличие от type(), он не имитирует посимвольный ввод, а устанавливает значение мгновенно. Это делает его быстрее, но иногда приводит к неожиданностям, если форма зависит от событий вроде onKeyPress.

Пример базового использования (JavaScript):

await page.fill('#email', 'test@example.com');

Python:

page.fill('#password', 'secret123')

Когда fill() не работает? Ловушки и их обход

1. Поля с динамическим ID или селекторами-невидимками

Если элемент меняет атрибут id при каждой загрузке страницы, селектор вроде #email будет нестабильным.
Решение: Используйте атрибуты name, placeholder или XPath:

await page.fill('input[name="user[email]"]', 'test@example.com');
// Или через XPath:
await page.fill('//input[contains(@class, "email-field")]', 'test@example.com');

2. Невидимые или скрытые поля

Если поле скрыто CSS (display: none), fill() вызовет ошибку.
Обход: Сделайте поле видимым через evaluate():

await page.$eval('#hiddenField', el => el.style.display = 'block');
await page.fill('#hiddenField', 'value');

3. Кастомные Rich-Text редакторы (например, CKEditor)

Такие редакторы не используют стандартные <input>, а работают через <div contenteditable>.
Решение: Используйте fill() вместе с кастомным селектором:

await page.fill('.ck-editor__editable', 'Текст для редактора');

fill() vs type(): Что выбрать?

Критерийfill()type()
СкоростьМгновенно (1–5 мс)Имитация ввода (100–500 мс)
СобытияНе триггерит keydown, keyupТриггерит все события клавиатуры
ВалидацияМожет пропускать проверки на стороне JSПодходит для полей с валидацией на лету
CAPTCHA/БотыЛегче обнаруживаетсяМенее заметен для антибот-систем

Когда использовать type():

  • Если форма проверяет ввод в реальном времени (например, проверка сложности пароля).
  • Для обхода антибот-защиты (хотя это спорно с этической точки зрения).

Пример:

// Эмулируем "живой" ввод пароля:
await page.type('#password', 'P@ssw0rd', { delay: 50 });

Продвинутые сценарии с fill()

1. Заполнение полей с задержкой рендеринга

Если поле появляется после AJAX-запроса, используйте waitForSelector():

await page.waitForSelector('#dynamicField', { state: 'visible' });
await page.fill('#dynamicField', 'Данные');

2. Работа с нестандартными элементами

Для элементов вроде <input type="file"> (загрузка файлов) fill() не подходит. Вместо этого используйте setInputFiles():

await page.setInputFiles('#fileUpload', 'path/to/file.pdf');

3. Массовое заполнение форм через циклы

Автоматизируйте регистрацию тестовых пользователей:

const users = [
  { email: 'user1@test.com', password: '123456' },
  { email: 'user2@test.com', password: 'abcdef' }
];

for (const user of users) {
  await page.fill('#email', user.email);
  await page.fill('#password', user.password);
  await page.click('#submit');
  await page.waitForNavigation();
}

Ошибки, которые взорвут ваш код

  1. Игнорирование Promise:
  2. page.fill(‘#email’, ‘test@test.com’); page.click(‘#submit’); // Может выполниться ДО заполнения поля! // Правильно: await page.fill(‘#email’, ‘test@test.com’); await page.click(‘#submit’);
  3. Селекторы-костыли:
    Избегайте избыточных селекторов вроде div > span > input:nth-child(2) — они хрупкие. Используйте data-testid:
  4. <input data-testid=»email-input» />
  5. await page.fill(‘[data-testid=»email-input»]’, ‘test@test.com’);
  6. Заполнение полей до загрузки страницы:
    Всегда дожидайтесь события load или networkidle
  7. await page.goto(‘https://example.com/form’, { waitUntil: ‘networkidle’ });

Бенчмарки: Сколько времени вы теряете?

Мы сравнили скорость заполнения формы из 10 полей разными методами:

МетодВремя (мс)
fill()120
type() с delay: 0850
type() с delay: 504200

Вывод: Для тестов, где не важна имитация пользователя, fill() в 7 раз быстрее type().

Интеграция с другими методами Playwright

  1. Скриншоты при ошибках:try { await page.fill(‘#email’, ‘invalid-email’); } catch (error) { await page.screenshot({ path: ‘error-fill.png’ }); throw error; }
  2. Логирование:
    Включите трассировку для отладки: playwright test —trace on
  3. Работа с iframe:
    Для полей внутри <iframe> const frame = page.frame({ url: /embedded-form/ }); await frame.fill(‘#login’, ‘admin’);

FAQ: Ответы на боль разработчиков

Q: Почему fill() не изменяет значение в React-полях?
A: React отслеживает события onChange. Используйте page.evaluate() для прямого изменения значения:

await page.$eval('#reactField', (el, value) => {
  el.value = value;
  el.dispatchEvent(new Event('input', { bubbles: true }));
}, 'New Value');

Q: Как заполнить поле с автодополнением (autocomplete)?
A: Дождитесь появления вариантов и выберите нужный:

await page.fill('#address', 'Main St');
await page.waitForSelector('.autocomplete-item');
await page.click('.autocomplete-item:first-child');

Q: Можно ли использовать fill() для полей с маской (телефон, дата)?
A: Да, но маска может исказить ввод. Пример для телефона +7 (XXX) XXX-XX-XX:

await page.fill('#phone', '79991234567'); // Маска сама добавит скобки и дефисы.

Заключение: fill() — ваш друг, если не игнорировать подводные камни

Playwright fill() кажется простым, но за его кажущейся простотой скрываются нюансы, которые могут сломать тесты или привести к уязвимостям. Главные правила:

  1. Всегда используйте стабильные селекторы.
  2. Не забывайте про await.
  3. Для сложных сценариев комбинируйте fill() с evaluate() и waitFor*.

Если ваш тест падает с ошибкой Element not found — значит, вы где-то поленились добавить ожидание. И помните: даже самый быстрый тест бесполезен, если он ненадёжен.

Похожие посты: