Получение атрибутов

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

Метод getAttribute

Метод getAttribute позволяет получить значение любого атрибута элемента. Его синтаксис:

const value = await $('селектор').getAttribute('имяАтрибута');

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

const inputValue = await $('#username').getAttribute('value'); 
// Получение текущего значения input

const placeholderText = await $('input[name="email"]').getAttribute('placeholder'); 
// Получение текста placeholder

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

  • Если атрибут отсутствует, возвращается null.
  • Метод работает с любыми стандартными и пользовательскими атрибутами HTML.
  • Может быть использован для динамически изменяющихся атрибутов, например, disabled, checked или aria-*.

Чтение CSS-свойств через getCSSProperty

Для получения стиля элемента используется метод getCSSProperty. Он возвращает объект с информацией о конкретном CSS-свойстве.

const color = await $('#submit').getCSSProperty('color');
console.log(color.value);

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

  • Метод возвращает объект с полями property, value, parsed.
  • Позволяет проверять актуальные стили элементов на странице, включая цвета, размеры, шрифты и отображение.
  • Поддерживает проверку псевдоклассов через отдельные селекторы.

Метод getText

Хотя getText не является прямым способом чтения атрибутов, он часто используется для проверки текстового содержимого элементов. Полезен для элементов <button>, <label>, <div>.

const buttonText = await $('button#login').getText();

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

  • Возвращает видимый текст элемента.
  • Не возвращает значения атрибутов типа value или placeholder.
  • Может быть комбинирован с getAttribute для проверки соответствия состояния и текста.

Получение атрибутов у коллекций элементов

WebdriverIO позволяет работать с массивами элементов через метод $$. Для чтения атрибутов всех элементов используется итерация с map или for…of.

const items = await $$('ul#menu li');
const texts = [];

for (const item of items) {
    const text = await item.getAttribute('data-name');
    texts.push(text);
}

console.log(texts);

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

  • Атрибуты каждого элемента можно собирать в массивы для дальнейшей проверки.
  • Работает с динамическими списками и таблицами.

Динамическое ожидание изменения атрибутов

Важной практикой является ожидание изменения атрибутов перед взаимодействием. WebdriverIO предлагает waitUntil:

await browser.waitUntil(async () => {
    const attr = await $('#submit').getAttribute('disabled');
    return attr === null;
}, {
    timeout: 5000,
    timeoutMsg: 'Кнопка не стала активной'
});

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

  • Позволяет синхронизировать тест с состоянием страницы.
  • Предотвращает ошибки взаимодействия с неготовыми элементами.
  • Работает с любыми атрибутами, включая aria-* и data-*.

Получение специальных атрибутов

WebdriverIO позволяет работать с checkbox, radio и другими элементами формы:

const isChecked = await $('#subscribe').isSelected();

Использование isSelected упрощает проверку состояния элемента без прямого чтения checked:

  • isSelected() возвращает true или false.
  • Предпочтительно использовать для форм и переключателей.
  • Работает корректно на всех современных браузерах.

Рекомендации по использованию атрибутов

  • Предпочтительно использовать getAttribute для проверки состояния элементов, особенно динамических.
  • Для стилей лучше применять getCSSProperty.
  • Использовать getText только для проверки видимого текста.
  • При работе с коллекциями элементов комбинировать $$ с асинхронными итерациями.
  • Для элементов, состояние которых меняется динамически, всегда добавлять waitUntil.

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

Оглавление