Проверка загрузки страницы

Основы работы с Protractor

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

В контексте проверки загрузки страницы важны следующие аспекты:

  • Ожидание загрузки страницы В Protractor существует несколько способов убедиться, что страница полностью загружена перед выполнением тестов:

    • browser.get(url) инициирует переход на указанную страницу и автоматически ждёт завершения Angular-зон.
    • Для не-Angular страниц необходимо использовать browser.waitForAngularEnabled(false).
    • browser.wait позволяет задавать кастомные условия ожидания.

Использование browser.get()

Метод browser.get(url) загружает страницу и возвращает промис, который выполняется после полной загрузки Angular-компонентов. Пример:

browser.get('https://example.com');
expect(browser.getCurrentUrl()).toEqual('https://example.com/');

В этом случае проверяется, что URL страницы соответствует ожидаемому, что является одной из базовых проверок успешной загрузки.

Проверка состояния страницы через элементы

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

const mainHeader = element(by.css('h1.main-title'));
const submitButton = element(by.id('submit'));

browser.wait(protractor.ExpectedConditions.visibilityOf(mainHeader), 5000);
browser.wait(protractor.ExpectedConditions.elementToBeClickable(submitButton), 5000);

expect(mainHeader.getText()).toBe('Добро пожаловать');

Здесь используется ExpectedConditions для ожидания появления элементов и возможности их взаимодействия. Это предотвращает ошибки, связанные с попыткой работы с еще не отрендеренными элементами.

Ожидание полной загрузки Angular-приложения

Protractor автоматически ожидает завершения всех асинхронных операций Angular, таких как HTTP-запросы или таймеры. Но иногда необходимо вручную убедиться, что приложение готово:

const EC = protractor.ExpectedConditions;
const loader = element(by.css('.loading-spinner'));

browser.wait(EC.invisibilityOf(loader), 10000);

Этот подход позволяет дождаться исчезновения индикатора загрузки, что гарантирует завершение всех фоновых операций перед взаимодействием с элементами страницы.

Проверка состояния HTTP

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

browser.executeScript('return document.readyState').then(function(state) {
    expect(state).toBe('complete');
});

Метод document.readyState возвращает 'complete', когда DOM полностью загружен и ресурсы страницы загружены. Этот подход подходит для проверки полной готовности страницы независимо от Angular.

Асинхронные проверки и таймауты

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

browser.wait(async () => {
    const title = await browser.getTitle();
    return title === 'Главная страница';
}, 5000, 'Страница не загрузилась за 5 секунд');

Здесь функция в browser.wait возвращает булево значение, указывая, что условие выполнено, а таймаут предотвращает бесконечное ожидание.

Синхронизация с не-Angular страницами

Для тестирования сторонних страниц, не использующих Angular, требуется отключить автоматическую синхронизацию:

browser.waitForAngularEnabled(false);
browser.get('https://non-angular-site.com');

После этого все методы ожидания должны быть основаны на проверках элементов или состоянии DOM, так как автоматическое ожидание Angular-зон отключено.

Логирование и отладка

Для отладки загрузки страницы полезно использовать консоль браузера и вывод текущих состояний:

browser.getCurrentUrl().then(url => console.log('Текущий URL:', url));
browser.getTitle().then(title => console.log('Заголовок страницы:', title));

Это позволяет убедиться, что переход прошёл корректно, и страница загружена полностью.

Рекомендации по устойчивой проверке загрузки

  • Проверять наличие ключевых элементов вместо простого URL или заголовка страницы.
  • Использовать ExpectedConditions для асинхронного ожидания видимости или кликабельности.
  • Для сложных страниц с динамическим контентом — проверять исчезновение индикаторов загрузки.
  • Всегда учитывать таймауты для предотвращения зависания тестов.
  • Для не-Angular страниц явно отключать ожидание Angular с помощью browser.waitForAngularEnabled(false).

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

Оглавление