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

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

Настройка размеров окна

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

cy.viewport(width, height)
cy.viewport('iphone-6')
cy.viewport('ipad-2', 'landscape')
  • Цифровые значения (width, height) позволяют проверять точные размеры интерфейса.
  • Предустановленные устройства ('iphone-6', 'ipad-2', 'macbook-15') эмулируют реальные устройства с учетом соотношения сторон и разрешения экрана.
  • Параметр ориентации ('portrait' или 'landscape') позволяет проверять поведение интерфейса при портретной и альбомной ориентации.

Использование cy.viewport() рекомендуется в хуках beforeEach для применения одинакового размера к каждому тесту:

beforeEach(() => {
    cy.viewport('ipad-2')
    cy.visit('/dashboard')
})

Проверка адаптивных элементов

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

  1. Видимость элементов: кнопки, меню, карточки и формы должны корректно отображаться.
  2. Состояние компонентов: выпадающие меню должны оставаться интерактивными, карусели и слайдеры — работать без сбоев.
  3. Респонсивные классы и стили: элементы могут менять классы (.hidden, .flex-col) в зависимости от разрешения.

Пример проверки видимости элементов при разных разрешениях:

it('Проверка видимости кнопок на мобильном', () => {
    cy.viewport('iphone-6')
    cy.get('.sidebar').should('not.be.visible')
    cy.get('.mobile-menu-button').should('be.visible')
})

Тестирование переходов между разрешениями

Эмуляция изменения размеров окна в рамках одного теста позволяет проверить корректность адаптивного поведения при динамическом изменении:

it('Меню корректно отображается при изменении размеров', () => {
    cy.viewport(1200, 800)
    cy.get('.sidebar').should('be.visible')

    cy.viewport(768, 1024)
    cy.get('.sidebar').should('not.be.visible')
    cy.get('.mobile-menu-button').click()
    cy.get('.sidebar').should('be.visible')
})

Проверка медиа-запросов

Cypress не предоставляет прямого API для медиа-запросов, но их работу можно проверить через проверку CSS-свойств элементов:

cy.viewport('iphone-6')
cy.get('.header').should('have.css', 'flex-direction', 'column')

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

Использование пользовательских команд

Для упрощения тестирования разных разрешений удобно создавать пользовательские команды:

Cypress.Commands.add('testViewport', (device, callback) => {
    cy.viewport(device)
    callback()
})

it('Проверка адаптивности карточек', () => {
    cy.testViewport('ipad-2', () => {
        cy.get('.card').should('have.length', 3)
    })

    cy.testViewport('iphone-6', () => {
        cy.get('.card').should('have.length', 1)
    })
})

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

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

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

{
  "env": {
    "viewports": ["iphone-6", "ipad-2", "macbook-15"]
  }
}

Циклическая проверка всех размеров обеспечивает стабильность интерфейса при изменении кода.

Отладка тестов адаптивного дизайна

  1. Скриншоты и видео: cy.screenshot() и встроенная запись видео помогают фиксировать ошибки отображения.
  2. Команда .debug(): позволяет остановить тест и изучить состояние элементов на разных разрешениях.
  3. Просмотр реального браузера: режим cypress open позволяет вручную менять размеры окна и наблюдать поведение интерфейса.

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

Оглавление