E2E-тестирование

Для начала работы с fullPage.js необходимо подключить библиотеку к проекту. Можно использовать CDN или локальные файлы. Для локального подключения требуется скачать файлы fullpage.min.js и fullpage.min.css и добавить их в проект:

<link rel="stylesheet" href="fullpage.min.css">
<script src="fullpage.min.js"></script>

Также возможно подключение через npm:

npm install fullpage.js

И последующее импортирование в проект:

import fullpage from 'fullpage.js';
import 'fullpage.js/dist/fullpage.css';

Инициализация fullPage.js

Инициализация производится на элементе-контейнере, содержащем все секции:

new fullpage('#fullpage', {
    autoScrolling: true,
    navigation: true,
    sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage'],
});

Ключевые параметры:

  • autoScrolling – включает прокрутку секций «по полной странице».
  • navigation – отображает навигационные точки.
  • sectionsColor – задаёт цвет каждой секции.
  • anchors – задаёт идентификаторы секций для URL.

Архитектура и DOM структура

Для корректной работы fullPage.js требуется строгая структура HTML:

<div id="fullpage">
    <div class="section">Секция 1</div>
    <div class="section">Секция 2</div>
    <div class="section">Секция 3</div>
    <div class="section">Секция 4</div>
</div>

Каждая секция должна иметь класс .section. Для вертикальных слайдов внутри секции используется .slide:

<div class="section">
    <div class="slide">Слайд 1</div>
    <div class="slide">Слайд 2</div>
</div>

Основные методы fullPage.js

  • moveSectionUp() / moveSectionDown() – перемещение между секциями.
  • moveTo(sectionAnchor, slideAnchor) – переход к конкретной секции или слайду.
  • silentMoveTo(sectionAnchor, slideAnchor) – перемещение без анимации.
  • setScrollingSpeed(speed, type) – изменение скорости прокрутки.

Пример использования метода:

fullpage_api.moveTo('thirdPage');

События fullPage.js

Полезные события для интеграции с тестированием:

  • afterLoad(origin, destination, direction) – срабатывает после загрузки секции.
  • onLeave(origin, destination, direction) – срабатывает перед уходом со секции.
  • afterSlideLoad(section, origin, destination, direction) – после загрузки слайда.

Эти события позволяют отслеживать переходы для тестов.

new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        console.log(`Загружена секция: ${destination.index}`);
    }
});

E2E-тестирование fullPage.js

Для E2E-тестов используют Cypress, Playwright или Selenium. Основные подходы:

  1. Проверка структуры DOM Убедиться, что контейнер #fullpage содержит все секции с классом .section.

    cy.get('#fullpage .section').should('have.length', 4);

  2. Проверка прокрутки между секциями Использовать методы fullPage.js для имитации переходов и проверять активную секцию.

    cy.window().then(win => {
    win.fullpage_api.moveTo('secondPage');
});
cy.get('.fp-section.active').should('have.attr', 'data-anchor', 'secondPage');

  3. Проверка URL после навигации Параметр anchors позволяет проверять корректность изменения URL.

    cy.window().then(win => {
    win.fullpage_api.moveTo('thirdPage');
});
cy.url().should('include', '#thirdPage');

  4. Проверка событий Можно «шпионить» за событиями, чтобы убедиться в их корректном срабатывании.

    const spy = cy.spy();
cy.window().then(win => {
    new fullpage('#fullpage', {
        afterLoad: spy
    });
});
// Перемещаемся и проверяем вызов
cy.window().then(win => win.fullpage_api.moveTo('secondPage'));
cy.wrap(spy).should('have.been.called');

  5. Тестирование адаптивности Изменение размеров окна и проверка корректного отображения секций:

    cy.viewport(768, 1024);
cy.get('#fullpage .section').should('be.visible');

Интеграция с CI/CD

Для автоматизации тестов fullPage.js используется headless-браузер:

  • Cypress: cypress run --headless
  • Playwright: npx playwright test --headed
  • Selenium: запуск через ChromeDriver или GeckoDriver

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

Практические рекомендации

  • Использовать anchors для стабильных E2E-тестов, чтобы не зависеть от индексов секций.
  • Включать scrollBar для тестов на маленьких экранах, чтобы избежать блокировки прокрутки.
  • Проверять загрузку всех ресурсов (изображений, видео) перед запуском переходов для точного тестирования.
  • Для сложных сценариев использовать методы moveTo и silentMoveTo в сочетании с ожиданием активной секции.

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

Оглавление