Работа с real-time данными

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

В тестировании веб-приложений, использующих real-time данные (например, веб-сокеты или динамическое обновление контента через AJAX), ключевой задачей является корректное ожидание появления или изменения элементов на странице. Стандартные методы Protractor, такие как element(by.css(...)), требуют комбинирования с механизмами ожидания (ExpectedConditions) для предотвращения нестабильных тестов.

const EC = protractor.ExpectedConditions;
const myElement = element(by.id('dynamic-element'));

// Ожидание появления элемента на странице
browser.wait(EC.presenceOf(myElement), 5000, 'Элемент не появился в течение 5 секунд');

Здесь важно различать наличие элемента в DOM (presenceOf) и видимость элемента для пользователя (visibilityOf). Для элементов, которые обновляются в реальном времени, чаще применяют visibilityOf, чтобы убедиться, что данные реально доступны для взаимодействия.

Ожидание обновления данных

В real-time приложениях содержимое элемента может меняться без перезагрузки страницы. Для тестирования таких изменений применяются функции ожидания с кастомными условиями.

const dataElement = element(by.binding('liveData'));

browser.wait(() => {
    return dataElement.getText().then(text => text.includes('Обновлено'));
}, 10000, 'Данные не обновились в течение 10 секунд');

Здесь используется функция с возвратом Promise<boolean>, что позволяет гибко проверять любые условия. Такой подход эффективен для веб-приложений с постоянной подгрузкой данных через REST или WebSocket.

Работа с таблицами и списками с динамическим содержимым

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

const listItems = element.all(by.repeater('item in items'));

// Ожидание появления хотя бы одного элемента
browser.wait(() => listItems.count().then(count => count > 0), 5000, 'Список не загрузился');

// Проверка обновления содержимого конкретного элемента
browser.wait(() => listItems.get(0).getText().then(text => text === 'Новый элемент'), 5000);

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

Работа с WebSocket и подписками

Real-time приложения часто используют WebSocket. Protractor напрямую не управляет WebSocket, но тесты могут отслеживать обновления через элементы, которые меняются при получении новых данных:

const messageBox = element(by.id('messages'));

browser.wait(() => messageBox.getText().then(text => text.includes('Новое сообщение')), 10000);

Здесь происходит ожидание визуального отражения новых данных на странице. Такой подход сохраняет совместимость с Angular и асинхронной моделью Protractor.

Избегание нестабильности тестов

Для real-time данных критически важно:

  • Использовать ExpectedConditions для всех операций с динамическими элементами.
  • Не полагаться на фиксированные sleep(), так как задержки могут быть разными на разных устройствах и сетевых условиях.
  • Разделять логику ожидания и проверки: сначала дождаться появления элемента, затем проверить содержимое.
browser.wait(EC.visibilityOf(dataElement), 5000);
expect(dataElement.getText()).toContain('Обновлено');

Такой подход минимизирует флакки-тесты (нестабильные прохождения тестов).

Обработка асинхронных операций в Protractor

Protractor основан на промисах, что позволяет корректно синхронизировать тесты с асинхронными обновлениями real-time данных. Методы getText(), click(), sendKeys() возвращают Promise, поэтому важно использовать then() или async/await:

it('должен дождаться обновления и проверить текст', async () => {
    const updatedText = await dataElement.getText();
    expect(updatedText).toContain('Обновлено');
});

Использование async/await делает код читабельным и поддерживаемым, особенно при сложных сценариях с множеством обновляющихся элементов.

Локаторы и стратегии выбора элементов

Для динамически обновляемых элементов рекомендуется:

  • Использовать by.binding и by.model для Angular-приложений.
  • Применять element.all с фильтрацией (filter) для работы с элементами, которые обновляются по определённому условию.
  • Проверять индексы элементов, так как порядок может меняться.
const items = element.all(by.repeater('item in items')).filter(async (elem) => {
    const text = await elem.getText();
    return text.includes('Активный');
});

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

Совместная работа с AJAX

Real-time данные часто приходят через AJAX-запросы. Для корректной синхронизации с тестами применяются ожидания изменения DOM и анализ состояния элементов:

const loader = element(by.id('loader'));
browser.wait(EC.invisibilityOf(loader), 5000); // Дожидаемся исчезновения индикатора загрузки

Комбинирование ожидания элементов и контроля визуальных индикаторов загрузки позволяет гарантировать, что данные обновлены перед проверкой.

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

Оглавление