Работа с datepicker

Основные подходы к тестированию datepicker

Datepicker — это компонент пользовательского интерфейса, позволяющий выбирать дату из календаря. Тестирование его в автоматизированных сценариях требует учета особенностей DOM, динамического рендеринга календаря и возможных нестандартных элементов управления. Основные подходы можно разделить на два направления:

  1. Прямое взаимодействие с полем ввода Иногда datepicker позволяет вводить дату напрямую через текстовое поле. В этом случае Cypress может использовать команды .type() или .clear().type().

    cy.get('#date-input')
  .clear()
  .type('2026-01-10')
  .should('have.value', '2026-01-10');

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

  2. Выбор даты через UI календаря Более точный способ — симулировать действия пользователя: открытие календаря, навигацию по месяцам и выбор дня. Обычно это делается через .click() по нужным элементам DOM.

Пример выбора даты через календарь

cy.get('#date-input').click(); // открытие datepicker
cy.get('.datepicker-month-selector').select('Январь');
cy.get('.datepicker-year-selector').select('2026');
cy.get('.datepicker-day')
  .contains('10')
  .click();
cy.get('#date-input')
  .should('have.value', '2026-01-10');

Ключевой момент: элементы календаря часто динамически рендерятся и могут отсутствовать в DOM до открытия datepicker. Использование .should('be.visible') или .wait() может быть необходимо для надежной работы теста.

Работа с динамическими календарями

Многие datepicker используют динамическое отображение дней месяца и анимации. Cypress позволяет работать с ними через следующие техники:

  • Проверка наличия элемента перед кликом

    cy.get('.datepicker-day')
  .contains('15')
  .should('be.visible')
  .click();

  • Навигация между месяцами и годами Динамическое управление календарем осуществляется через кнопки “вперед/назад”:

    cy.get('.datepicker-next-month').click();
cy.get('.datepicker-prev-year').click();

  • Использование дата-атрибутов Некоторые datepicker имеют data-date или aria-label, что упрощает выбор конкретной даты:

    cy.get('[data-date="2026-01-10"]').click();

Валидация ограничений на даты

Datepicker часто ограничивает выбор определенными диапазонами, например, запрет выбора прошлых дат или выходных. Для тестирования этих ограничений используют Cypress assertions:

cy.get('[data-date="2025-12-31"]').should('have.attr', 'disabled');
cy.get('[data-date="2026-01-01"]').should('not.have.attr', 'disabled').click();

Можно комбинировать проверки с .each() для итерации по множеству элементов:

cy.get('.datepicker-day').each(($day) => {
  const dayValue = $day.text();
  if (parseInt(dayValue) < 10) {
    cy.wrap($day).should('have.attr', 'disabled');
  }
});

Работа с datepicker в разных форматах даты

Разные приложения используют различные форматы даты (DD.MM.YYYY, YYYY-MM-DD, MM/DD/YYYY). Cypress позволяет проверять правильность формата после выбора даты:

cy.get('#date-input')
  .invoke('val')
  .then((val) => {
    expect(val).to.match(/\d{4}-\d{2}-\d{2}/); // YYYY-MM-DD
  });

Динамический выбор даты относительно текущей

Иногда необходимо выбрать дату относительно текущей, например, завтра или через неделю. Cypress позволяет вычислять дату через Jav * aScript:

const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(today.getDate() + 1);

const day = tomorrow.getDate();
const month = tomorrow.getMonth() + 1;
const year = tomorrow.getFullYear();

cy.get('#date-input').click();
cy.get(`[data-date="${year}-${month.toString().padStart(2,'0')}-${day.toString().padStart(2,'0')}"]`).click();

Советы по стабильности тестов datepicker

  • Использовать уникальные селекторы или data-* атрибуты вместо классов CSS, так как стили могут меняться.
  • Предпочтительно использовать .should('be.visible') перед кликом на динамические элементы.
  • Для анимаций и задержек, вместо .wait(), лучше использовать .should('exist') или .should('be.visible') для синхронизации.
  • В сложных случаях возможно комбинирование прямого ввода и UI выбора, чтобы протестировать и функциональность ввода, и визуальный интерфейс.

Работа с кастомными datepicker

Многие современные библиотеки, такие как React-Datepicker, Material UI, используют сложные структуры DOM и виртуальные списки дней. Для них важно:

  • Проверять наличие контейнера календаря после клика на input.
  • Использовать .contains() или cy.find() для поиска нужного дня.
  • Следить за динамическими атрибутами, которые могут быть изменены JavaScript-логикой компонента.
cy.get('#react-datepicker').click();
cy.get('.react-datepicker__day--010').click();
cy.get('#react-datepicker').should('have.value', '01/10/2026');

Работа с datepicker в Cypress требует внимательности к DOM, динамике рендеринга и форматам даты. Правильное использование селекторов, проверок видимости и вычисляемых дат позволяет создавать надежные и стабильные автоматизированные тесты.

Оглавление