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

Protractor — это инструмент для автоматизированного тестирования веб-приложений на базе Angular и не только. Одной из ключевых возможностей является взаимодействие с элементами страницы и получение их свойств и атрибутов. Атрибуты HTML-элементов часто содержат важную информацию, такую как id, class, href, value или пользовательские атрибуты data-*. Protractor предоставляет удобные методы для извлечения этих данных.

Использование метода getAttribute()

Метод getAttribute() позволяет получить значение указанного атрибута элемента. Он доступен для объектов типа ElementFinder и возвращает Promise, который разрешается в строку с нужным значением.

Синтаксис:

element(locator).getAttribute(attributeName);
  • locator — стратегия поиска элемента (by.id, by.css, by.xpath и т.д.).
  • attributeName — имя атрибута, значение которого требуется получить.

Пример получения атрибута href:

const link = element(by.css('a.example-link'));
link.getAttribute('href').then((hrefValue) => {
    console.log('Ссылка ведет на:', hrefValue);
});

В современном JavaScript можно использовать async/await для упрощения работы с промисами:

const link = element(by.css('a.example-link'));
const hrefValue = await link.getAttribute('href');
console.log('Ссылка ведет на:', hrefValue);

Чтение атрибутов value и placeholder у полей ввода

Для <input> и <textarea> часто важно получить текущее значение или подсказку. Метод getAttribute() позволяет это сделать:

const inputField = element(by.id('username'));

// Получение текущего значения поля
const value = await inputField.getAttribute('value');

// Получение текста подсказки
const placeholder = await inputField.getAttribute('placeholder');

console.log('Value:', value);
console.log('Placeholder:', placeholder);

Метод возвращает строку, даже если поле пустое — в этом случае результат будет ''.

Атрибуты типа class и их использование

Атрибут class может содержать несколько CSS-классов. Получение его значения позволяет проверять состояние элемента через классы, например, активен он или нет:

const button = element(by.css('.submit-button'));
const classes = await button.getAttribute('class');

if (classes.includes('disabled')) {
    console.log('Кнопка отключена');
} else {
    console.log('Кнопка активна');
}

Такой подход удобен для проверки динамически изменяемых стилей и состояний.

Работа с пользовательскими атрибутами data-*

Современные приложения часто используют пользовательские атрибуты для хранения данных:

<div id="product" data-id="12345" data-category="books"></div>

Доступ к этим атрибутам осуществляется так же, как и к стандартным:

const product = element(by.id('product'));
const productId = await product.getAttribute('data-id');
const category = await product.getAttribute('data-category');

console.log('Product ID:', productId);
console.log('Category:', category);

Использование data-* атрибутов удобно для тестирования динамического контента без вмешательства в визуальный интерфейс.

Атрибуты, влияющие на видимость и состояние

Иногда нужно проверить, включен элемент (disabled) или выбран (checked), особенно для форм:

const checkbox = element(by.id('agree'));

// Проверка состояния галочки
const isChecked = await checkbox.getAttribute('checked');
console.log('Чекбокс выбран:', !!isChecked);

// Проверка доступности кнопки
const submitButton = element(by.id('submit'));
const isDisabled = await submitButton.getAttribute('disabled');
console.log('Кнопка доступна:', !isDisabled);

Метод getAttribute() возвращает null, если атрибут отсутствует, что удобно для логических проверок.

Отличие getAttribute() от getText()

Важно понимать разницу между getAttribute() и getText():

  • getAttribute() возвращает значение атрибута, даже если оно скрыто через CSS.
  • getText() возвращает текстовое содержимое элемента, видимое пользователю.

Пример:

<input id="email" value="test@example.com" placeholder="Email">
const input = element(by.id('email'));
const value = await input.getAttribute('value');      // "test@example.com"
const text = await input.getText();                   // ""

getText() вернёт пустую строку, так как <input> не имеет видимого текста. Для проверки содержимого полей ввода всегда используется getAttribute('value').

Обработка ошибок при получении атрибутов

Если элемент не найден или атрибут отсутствует, Protractor возвращает null или отклонённый промис. Рекомендуется использовать обработку исключений:

try {
    const element = await browser.$('#non-existent');
    const attr = await element.getAttribute('title');
    console.log('Title:', attr);
} catch (err) {
    console.error('Ошибка при получении атрибута:', err.message);
}

Такой подход предотвращает сбои тестов и позволяет логировать детали проблем.

Сравнение нескольких атрибутов для тестовых проверок

Часто необходимо проверять соответствие нескольких атрибутов одновременно. Это удобно для комплексных проверок состояния элемента:

const btn = element(by.css('button.login'));

const [text, disabled, classes] = await Promise.all([
    btn.getText(),
    btn.getAttribute('disabled'),
    btn.getAttribute('class')
]);

console.log(`Текст: ${text}, доступна: ${!disabled}, классы: ${classes}`);

Использование Promise.all ускоряет тест, поскольку запросы выполняются параллельно.

Метод getAttribute() является основным инструментом для работы с HTML-атрибутами в Protractor. Он позволяет гибко проверять состояние элементов, получать динамически изменяющиеся данные и взаимодействовать с формами и ссылками, обеспечивая надёжность и точность автоматизированных тестов.

Оглавление