Отправка форм

Protractor является инструментом для автоматизированного тестирования веб-приложений на основе Angular и других JavaScript-фреймворков. Основная его особенность — интеграция с Angular, что позволяет корректно работать с асинхронными операциями и механизмом зон (Zones). При работе с формами важно учитывать синхронизацию элементов страницы и корректное ожидание загрузки данных.

Идентификация элементов формы

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

По CSS-селекторам:

let usernameInput = element(by.css('#username'));
let passwordInput = element(by.css('.password-field'));

По имени тега и атрибуту:

let emailInput = element(by.name('email'));

По Angular-специфическим локаторам:

let submitButton = element(by.buttonText('Отправить'));

Использование правильного локатора напрямую влияет на стабильность тестов. Наиболее надежными считаются локаторы по уникальному идентификатору (id) или тексту кнопки.

Ввод данных в поля формы

Protractor использует цепочку команд с методами sendKeys для ввода текста. Перед отправкой данных рекомендуется убедиться, что элемент видим и доступен для взаимодействия:

await browser.wait(ExpectedConditions.visibilityOf(usernameInput), 5000);
await usernameInput.clear();
await usernameInput.sendKeys('test_user');

await passwordInput.clear();
await passwordInput.sendKeys('secure_password');

Ключевые моменты:

Использование clear() предотвращает накопление старых данных.
ExpectedConditions позволяет дождаться полной загрузки и готовности элементов.
Методы sendKeys можно комбинировать с клавишами, например, protractor.Key.ENTER.

Работа с выпадающими списками и радиокнопками

В формах часто встречаются селекты и радиокнопки. Для взаимодействия с ними применяются методы click и element.all:

Выбор значения из селекта:

let countrySelect = element(by.id('country'));
await countrySelect.click();
let option = countrySelect.element(by.cssContainingText('option', 'Россия'));
await option.click();

Выбор радиокнопки:

let genderRadio = element(by.css('input[name="gender"][value="male"]'));
await genderRadio.click();

Важно учитывать, что некоторые элементы могут быть скрыты в DOM. Для таких случаев нужно использовать browser.executeScript для прокрутки к элементу или снятия атрибута hidden.

Отправка формы

Форма может быть отправлена кнопкой или через событие submit. Protractor поддерживает оба подхода:

Клик по кнопке:

let submitButton = element(by.css('button[type="submit"]'));
await submitButton.click();

Использование метода submit на форме:

let form = element(by.css('form#loginForm'));
await form.submit();

После отправки формы важно убедиться, что страница перешла в новое состояние или отобразилось ожидаемое сообщение. Для этого применяются ожидания:

let successMessage = element(by.css('.success-message'));
await browser.wait(ExpectedConditions.visibilityOf(successMessage), 5000);

Обработка асинхронных действий

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

let loader = element(by.css('.loading-spinner'));
await browser.wait(ExpectedConditions.invisibilityOf(loader), 5000);

Это предотвращает ошибки, когда тест пытается проверить результат до того, как данные полностью загрузились.

Валидация данных после отправки

Проверка корректности отправки формы является обязательным шагом. Protractor позволяет проверить текст сообщений, значения полей или изменение URL:

let confirmationText = await element(by.css('.confirmation')).getText();
expect(confirmationText).toEqual('Данные успешно отправлены');

let currentUrl = await browser.getCurrentUrl();
expect(currentUrl).toContain('/dashboard');

Также можно проверять состояние полей формы после отправки, например, их очистку или наличие ошибок валидации.