Работа с автокомплитом

Автокомплит — это один из распространённых элементов веб-интерфейса, где пользователю предлагаются варианты ввода на основе частично введённого текста. В тестировании с использованием Protractor работа с автокомплитом требует особого подхода, так как этот элемент динамический и асинхронный.

Поиск и идентификация элементов автокомплита

Для взаимодействия с автокомплитом важно корректно определить элементы:

  • Поле ввода: основной input, в который пользователь вводит текст.
  • Список предложений: контейнер, в котором отображаются варианты.
  • Элементы списка: отдельные варианты автокомплита, которые нужно выбрать.

Пример поиска элементов:

let inputField = element(by.css('#autocomplete-input'));
let suggestionsList = element.all(by.css('.autocomplete-suggestions li'));

Использование element.all для списка предложений позволяет работать с набором элементов, что удобно для перебора и фильтрации.

Ввод текста и ожидание результатов

Ввод текста в поле автокомплита часто сопровождается задержкой появления вариантов, поэтому необходимо использовать ожидания (ExpectedConditions):

const EC = protractor.ExpectedConditions;

inputField.sendKeys('Pro');
browser.wait(EC.visibilityOf(suggestionsList.first()), 5000);

Здесь browser.wait гарантирует, что первый элемент списка станет видимым перед дальнейшими действиями.

Выбор элемента из списка

Выбор конкретного варианта автокомплита можно реализовать через фильтрацию текста или индекс:

suggestionsList.filter(async (elem) => {
    let text = await elem.getText();
    return text.includes('Protractor');
}).first().click();

Этот подход позволяет выбрать первый элемент, который соответствует заданной подстроке.

Альтернатива — выбор по индексу:

suggestionsList.get(0).click(); // выбираем первый вариант

Обработка асинхронного поведения

Автокомплит может подгружать данные с сервера, что делает элементы динамическими. Для надёжного теста рекомендуется:

  • Использовать ожидания появления элементов (visibilityOf, presenceOf).
  • Проверять количество вариантов перед выбором:
browser.wait(async () => {
    let count = await suggestionsList.count();
    return count > 0;
}, 5000);
  • Использовать ожидания кликабельности для выбранного варианта:
let firstOption = suggestionsList.first();
browser.wait(EC.elementToBeClickable(firstOption), 3000);
firstOption.click();

Проверка корректности выбранного значения

После выбора варианта автокомплита важно убедиться, что поле ввода обновилось:

expect(inputField.getAttribute('value')).toEqual('Protractor');

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

Советы по надёжной работе с автокомплитом

  1. Использовать явные ожидания вместо sleep(), чтобы тесты были стабильными и быстрыми.
  2. Делать проверку количества вариантов, чтобы исключить ошибки при пустом списке.
  3. Фильтровать элементы по тексту, а не полагаться на жесткий индекс, так как порядок может меняться.
  4. Обрабатывать динамические контейнеры: иногда список вариантов создаётся в DOM только после ввода текста.

Примеры комплексного сценария

inputField.sendKeys('Pro');

browser.wait(async () => {
    let count = await suggestionsList.count();
    return count > 0;
}, 5000);

let option = suggestionsList.filter(async (elem) => {
    return (await elem.getText()) === 'Protractor';
}).first();

browser.wait(EC.elementToBeClickable(option), 3000);
option.click();

expect(inputField.getAttribute('value')).toEqual('Protractor');

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

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

Оглавление