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

В автоматизированном тестировании веб-приложений на JavaScript с использованием Protractor ключевым аспектом является проверка видимости элементов на странице. Видимость элемента определяет, может ли пользователь взаимодействовать с ним, а также влияет на корректность выполнения сценариев тестирования. Protractor предоставляет удобные средства для выполнения этих проверок.

WebElement и методы проверки видимости

Основным объектом для взаимодействия с элементами в Protractor является ElementFinder. Для проверки видимости элемента используется метод:

isDisplayed()

Пример:

let loginButton = element(by.id('login-btn'));

loginButton.isDisplayed().then(function(visible) {
    console.log('Кнопка видима:', visible);
});

Метод isDisplayed() возвращает Promise, который разрешается в булевое значение:

  • true — элемент видим;
  • false — элемент невидим.

Важно понимать, что невидимый элемент может существовать в DOM, но быть скрыт с помощью CSS-свойств (display: none, visibility: hidden, opacity: 0 и др.) или находиться за пределами видимой области.

Проверка видимости с ожиданиями (ExpectedConditions)

Protractor интегрирован с WebDriver и предоставляет модуль ExpectedConditions, который позволяет создавать условия ожидания для элементов. Проверка видимости часто используется совместно с browser.wait() для синхронизации тестов.

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

let EC = protractor.ExpectedConditions;
let submitButton = element(by.css('.submit-btn'));

browser.wait(EC.visibilityOf(submitButton), 5000, 'Кнопка не появилась на странице');
submitButton.click();

Пояснения:

  • EC.visibilityOf(element) — возвращает функцию, которая проверяет, что элемент видим;
  • browser.wait(condition, timeout, message) — ожидает выполнения условия в течение указанного времени. Если условие не выполняется, выбрасывается ошибка с сообщением.

Такой подход позволяет избежать ошибок типа ElementNotVisibleException, возникающих при попытке взаимодействовать с элементом, который существует в DOM, но скрыт.

Различие между isPresent() и isDisplayed()

Важно различать проверку наличия элемента в DOM и его видимости:

  • isPresent() проверяет, существует ли элемент в DOM.
  • isDisplayed() проверяет, видим ли элемент на странице.

Пример различия:

let hiddenInput = element(by.id('hidden-input'));

hiddenInput.isPresent().then(console.log);  // true
hiddenInput.isDisplayed().then(console.log); // false

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

Сочетание видимости с ожиданием элементов

Частой практикой является комбинация проверки видимости с проверкой наличия элемента в DOM:

let field = element(by.css('.dynamic-field'));

browser.wait(() => field.isPresent(), 5000)
       .then(() => browser.wait(() => field.isDisplayed(), 5000))
       .then(() => field.sendKeys('Тестовые данные'));

Такой подход обеспечивает:

  1. Проверку того, что элемент добавлен в DOM.
  2. Удостоверение, что элемент видим и готов для взаимодействия.

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

Для работы с коллекциями (ElementArrayFinder) проверка видимости может потребовать фильтрации видимых элементов:

let items = element.all(by.css('.list-item'));

let visibleItems = items.filter(function(elem) {
    return elem.isDisplayed();
});

visibleItems.count().then(console.log);

Метод filter возвращает только те элементы коллекции, которые видимы на странице. Это особенно полезно при динамически подгружаемых списках и таблицах.

Асинхронность и ожидания

Все методы Protractor, связанные с элементами, возвращают Promise. Для корректной проверки видимости необходимо использовать await или .then():

let saveButton = element(by.id('save-btn'));

if (await saveButton.isDisplayed()) {
    await saveButton.click();
}

Без правильной обработки асинхронности возможны ложноположительные или ложоотрицательные срабатывания тестов.

Проверка невидимых элементов

Иногда требуется убедиться, что элемент не видим. В Protractor это реализуется с помощью отрицания ExpectedConditions:

let EC = protractor.ExpectedConditions;
let modal = element(by.css('.popup'));

browser.wait(EC.invisibilityOf(modal), 5000, 'Модальное окно не закрылось');

Метод invisibilityOf возвращает true, если элемент скрыт или отсутствует в DOM.

Практические рекомендации

  • Использовать ExpectedConditions для синхронизации с динамическим контентом.
  • Всегда различать isPresent() и isDisplayed() при проверке элементов.
  • Для коллекций использовать filter для выделения видимых элементов.
  • Проверку видимости совмещать с ожиданием, чтобы избежать ошибок взаимодействия с элементами.
  • Использовать invisibilityOf для проверки закрытия модальных окон, скрытых панелей и других элементов интерфейса.

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

Оглавление