Работа с якорями и фрагментами URL

В веб-тестировании часто возникает необходимость взаимодействовать с элементами страницы, расположенными за пределами видимой области или доступными через фрагменты URL (anchors). Protractor, как инструмент для E2E-тестирования Angular-приложений, предоставляет мощные средства для работы с такими сценариями.

Понимание якорей и фрагментов URL

Якорь (anchor) — это часть URL после символа #, которая указывает на определённый элемент страницы, чаще всего через атрибут id. Пример:

https://example.com/page#section2

Здесь section2 — фрагмент URL, указывающий на элемент с id="section2". При переходе по такому URL браузер автоматически прокручивает страницу до соответствующего элемента.

Фрагменты URL полезны для тестирования:

  • Скроллинга к определённым разделам страницы.
  • Проверки корректной работы навигации через якоря.
  • Подтверждения динамического изменения URL при переходах на одностраничных приложениях (SPA).

Получение и проверка фрагмента URL в Protractor

Protractor предоставляет объект browser, через который можно управлять текущим URL. Для извлечения фрагмента используют методы getCurrentUrl() и стандартные средства JavaScript для работы со строками:

it('должен проверить фрагмент URL', async () => {
    await browser.get('https://example.com/page#section2');

    const currentUrl = await browser.getCurrentUrl();
    const fragment = currentUrl.split('#')[1];

    expect(fragment).toEqual('section2');
});

Ключевой момент: getCurrentUrl() возвращает полный URL, поэтому для получения фрагмента необходим разбор строки.

Навигация к якорям на странице

Для прокрутки к элементу, на который указывает якорь, используют стандартные селекторы Protractor (by.id, by.css и т.д.) и методы scrollIntoView() через WebDriver:

const section = element(by.id('section2'));
await browser.executeScript('arguments[0].scrollIntoView(true);', section.getWebElement());

Это позволяет:

  • Перемещать видимую область к нужному элементу.
  • Проверять корректность отображения контента.
  • Работать с динамическими компонентами, которые подгружаются при скролле.

Динамическое изменение фрагмента URL

Одностраничные приложения часто изменяют фрагменты URL без перезагрузки страницы. Для тестирования таких изменений важно:

  1. Следить за обновлением URL после действий пользователя.
  2. Проверять, что страница прокручена до соответствующего элемента.

Пример проверки динамического изменения фрагмента:

const menuItem = element(by.css('a[href="#section3"]'));
await menuItem.click();

const currentUrl = await browser.getCurrentUrl();
const fragment = currentUrl.split('#')[1];

expect(fragment).toEqual('section3');

const section = element(by.id('section3'));
expect(await section.isDisplayed()).toBe(true);

Использование Protractor для проверки внутренних ссылок

Внутренние ссылки, ссылающиеся на якоря, можно тестировать через:

  • click() на элемент ссылки.
  • Проверку текущего URL на наличие корректного фрагмента.
  • Прокрутку к соответствующему элементу и проверку видимости.
const anchorLink = element(by.css('a[href="#top"]'));
await anchorLink.click();

const url = await browser.getCurrentUrl();
expect(url).toContain('#top');

const topSection = element(by.id('top'));
expect(await topSection.isDisplayed()).toBe(true);

Обработка ошибок при работе с якорями

Некорректные или отсутствующие якоря могут вызвать сбои тестов. Практические меры:

  • Проверять наличие элемента перед скроллом:
const section = element(by.id('nonexistent'));
expect(await section.isPresent()).toBe(false);
  • Обрабатывать ситуации, когда фрагмент URL изменился, но элемент ещё не загрузился:
await browser.wait(
    ExpectedConditions.presenceOf(element(by.id('section2'))),
    5000,
    'Элемент section2 не появился на странице'
);

Советы по оптимизации тестов с фрагментами URL

  1. Использовать явное ожидание (ExpectedConditions) при прокрутке и проверке элементов.
  2. Разделять проверку URL и проверку DOM-элементов, чтобы локализовать ошибки.
  3. Автоматизировать тестирование всех внутренних ссылок через циклы и массивы селекторов.

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

const anchors = element.all(by.css('a[href^="#"]'));

anchors.each(async (anchor) => {
    const href = await anchor.getAttribute('href');
    const fragment = href.split('#')[1];
    
    await anchor.click();
    expect(await browser.getCurrentUrl()).toContain(`#${fragment}`);
    
    const target = element(by.id(fragment));
    await browser.wait(ExpectedConditions.visibilityOf(target), 3000);
});

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

Работа с якорями и фрагментами URL в Protractor сочетает управление браузером, проверку URL и манипуляции с DOM, что делает тестирование интерактивных страниц точным и надёжным.

Оглавление