Очистка полей

В автоматизированном тестировании веб-приложений на JavaScript с использованием Protractor одним из ключевых действий является корректная очистка полей ввода. Этот процесс необходим для обеспечения повторяемости тестов, предотвращения конфликтов данных и точного контроля над тестовыми сценариями. Protractor предоставляет несколько подходов к реализации этого действия, учитывая особенности асинхронного взаимодействия с браузером и элементами DOM.

Методы очистки полей ввода

  1. Метод clear()

Protractor наследует функциональность от Selenium WebDriver, поэтому для очистки поля ввода можно использовать встроенный метод clear().

const inputField = element(by.id('username'));
await inputField.clear();
  • Метод полностью удаляет текстовое содержимое поля.
  • Работает только с <input> и <textarea>.
  • При использовании с элементами, недоступными для взаимодействия, может выбрасывать исключение.

Особенности применения:

  • Не подходит для полей с кастомной обработкой ввода через JavaScript (например, React или Angular компоненты с контролем модели), где метод clear() может не инициировать события input или change.
  1. Отправка клавиш для очистки

Если стандартный метод clear() не работает, можно использовать эмуляцию нажатий клавиш: BACK_SPACE или CONTROL + A и DELETE.

const inputField = element(by.id('username'));
await inputField.sendKeys(protractor.Key.chord(protractor.Key.CONTROL, 'a'));
await inputField.sendKeys(protractor.Key.DELETE);
  • Позволяет корректно очищать поля с привязкой к Angular или другим фреймворкам.
  • Эмулирует поведение пользователя, вызывая все события ввода.

Совет: этот метод предпочтителен, если тест проверяет реакцию приложения на пользовательский ввод, а не только на наличие текста.

  1. Использование скриптов через browser.executeScript

Для случаев, когда ни clear(), ни эмуляция клавиш не работает, применяется JavaScript-инъекция для прямого изменения значения поля:

const inputField = element(by.id('username'));
await browser.executeScript("arguments[0].value = '';", inputField.getWebElement());
  • Полностью очищает поле на уровне DOM.
  • Не вызывает событий input и change, что может потребовать их ручного триггера:
await browser.executeScript("arguments[0].dispatchEvent(new Event('input'));", inputField.getWebElement());
  • Применяется для сложных кастомных компонентов или при тестировании чисто визуальных сценариев.

Асинхронность и ожидания

Protractor использует синхронизацию с Angular, но при работе с очисткой полей необходимо учитывать возможные задержки обновления DOM или реактивных моделей. Рекомендуется использовать ожидания (ExpectedConditions), чтобы убедиться, что поле доступно для очистки:

const EC = protractor.ExpectedConditions;
const inputField = element(by.id('username'));

await browser.wait(EC.visibilityOf(inputField), 5000, 'Поле ввода не отображается');
await inputField.clear();
  • Это предотвращает ошибки ElementNotInteractableError.
  • Гарантирует стабильность тестов при динамически обновляемых интерфейсах.

Очистка нескольких полей

При работе с формами часто возникает необходимость очистить несколько полей одновременно. Для этого используется итерация по коллекции элементов:

const inputFields = element.all(by.css('.form-control'));
await inputFields.each(async (field) => {
    await field.clear();
});
  • Использование element.all позволяет масштабировать тесты на формы с динамическим количеством полей.
  • При необходимости можно комбинировать методы clear() и эмуляцию клавиш для надёжности.

Рекомендации по практическому использованию

  • Сочетать методы: для обычных <input> использовать clear(), для кастомных компонентов — клавиши или executeScript.
  • Проверять состояние после очистки: убедиться, что значение поля действительно пустое, особенно если используется нестандартный компонент.
const value = await inputField.getAttribute('value');
expect(value).toBe('');
  • Синхронизация с Angular: всегда учитывать, что изменение значения поля может инициировать асинхронные процессы, поэтому ожидания критически важны.

Очистка полей является фундаментальной операцией при тестировании форм и пользовательского ввода. Выбор метода зависит от типа поля, структуры приложения и необходимости эмуляции пользовательского поведения. Корректная реализация очистки обеспечивает стабильность тестов, предотвращает ложные срабатывания и позволяет создавать надёжные сценарии автоматизации.

Оглавление