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

Проверка текстового содержимого элементов — одна из базовых и наиболее часто используемых операций в end-to-end тестировании на Protractor. Фреймворк предоставляет несколько способов получения и анализа текста, которые важно понимать в контексте асинхронной модели WebDriverJS и особенностей Angular-приложений.

Основным объектом для работы с элементами является ElementFinder. Он инкапсулирует ссылку на DOM-элемент и предоставляет методы для взаимодействия с ним, включая чтение текста.

const title = element(by.css('h1'));

Метод getText()

Ключевой метод для получения видимого текста элемента — getText(). Он возвращает promise, который резолвится в строку.

title.getText().then(text => {
    expect(text).toBe('Главная страница');
});

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

const text = await title.getText();
expect(text).toBe('Главная страница');

Важно учитывать, что getText() возвращает только видимый текст, аналогично innerText в браузере. Скрытые элементы или части текста с display: none не попадут в результат.

Проверка текста через Jasmine-матчеры

Чаще всего текст проверяется с использованием стандартных матчеров Jasmine:

  • toBe — строгое совпадение строки
  • toContain — частичное совпадение
  • toMatch — проверка по регулярному выражению

Примеры:

expect(await title.getText()).toContain('Главная');
expect(await title.getText()).toMatch(/страниц/);

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

Работа с несколькими элементами

При работе с коллекцией элементов используется ElementArrayFinder, получаемый через element.all().

const items = element.all(by.css('.menu-item'));

Метод getText() у массива возвращает promise, резолвящийся в массив строк:

const texts = await items.getText();
expect(texts).toEqual(['Главная', 'Каталог', 'Контакты']);

Каждый элемент массива соответствует тексту конкретного DOM-элемента в том порядке, в котором они присутствуют на странице.

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

Для доступа к отдельному элементу используется get(index):

const secondItem = items.get(1);
expect(await secondItem.getText()).toBe('Каталог');

Индекс начинается с нуля, как в стандартных массивах JavaScript.

Особенности пробелов и переносов строк

Текст, получаемый через getText(), может содержать:

  • лишние пробелы;
  • символы перевода строки (\n);
  • объединённый текст вложенных элементов.

Пример HTML:

<div>
  <span>Цена:</span>
  <strong>100 ₽</strong>
</div>

Результат getText():

Цена: 100 ₽

Для устойчивых проверок часто используется нормализация строки:

const text = (await element.getText()).replace(/\s+/g, ' ').trim();
expect(text).toBe('Цена: 100 ₽');

Проверка отсутствия текста

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

expect(await element.getText()).toBe('');

Либо проверка длины:

expect((await element.getText()).length).toBe(0);

Следует различать отсутствие текста и отсутствие элемента. Если элемент не существует в DOM, вызов getText() приведёт к ошибке.

Проверка текста input и textarea

Метод getText() не работает для <input> и <textarea>, так как их содержимое хранится в атрибуте value. Для таких элементов используется getAttribute('value').

const input = element(by.css('input[name="email"]'));
expect(await input.getAttribute('value')).toBe('test@example.com');

Это критически важный момент, часто приводящий к ложным падениям тестов.

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

В динамических интерфейсах текст может изменяться асинхронно. Для корректной проверки применяется ожидание изменения текста:

const EC = protractor.ExpectedConditions;

await browser.wait(
    EC.textToBePresentInElement(title, 'Готово'),
    5000
);

Также доступны условия:

  • textToBePresentInElementValue — для input
  • not(EC.textToBePresentInElement(...))

Это снижает зависимость от таймингов и делает тесты стабильнее.

Проверка текста через Page Object

В архитектуре Page Object получение текста инкапсулируется внутри методов страницы:

class MainPage {
    constructor() {
        this.title = element(by.css('h1'));
    }

    async getTitleText() {
        return await this.title.getText();
    }
}

Использование:

expect(await mainPage.getTitleText()).toContain('Главная');

Такой подход упрощает сопровождение тестов при изменении разметки и локаторов.

Частые ошибки при проверке текста

Игнорирование асинхронности Использование getText() без await или then приводит к сравнению promise со строкой.

Сравнение нестабильного текста Динамические данные, таймстемпы, счётчики и локализованные строки требуют частичных или регулярных проверок.

Использование getText() для input Всегда приводит к пустой строке и некорректным ожиданиям.

Проверка текста до полной загрузки страницы Решается использованием ExpectedConditions или ожиданий Angular-стабилизации.

Итоговые рекомендации по проверке текста

  • Использовать getText() только для видимого текстового контента.
  • Для форм — getAttribute('value').
  • Нормализовывать строки перед сравнением при сложной разметке.
  • Предпочитать toContain и toMatch строгому toBe.
  • Всегда учитывать асинхронную природу Protractor.
  • Инкапсулировать работу с текстом в Page Object.

Грамотная проверка текста элементов является фундаментом надёжных end-to-end тестов и напрямую влияет на стабильность и поддерживаемость тестового набора.

Оглавление