Одной из ключевых задач при тестировании веб-приложений является проверка корректности работы форм. Формы являются важным элементом большинства современных веб-страниц, и их тестирование требует особого внимания, поскольку они содержат пользовательский ввод, который влияет на взаимодействие с сервером и дальнейшую работу приложения. WebDriverIO предоставляет широкие возможности для автоматизированного тестирования форм, включая проверку состояния ввода, отправки данных, а также взаимодействия с различными элементами формы, такими как текстовые поля, чекбоксы, радио-кнопки и кнопки отправки.
Для взаимодействия с текстовыми полями формы в WebDriverIO
используется метод setValue, который позволяет задать
значение для поля ввода. Этот метод очищает поле и вводит новые данные.
Например, для ввода имени пользователя можно использовать следующий
код:
$('#username').setValue('testuser');Если необходимо ввести текст в несколько полей, можно использовать цепочку команд:
$('#username').setValue('testuser');
$('#password').setValue('password123');Метод getValue используется для получения текущего
значения поля ввода. Это полезно, когда необходимо проверить, правильно
ли данные были введены пользователем. Пример использования:
const username = $('#username').getValue();
assert.strictEqual(username, 'testuser');Для работы с чекбоксами и радио-кнопками используются методы
click и isSelected. Метод click
активирует или деактивирует чекбокс, а isSelected проверяет
его состояние.
Пример выбора чекбокса:
$('#accept-terms').click();Проверка, выбран ли чекбокс:
const isChecked = $('#accept-terms').isSelected();
assert.strictEqual(isChecked, true);Аналогично работают и радио-кнопки. Чтобы выбрать определенную радио-кнопку, достаточно кликнуть на нее:
$('#male').click();Для проверки, выбрана ли нужная радио-кнопка, используется метод
isSelected:
const isMaleSelected = $('#male').isSelected();
assert.strictEqual(isMaleSelected, true);Для работы с кнопками отправки формы используется метод
click, который эмулирует нажатие кнопки. Важно убедиться,
что перед отправкой формы все необходимые поля заполнены. Например:
$('#submit').click();Если форма содержит несколько кнопок, можно выбирать нужную кнопку по идентификатору, классу или другому атрибуту.
Важной частью тестирования формы является проверка того, что элементы
формы находятся в правильном состоянии, прежде чем взаимодействовать с
ними. В WebDriverIO можно использовать методы ожидания, такие как
waitForExist, waitForDisplayed,
waitForEnabled, которые позволяют дождаться появления
элемента, его видимости или доступности для взаимодействия.
Пример ожидания появления поля для ввода:
$('#username').waitForExist({ timeout: 5000 });Ожидание, пока кнопка не станет активной:
$('#submit').waitForEnabled({ timeout: 5000 });Эти методы помогают избежать ошибок при взаимодействии с элементами, которые еще не загружены или не готовы для действия.
Одной из частых задач при тестировании форм является проверка
сообщений об ошибках. В WebDriverIO можно проверить наличие или
отсутствие сообщений об ошибках, используя методы getText
или getHTML.
Пример проверки наличия сообщения об ошибке:
const errorMessage = $('#username-error').getText();
assert.strictEqual(errorMessage, 'Пользователь с таким именем уже существует');Если ошибка должна исчезнуть после корректного ввода данных, можно проверить, исчезло ли сообщение об ошибке:
$('#username-error').waitForExist({ reverse: true, timeout: 5000 });При тестировании часто возникает необходимость сохранить текущее состояние формы для последующего восстановления. В WebDriverIO для этого можно использовать методы для получения значений полей и их повторного установления. Это полезно для создания сценариев, где форма должна быть возвращена в исходное состояние.
Пример сохранения значений формы:
const username = $('#username').getValue();
const password = $('#password').getValue();После сохранения значений их можно использовать для восстановления состояния формы:
$('#username').setValue(username);
$('#password').setValue(password);После того как все поля формы заполняются и проверяются на
корректность, необходимо протестировать сам процесс отправки формы. Это
можно сделать с помощью метода submitForm, который
эмулирует действие пользователя по отправке формы.
Пример отправки формы:
$('#login-form').submitForm();Кроме того, можно проверять, что форма была отправлена и обработана корректно, например, через проверку URL, появления сообщения об успешной отправке или других признаков, подтверждающих успешное выполнение действия.
В современных веб-приложениях отправка формы часто сопровождается асинхронными запросами, например, с использованием AJAX. В таких случаях важно убедиться, что форма была отправлена, и что данные были правильно обработаны на сервере, не перезагружая страницу.
WebDriverIO предоставляет методы ожидания, которые позволяют дождаться завершения асинхронных операций. Например, можно ожидать, что на странице появится сообщение о результате отправки формы.
Пример ожидания появления сообщения о том, что форма была успешно отправлена:
$('#success-message').waitForExist({ timeout: 5000 });Модальные окна и диалоговые окна часто используются для подтверждения
действий в формах, например, для подтверждения отправки данных или
выполнения других операций. Для взаимодействия с модальными окнами в
WebDriverIO используются методы click и
waitForExist, чтобы дождаться появления окна и закрыть
его.
Пример взаимодействия с модальным окном:
$('#confirm-dialog').waitForExist({ timeout: 5000 });
$('#confirm-button').click();Такой подход позволяет тестировать формы в условиях реального взаимодействия с модальными окнами, что часто встречается в современных приложениях.
Особое внимание стоит уделить доступности элементов формы. Это включает проверку правильного состояния элементов для пользователей с ограниченными возможностями, таких как использование клавиатуры для навигации и заполнения формы.
Для этого можно проверять, что все элементы формы имеют корректные
атрибуты aria, например:
const ariaLabel = $('#username').getAttribute('aria-label');
assert.strictEqual(ariaLabel, 'Username');Также важно удостовериться, что все поля формы имеют правильные фокусировки при переходе с одного элемента на другой с помощью клавиш Tab и Shift + Tab.
Правильное тестирование форм требует внимательности и комплексного подхода, включающего проверку корректности ввода данных, состояния элементов, работы с ошибками, а также с асинхронными запросами и модальными окнами. WebDriverIO предоставляет мощные инструменты для реализации автоматизированных тестов для форм, что помогает ускорить разработку и повысить качество веб-приложений.