Валидация формы

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

Проверка обязательных полей

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

Для выполнения теста на обязательность поля можно использовать WebdriverIO, например, проверяя наличие ошибки при попытке отправки формы без заполнения обязательных полей.

it('should show an error when a required field is empty', async () => {
    await $('#submit-button').click();
    const errorMessage = await $('#name-error');
    await expect(errorMessage).toBeDisplayed();
});

В этом примере тест проверяет, что при попытке отправить форму без заполнения обязательного поля появляется сообщение об ошибке, связанное с полем имени.

Валидация формата данных

При валидации форм часто необходимо проверять правильность введённых данных, например, для поля электронной почты или номера телефона. WebdriverIO позволяет легко тестировать, правильно ли выполняется проверка формата данных в реальном времени, без отправки формы.

Пример теста для поля электронной почты:

it('should show an error for invalid email format', async () => {
    await $('#email-input').setValue('invalid-email');
    await $('#submit-button').click();
    const errorMessage = await $('#email-error');
    await expect(errorMessage).toBeDisplayed();
});

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

Валидация длины данных

Длина введённых данных также может быть важной частью валидации формы. Например, для пароля может быть установлено минимальное или максимальное количество символов. Проверка длины данных помогает убедиться, что приложение правильно обрабатывает такие требования.

Пример теста для проверки минимальной длины пароля:

it('should show an error for a password that is too short', async () => {
    await $('#password-input').setValue('123');
    await $('#submit-button').click();
    const errorMessage = await $('#password-error');
    await expect(errorMessage).toBeDisplayed();
});

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

Валидация значения в выпадающем списке

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

Пример теста для выпадающего списка:

it('should show an error when an invalid option is selected from the dropdown', async () => {
    await $('#dropdown').selectByVisibleText('Invalid Option');
    await $('#submit-button').click();
    const errorMessage = await $('#dropdown-error');
    await expect(errorMessage).toBeDisplayed();
});

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

Валидация числовых значений

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

Пример теста для проверки числового значения:

it('should show an error for a non-numeric value in the quantity field', async () => {
    await $('#quantity-input').setValue('abc');
    await $('#submit-button').click();
    const errorMessage = await $('#quantity-error');
    await expect(errorMessage).toBeDisplayed();
});

Тест проверяет, что при попытке ввести строку в поле, ожидающее число, появляется сообщение об ошибке.

Валидация с использованием ожиданий (waits)

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

Пример использования ожиданий:

it('should wait for the error message to appear', async () => {
    await $('#email-input').setValue('invalid-email');
    await $('#submit-button').click();
    await $('#email-error').waitForDisplayed({ timeout: 5000 });
    const errorMessage = await $('#email-error');
    await expect(errorMessage).toBeDisplayed();
});

Здесь используется метод waitForDisplayed, чтобы дождаться появления сообщения об ошибке, если оно не отображается немедленно.

Валидация с использованием нескольких шагов

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

Пример сложной валидации:

it('should validate multiple fields in sequence', async () => {
    // Step 1: Validate email format
    await $('#email-input').setValue('invalid-email');
    await $('#submit-button').click();
    const emailErrorMessage = await $('#email-error');
    await expect(emailErrorMessage).toBeDisplayed();

    // Step 2: Validate password length
    await $('#password-input').setValue('123');
    await $('#submit-button').click();
    const passwordErrorMessage = await $('#password-error');
    await expect(passwordErrorMessage).toBeDisplayed();

    // Step 3: Validate quantity field
    await $('#quantity-input').setValue('abc');
    await $('#submit-button').click();
    const quantityErrorMessage = await $('#quantity-error');
    await expect(quantityErrorMessage).toBeDisplayed();
});

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

Использование custom commands для улучшения валидации

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

Пример создания кастомной команды для валидации поля:

browser.addCommand('validateRequiredField', async function (fieldSelector, errorSelector) {
    await $(fieldSelector).click();
    await $('#submit-button').click();
    const errorMessage = await $(errorSelector);
    await expect(errorMessage).toBeDisplayed();
});

// В тесте
it('should validate required fields', async () => {
    await browser.validateRequiredField('#name-input', '#name-error');
    await browser.validateRequiredField('#email-input', '#email-error');
});

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

Проверка сообщений об ошибках

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

Пример теста для проверки текста сообщения:

it('should display the correct error message for the email field', async () => {
    await $('#email-input').setValue('invalid-email');
    await $('#submit-button').click();
    const errorMessage = await $('#email-error');
    const errorText = await errorMessage.getText();
    await expect(errorText).toBe('Please enter a valid email address.');
});

Этот тест проверяет, что сообщение об ошибке на поле электронной почты соответствует ожидаемому тексту.