Получение текста элемента

В Protractor для работы с веб-элементами используется объект ElementFinder. Один из наиболее часто используемых приёмов — получение текста элемента, что необходимо для проверки содержимого страницы, валидации данных или сравнения с ожидаемым результатом.

Метод getText()

Метод getText() возвращает текстовое содержимое элемента. Возвращаемое значение — Promise, который разрешается в строку.

let header = element(by.css('h1'));
header.getText().then(function(text) {
    console.log(text);
});

Если использовать современный синтаксис async/await, код становится более читаемым:

let header = element(by.css('h1'));
let text = await header.getText();
console.log(text);

Особенности метода:

  • Возвращает только видимый текст элемента.
  • Не включает скрытый текст (например, display: none).
  • Для элементов с несколькими вложенными текстовыми узлами возвращается объединённая строка.

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

Когда необходимо получить текст у группы элементов, используется element.all() в сочетании с getText():

let items = element.all(by.css('.list-item'));
let texts = await items.getText();
console.log(texts); // ['Элемент 1', 'Элемент 2', 'Элемент 3']

Метод возвращает массив строк, соответствующий каждому элементу.

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

Для input, textarea и других элементов формы текстовое содержимое может быть в атрибуте value. В таких случаях getText() возвращает пустую строку, поэтому используется:

let inputField = element(by.css('input[name="username"]'));
let value = await inputField.getAttribute('value');
console.log(value);

Правило выбора метода:

  • Для видимого текста на странице → getText().
  • Для значения в поле формы → getAttribute('value').

Примеры реальных сценариев

  1. Проверка заголовка страницы:
let title = element(by.tagName('h1'));
expect(await title.getText()).toEqual('Добро пожаловать');
  1. Валидация списка элементов:
let options = element.all(by.css('.dropdown-item'));
let texts = await options.getText();
expect(texts).toContain('Выход');
  1. Динамически обновляемый текст:
let status = element(by.id('status'));
await browser.wait(async () => {
    return (await status.getText()) === 'Готово';
}, 5000);

В данном примере используется browser.wait() для ожидания изменения текста элемента перед дальнейшей проверкой.

Советы по работе с текстом

  • Если элемент скрыт или текст динамически подгружается, перед вызовом getText() рекомендуется использовать ожидания (ExpectedConditions):
let EC = protractor.ExpectedConditions;
let message = element(by.css('.alert'));
await browser.wait(EC.visibilityOf(message), 5000);
let text = await message.getText();
  • Для элементов с пробелами или переносами строк текст может содержать лишние пробелы. Для точного сравнения часто используют trim():
let rawText = await element(by.css('.description')).getText();
let cleanText = rawText.trim();
  • getText() работает корректно даже с вложенными элементами:
<button>
    <span>Сохранить</span>
</button>
let button = element(by.css('button'));
let text = await button.getText(); // 'Сохранить'

Производительность и масштабируемость

  • getText() инициирует вызов к браузеру через WebDriver, поэтому массовое использование на десятках элементов может замедлить тест.
  • Для списков лучше использовать element.all().getText() вместо отдельного вызова getText() на каждом элементе.
  • Использование async/await упрощает код и снижает вероятность ошибок с промисами.

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

Оглавление