Настройка размера viewport

Размер viewport в тестировании веб-приложений напрямую влияет на корректность проверки интерфейса. Cypress предоставляет гибкие средства для управления размерами окна браузера, что позволяет моделировать поведение сайта на разных устройствах — от мобильных до десктопных экранов.

Основные команды для изменения viewport

Cypress предлагает встроенные команды для задания ширины и высоты окна браузера:

cy.viewport(width, height)

width — ширина окна в пикселях.
height — высота окна в пикселях.

Например:

cy.viewport(1280, 720)

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

Использование предустановленных размеров устройств

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

cy.viewport('iphone-6')
cy.viewport('ipad-2', 'landscape')

Первый параметр — название устройства (поддерживаются 'iphone-6', 'iphone-5', 'ipad-2', 'macbook-15' и др.).
Второй параметр (опционально) — ориентация экрана: 'portrait' или 'landscape'.

Пример эмуляции горизонтальной ориентации iPad:

cy.viewport('ipad-2', 'landscape')

Настройка viewport по умолчанию

Для удобства тестирования можно задать размер viewport по умолчанию, который будет применяться ко всем тестам, если не указан другой размер. Это выполняется в файле cypress.config.js:

export default defineConfig({
  e2e: {
    viewportWidth: 1366,
    viewportHeight: 768,
  }
})

После такой настройки каждый тест начнёт выполняться с окном 1366x768 пикселей, что уменьшает необходимость постоянного вызова cy.viewport() внутри тестов.

Динамическое изменение viewport в тесте

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

Пример:

it('проверка адаптивности', () => {
  cy.viewport(375, 667) // мобильный
  cy.get('.menu').should('be.visible')

  cy.viewport(1280, 720) // десктоп
  cy.get('.menu').should('not.be.visible')
})

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

Проверка текущего размера viewport

Хотя Cypress напрямую не предоставляет команду для получения текущего размера viewport, это можно реализовать через доступ к window объекта:

cy.window().then(win => {
  expect(win.innerWidth).to.equal(1280)
  expect(win.innerHeight).to.equal(720)
})

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

Особенности работы viewport с командой `cy.visit()`

Размер viewport устанавливается до загрузки страницы, если cy.viewport() вызывается перед cy.visit(). Если вызвать команду после загрузки страницы, изменения размеров могут повлиять на адаптивные скрипты, но не на первоначальную отрисовку, что иногда приводит к ложным результатам в тестах адаптивности.

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

cy.viewport(1024, 768)
cy.visit('/dashboard')

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

Сравнение размеров viewport и окна браузера

Cypress управляет внутренней областью контента браузера, то есть viewport. Размеры браузера в целом (включая панели инструментов, адресную строку) не учитываются. При тестировании адаптивности важно ориентироваться именно на viewport, так как медиазапросы CSS реагируют на размеры контента, а не на полный размер окна браузера.