Смена ориентации

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

Изменение размеров экрана

Основным методом для управления размерами окна в Cypress является команда cy.viewport(). Она позволяет задать ширину и высоту окна в пикселях либо использовать предустановленные размеры популярных устройств.

Синтаксис команды:

cy.viewport(width, height)
cy.viewport(preset, orientation)
  • width и height — числовые значения ширины и высоты окна.
  • preset — строковое название устройства ('iphone-6', 'ipad-2', 'macbook-15' и т.д.).
  • orientation — ориентация экрана: 'portrait' или 'landscape'.

Пример смены ориентации iPhone 6 на портретную и ландшафтную:

cy.viewport('iphone-6', 'portrait')
cy.viewport('iphone-6', 'landscape')

Работа с адаптивным интерфейсом

Для проверки адаптивного поведения интерфейса после смены ориентации важно комбинировать cy.viewport() с проверкой элементов страницы. Обычно тест включает:

  1. Установку начальной ориентации и размеров.
  2. Проверку видимости и положения ключевых элементов.
  3. Смену ориентации.
  4. Повторную проверку состояния элементов.

Пример теста адаптивного меню:

describe('Адаптивное меню при смене ориентации', () => {
  it('Проверка отображения меню на iPad', () => {
    cy.visit('/dashboard')

    cy.viewport('ipad-2', 'portrait')
    cy.get('.sidebar').should('be.visible')

    cy.viewport('ipad-2', 'landscape')
    cy.get('.sidebar').should('not.be.visible')
    cy.get('.hamburger-menu').should('be.visible')
  })
})

В данном примере проверяется, что боковая панель скрывается в ландшафтной ориентации, а вместо неё отображается «гамбургер-меню».

Динамическое тестирование различных устройств

Cypress позволяет циклически проверять интерфейс на нескольких устройствах и ориентациях, что упрощает тестирование адаптивности:

const devices = [
  { name: 'iphone-6', orientations: ['portrait', 'landscape'] },
  { name: 'ipad-2', orientations: ['portrait', 'landscape'] },
  { name: 'macbook-15', orientations: ['landscape'] }
]

devices.forEach(device => {
  device.orientations.forEach(orientation => {
    it(`Проверка ${device.name} в ориентации ${orientation}`, () => {
      cy.viewport(device.name, orientation)
      cy.visit('/dashboard')
      cy.get('.header').should('be.visible')
    })
  })
})

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

Ограничения и особенности

  1. Эмуляция ориентации не меняет физическое устройство. Cypress работает в браузере, поэтому имитация ориентации изменяет только размеры окна, а не физические сенсорные параметры.
  2. Команда cy.viewport() должна вызываться после cy.visit(), если требуется точная имитация поведения страницы при загрузке. В противном случае могут возникнуть некорректные рендеры элементов, особенно при использовании медиазапросов CSS.
  3. Некоторые браузерные плагины и расширения могут влиять на корректность отображения элементов после смены ориентации.

Совмещение с тестами на интерактивность

После смены ориентации важно проверять не только визуальное отображение, но и интерактивные элементы:

cy.viewport('iphone-6', 'landscape')
cy.get('.hamburger-menu').click()
cy.get('.sidebar').should('be.visible')
cy.get('.close-menu').click()
cy.get('.sidebar').should('not.be.visible')

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

Практические советы

  • Для комплексных страниц с множеством адаптивных блоков рекомендуется создавать отдельные функции для смены ориентации и проверки ключевых элементов.
  • В больших тестовых сценариях можно использовать хуки beforeEach для установки базовой ориентации перед каждым тестом.
  • Для визуального контроля адаптивности интегрируют Cypress с инструментами скриншотного тестирования, фиксируя различия при смене ориентации.

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

Оглавление