Определение типа элемента

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

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

WebdriverIO использует функции $ и $$ для поиска элементов. Метод $ возвращает объект Element, а $$ — массив элементов ElementArray. Тип элемента определяется по способу поиска и контексту взаимодействия.

const button = await $('#submit'); // одиночный элемент
const items = await $$('.list-item'); // массив элементов

Особенности:

  • $ всегда возвращает один элемент, либо выбрасывает ошибку, если элемент не найден.
  • $$ возвращает массив элементов, который может быть пустым.
  • Для проверки наличия элемента используется метод isExisting():
if(await button.isExisting()) {
    // элемент присутствует
}

Определение типа HTML-элемента

WebdriverIO позволяет получать атрибуты элементов через getAttribute(). Для идентификации типа тега используется атрибут tagName:

const tagName = await button.getTagName();
console.log(tagName); // 'button', 'input', 'div' и т.д.

Важно: метод getTagName() возвращает строку в нижнем регистре, что облегчает сравнение типов.

Работа с формами и полями ввода

Для элементов форм, таких как <input> или <textarea>, WebdriverIO предоставляет методы:

  • getValue() — возвращает текущее значение поля.
  • setValue() — устанавливает значение.
  • clearValue() — очищает поле.

Тип поля можно дополнительно определить через атрибут type:

const inputType = await $('#email').getAttribute('type');
console.log(inputType); // 'text', 'password', 'email' и т.д.

Это особенно важно при тестировании форм с разными типами ввода, чтобы не возникало ошибок при отправке данных.

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

Тип элемента часто определяет его доступность для взаимодействия. Методы isEnabled(), isDisplayed() и isSelected() позволяют точно определить состояние:

const checkbox = await $('#acceptTerms');

const isEnabled = await checkbox.isEnabled();
const isSelected = await checkbox.isSelected();
const isVisible = await checkbox.isDisplayed();

Особенности:

  • isDisplayed() проверяет видимость элемента на странице, а не только наличие в DOM.
  • isEnabled() указывает на возможность взаимодействия с элементом.
  • isSelected() применяется к чекбоксам и радиокнопкам, возвращает булево значение.

Определение кастомных элементов и компонентов

WebdriverIO позволяет работать не только с базовыми HTML-элементами, но и с кастомными компонентами, например, с элементами, реализованными через Shadow DOM или сторонние UI-библиотеки.

Для работы с Shadow DOM используется метод shadow$:

const shadowButton = await browser.$('#shadow-host').shadow$('#shadow-btn');

Методы типа getTagName() и getAttribute() работают аналогично обычным элементам, что позволяет определять тип и состояние даже вложенных компонентов.

Определение типа элементов через CSS и атрибуты

Иногда для тестирования важен не только тег, но и класс или другие атрибуты. Использование getAttribute() позволяет гибко определять тип визуально или логически:

const className = await button.getAttribute('class');
const dataRole = await button.getAttribute('data-role');

Это удобно для элементов, которые визуально выглядят как кнопки, но реализованы через <div> или <span>.

Проверка типа через JavaScript свойства

WebdriverIO позволяет выполнять произвольный JavaScript через execute() для определения типа элемента на основе его свойств DOM:

const elementType = await browser.execute((el) => el.nodeName, button);
console.log(elementType); // 'BUTTON'

Метод nodeName возвращает тег элемента в верхнем регистре, что иногда удобно для логики сравнения.

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

  • Всегда использовать getTagName() для определения базового типа HTML-элемента.
  • Для форм использовать атрибут type для уточнения типа поля ввода.
  • Проверять состояние элементов через isDisplayed(), isEnabled(), isSelected() перед взаимодействием.
  • Для сложных кастомных компонентов использовать shadow$ и свойства DOM через execute().
  • Для логической идентификации можно использовать CSS-классы и data-атрибуты.

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

Оглавление