Предустановленные размеры экранов

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

Настройка размера окна с помощью cy.viewport()

Метод cy.viewport(width, height) изменяет размер окна браузера на указанные ширину и высоту. Он принимает два параметра: ширину и высоту в пикселях.

cy.viewport(1280, 720); // Настройка окна на 1280x720
cy.visit('/'); // Загрузка страницы после установки размеров

Особенности:

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

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

Cypress содержит набор предустановленных устройств с их стандартными размерами экрана и ориентациями. Метод cy.viewport() поддерживает использование названий устройств вместо числовых значений:

cy.viewport('iphone-6');       // 375x667
cy.viewport('ipad-2', 'landscape'); // 1024x768 в альбомной ориентации
cy.viewport('macbook-15');     // 1440x900

Основные предустановленные устройства:

Устройство Размер экрана (px) Ориентация
iphone-3 320x480 portrait
iphone-4 320x480 portrait
iphone-5 320x568 portrait
iphone-6/7/8 375x667 portrait
iphone-6/7/8 Plus 414x736 portrait
ipad-2 768x1024 portrait
ipad-mini 768x1024 portrait
ipad-2/mini 1024x768 landscape
macbook-11 1366x768 landscape
macbook-13 1280x800 landscape
macbook-15 1440x900 landscape
macbook-16 1536x960 landscape

Ориентации:

  • portrait – вертикальная ориентация.
  • landscape – горизонтальная ориентация.
  • По умолчанию для мобильных устройств используется portrait.

Тестирование адаптивного интерфейса

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

  • Расположение блоков и колонок (flex, grid).
  • Появление/скрытие элементов для мобильной версии.
  • Корректность работы навигации, меню и кнопок.
  • Поведение форм и интерактивных компонентов.

Пример последовательного теста для разных устройств:

const devices = ['iphone-6', 'ipad-2', 'macbook-15'];

devices.forEach((device) => {
  it(`Проверка адаптивности на ${device}`, () => {
    cy.viewport(device);
    cy.visit('/');
    cy.get('.navbar').should('be.visible');
    cy.get('.mobile-menu').should(device.includes('iphone') ? 'be.visible' : 'not.exist');
  });
});

Настройка кастомных размеров для тестов

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

cy.viewport(1024, 500); // Проверка нестандартной ширины окна
cy.visit('/');
cy.get('.hero-banner').should('be.visible');

Можно комбинировать с параметром devicePixelRatio в конфигурации браузера, если требуется точная симуляция ретина-дисплеев.

Изменение размера окна в ходе теста

Cypress позволяет динамически изменять размеры экрана в рамках одного теста. Это удобно для проверки адаптивного поведения без повторного запуска cy.visit():

cy.viewport(1280, 720);
cy.get('.sidebar').should('be.visible');

cy.viewport('iphone-6');
cy.get('.sidebar').should('not.exist');
cy.get('.mobile-menu').should('be.visible');

Такой подход экономит время и позволяет проводить последовательные проверки на разных разрешениях в одном тесте.

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

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

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

Оглавление