Ввод текста: type и fill

Работа с текстовыми полями — одна из наиболее распространённых задач при автоматизации взаимодействия с веб-страницами. Puppeteer предоставляет несколько способов для ввода данных в формы. Основные из них — это методы type и fill, которые позволяют эффективно работать с элементами формы, такими как текстовые поля, текстовые области и другие поля ввода.

Метод type

Метод type используется для симуляции ввода текста в текстовое поле, как если бы его вводил реальный пользователь с клавиатуры. Этот метод может быть полезен в сценариях, когда необходимо имитировать человеческое поведение, например, ввод текста с задержками между символами.

Синтаксис: 

await page.type(selector, text, options);

  • selector: строка CSS-селектора для поиска целевого элемента.

  • text: строка текста, которую нужно ввести.

  • options: объект настроек, который может содержать следующие параметры:

    • delay: время задержки в миллисекундах между нажатиями клавиш. Это позволяет симулировать реальный процесс набора текста.

Пример: 

await page.type(&


В этом примере Puppeteer будет вводить строку ‘testuser’ в
поле с ID username, делая паузу в 100 миллисекунд между
каждым символом. Это поведение напоминает реальный процесс набора текста
и может быть полезным, например, для имитации поведения пользователя или
для прохождения защитных механизмов, таких как CAPTCHA.




Метод fill




Метод fill выполняет операцию ввода текста немного иначе.
Он сразу заполняет поле ввода полностью, не симулируя нажатия клавиш.
Это делает его более быстрым способом ввода текста, однако он не
имитирует человеческое поведение. В некоторых случаях, например, при
тестировании быстродействия системы или при проверке механизма отправки
данных, метод fill может быть предпочтительнее.




Синтаксис:



await page.fill(selector, text);


    

  • 
selector: строка CSS-селектора для поиска целевого
элемента.

    • 

  • 
text: строка текста, которую нужно ввести.

    • 




Пример:



await page.fill('#username', 'testuser');



В данном примере Puppeteer сразу заполняет поле с ID
username строкой ‘testuser’ без задержек. Этот
метод может быть полезен, когда нужно быстро заполнять форму или
передавать данные без необходимости эмуляции процесса ввода.




Разница между type и fill




Основное различие между методами заключается в следующем:



    

  • 
Метод type — более медленный, но точно
имитирует действия пользователя, что может быть важно при тестировании
взаимодействия с UI или при прохождении проверок, которые зависят от
скорости ввода (например, антиботовые механизмы).

    • 

  • 
Метод fill — более быстрый и подходит для
ситуаций, когда нужно быстро заполнить форму или протестировать
обработку данных, не беспокоясь о времени ввода.

    • 




Пример комбинированного использования




Иногда в тестах возникает необходимость использовать оба метода для
различных сценариев. Например, если нужно заполнять форму с несколькими
полями, можно использовать fill для большинства полей, а
type — для того, где важно симулировать ввод с задержками.



await page.fill('#email', 'test@example.com');
await page.type('#username', 'testuser', { delay: 150 });
await page.fill('#password', 'password123');



В этом примере поле для ввода адреса электронной почты заполняется
быстро с помощью метода fill, а для поля
username используется метод type, который
имитирует ввод текста с задержкой, чтобы тестировать поведение системы
при реальном вводе данных.




Советы и рекомендации



    

  • 
При использовании метода type для ввода паролей или
конфиденциальной информации важно учитывать, что Puppeteer не скрывает
вводимые данные, как это происходит при обычном наборе с клавиатуры.
Поэтому рекомендуется использовать скрытые элементы ввода для таких
данных или проверять скрытие символов с помощью соответствующих
настроек.

    • 

  • 
Для предотвращения сбоев тестов из-за неопределённости в элементах формы
можно использовать методы ожидания, такие как
waitForSelector, перед вызовом type или
fill, чтобы убедиться, что элементы страницы загружены и
готовы к взаимодействию.

    • 



await page.waitForSelector('#username');
await page.type('#username', 'testuser');


    

  • 
Также стоит учитывать возможность взаимодействия с элементами, которые
могут быть скрыты или заблокированы другими элементами. В таких случаях
методы вроде scrollIntoViewIfNeeded могут помочь прокрутить
страницу так, чтобы элементы стали видимыми.

    • 




Заключение




Использование методов type и fill
предоставляет гибкость при автоматизации ввода данных на веб-страницах.
В зависимости от задачи, можно выбрать тот или иной метод для имитации
пользовательского ввода. type будет полезен для имитации
реального ввода с задержками, а fill — для быстрого
заполнения форм.
Оглавление