Заполнение текстовых полей

Protractor — это инструмент для end-to-end тестирования Angular-приложений на базе Selenium WebDriver. Одной из ключевых операций при тестировании веб-приложений является работа с текстовыми полями: ввод, очистка и проверка содержимого.

Поиск элементов ввода

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

Примеры локаторов:

let inputById = element(by.id('username'));
let inputByName = element(by.name('email'));
let inputByCss = element(by.css('.form-control'));
let inputByModel = element(by.model('user.password')); // Angular-specific

Для Angular-приложений особенно полезен by.model, который напрямую связывает локатор с привязкой модели.

Ввод текста

Метод sendKeys() используется для симуляции ввода текста в поле:

let usernameField = element(by.id('username'));
usernameField.sendKeys('testuser');

Особенности sendKeys():

  • Поддерживает ввод нескольких значений через запятую:

    input.sendKeys('John', ' ', 'Doe');

  • Может использовать специальные клавиши из объекта protractor.Key:

    input.sendKeys('password', protractor.Key.TAB);

Очистка поля ввода

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

let passwordField = element(by.model('user.password'));
passwordField.clear();
passwordField.sendKeys('newPassword123');

Метод clear() удаляет текущее содержимое поля и делает его готовым для ввода.

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

Для валидации введенных данных используется метод getAttribute('value'):

let emailField = element(by.css('input[type="email"]'));
emailField.sendKeys('example@mail.com');
emailField.getAttribute('value').then(function(value) {
    expect(value).toBe('example@mail.com');
});

Важно помнить, что для Angular-приложений привязка модели не всегда сразу обновляет DOM, поэтому иногда рекомендуется использовать browser.wait или ExpectedConditions для синхронизации.

Работа с асинхронностью

Protractor работает на основе промисов (Promises). Методы sendKeys, clear и getAttribute возвращают промисы, поэтому необходимо учитывать асинхронное выполнение:

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

browser.wait(EC.visibilityOf(inputField), 5000);
inputField.clear().then(() => {
    return inputField.sendKeys('Protractor');
}).then(() => {
    return inputField.getAttribute('value');
}).then((value) => {
    expect(value).toBe('Protractor');
});

Использование async/await делает код более читаемым:

const inputField = element(by.id('search'));
await browser.wait(EC.visibilityOf(inputField), 5000);
await inputField.clear();
await inputField.sendKeys('Protractor');
const value = await inputField.getAttribute('value');
expect(value).toBe('Protractor');

Симуляция специальных действий

Иногда требуется не просто ввод текста, а эмуляция пользовательских действий:

  • Выделение текста и удаление:

    await inputField.sendKeys(protractor.Key.chord(protractor.Key.CONTROL, 'a'));
await inputField.sendKeys(protractor.Key.BACK_SPACE);

  • Ввод с использованием клавиш-модификаторов:

    await inputField.sendKeys(protractor.Key.SHIFT, 'abc'); // Ввод заглавных букв

Сложные сценарии ввода

  1. Ввод в динамически появляющиеся поля:
let dynamicInput = element(by.css('.dynamic-input'));
await browser.wait(EC.presenceOf(dynamicInput), 5000);
await dynamicInput.sendKeys('Dynamic value');
  1. Ввод в форму с несколькими полями подряд:
let firstName = element(by.model('user.firstName'));
let lastName = element(by.model('user.lastName'));

await firstName.clear();
await firstName.sendKeys('John');

await lastName.clear();
await lastName.sendKeys('Doe');
  1. Ввод с последующей проверкой валидации Angular:
let email = element(by.model('user.email'));
await email.clear();
await email.sendKeys('invalid-email');

let errorMessage = element(by.css('.error-message'));
await browser.wait(EC.visibilityOf(errorMessage), 5000);
expect(await errorMessage.getText()).toBe('Некорректный формат email');

Лучшие практики

  • Использовать by.model для Angular-приложений — это надежнее, чем поиск по CSS или ID.
  • Всегда очищать поле перед вводом, чтобы избежать ошибок при повторных тестах.
  • Проверять видимость элемента с ExpectedConditions перед вводом.
  • Использовать async/await для упрощения асинхронного кода.
  • Эмулировать пользовательские действия, такие как TAB или ENTER, через protractor.Key.

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

Оглавление