Как протестировать адаптивность веб-интерфейса под разные разрешения экрана?

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

1. Ручное тестирование в браузере (DevTools):

• Откройте Инструменты разработчика (F12).
• Активируйте Режим адаптивного дизайна (Ctrl+Shift+M / Cmd+Shift+M).
• Выберите стандартные пресеты (iPhone, iPad, Desktop) или задайте произвольное разрешение.
• Проверьте работу в ландшафтной и портретной ориентации.

2. Автоматизация с помощью Selenium WebDriver: Вы можете задавать размер окна браузера программно.

from selenium import webdriver

driver = webdriver.Chrome()

# Установка конкретного разрешения
driver.set_window_size(1920, 1080)  # Full HD
driver.get("https://example.com")
# ... выполнение проверок ...

# Проверка на мобильном разрешении
driver.set_window_size(375, 812)  # iPhone X
driver.get("https://example.com")
# ... выполнение проверок ...

3. Проверка CSS Media Queries: Убедитесь, что в коде определены корректные контрольные точки (breakpoints).

/* Пример контрольных точек */
@media (max-width: 768px) { /* Стили для планшетов и телефонов */ }
@media (max-width: 480px) { /* Стили для мобильных телефонов */ }

4. Облачные сервисы и реальные устройства:

• BrowserStack, Sauce Labs, LambdaTest — предоставляют доступ к тысячам реальных браузеров и устройств для тестирования.
• Физические устройства — тестирование на реальных смартфонах и планшетах обязательно.

Критерии проверки адаптивности:

• Отсутствие горизонтального скролла на целевых разрешениях.
• Корректное отображение и перенос контента (текст, изображения, сетки).
• Работоспособность навигации (бургер-меню на мобильных, обычное меню на десктопе).
• Адаптивность изображений (тег <picture> или srcset).
• Удобство использования (размер кликабельных элементов для touch-интерфейса).