Как проверял сайт на мобильном экране

Подход к тестированию сайта на мобильных экранах

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

1. Стратегия и инструменты для эмуляции и симуляции

Первичную проверку я начинаю с инструментов разработчика (DevTools) в браузере. Это позволяет быстро итерировать.

• Адаптивное тестирование в DevTools: Использую встроенные режимы Responsive Design Mode. Ключевой момент — не только выбор预设ленных устройств (iPhone, Pixel), но и ручная настройка разрешений, изменение плотности пикселей (DPR), а также проверка поведения при повороте (orientation change).
• Эмуляция сетевых условий: В DevTools эмулирую медленные сети (3G, даже 2G) и режим offline для проверки кеширования и работы Service Workers. Обязательно смотрю на загрузку "тяжелых" ресурсов (изображения, видео).

  // Пример: Можно использовать throttling в DevTools или, для автоматизации,
  // capabilities в Selenium WebDriver:
  // 'goog:chromeOptions': {
  //   'args': ['--enable-precise-memory-info', '--disable-popup-blocking'],
  //   'mobileEmulation': { 'deviceName': 'iPhone 12 Pro' }
  // }
  

• Симуляторы и эмуляторы (iOS Simulator / Android Emulator): Для более глубокой проверки, особенно нативного поведения браузера (например, position: fixed на iOS) и взаимодействия с мобильными жестами. Эмуляторы Android Studio и симулятор Xcode незаменимы.

2. Тестирование на реальных устройствах (Real Device Testing)

Эмуляция не заменяет реальные устройства. Я составляю матрицу устройств, основанную на анализе аудитории проекта (наиболее популярные модели, ОС, версии).

• Критерии для матрицы:

    *   **Операционные системы и версии:** Минимум 2 последние мажорные версии iOS и Android.
    *   **Типы устройств:** Флагманы, mid-range и бюджетные модели (разная производительность).
    *   **Разрешения и плотность пикселей:** Full HD+, "вытянутые" экраны (19.5:9), а также устройства с "челкой" (notch).
    *   **Размеры экранов:** От 4.7" до 6.9"+.

• Что проверяю на реальных устройствах:

    *   **Тактильные взаимодействия:** Корректность работы **тач-жестов** (swipe, pinch-to-zoom, long-press), отсутствие "мертвых" зон.
    *   **Аппаратные особенности:** Работа с клавиатурой (появление/скрытие, `viewport` изменения), камерой, геолокацией. Поведение при прерываниях (входящий звонок, SMS, переход в режим сна).
    *   **Производительность:** Плавность анимаций, время загрузки, нагрев устройства и потребление батареи при длительном использовании сайта.
    *   **Кросс-браузерность на мобильных:** Стандартный браузер ОС (Safari, Chrome), а также Firefox, Samsung Internet.

3. Ключевые аспекты функционального и UI-тестирования

• Верстка и отображение (Layout): Проверяю отсутствие горизонтального скролла, корректность viewport метатега, читаемость текстов без масштабирования. Использую CSS Media Queries для контроля.

  /* Пример Media Query для проверки адаптивности */
  @media only screen and (max-width: 768px) {
      .desktop-menu { display: none; }
      .mobile-menu { display: block; }
  }
  

• Навигация и юзабилити: Доступность всех элементов для пальца (рекомендуемый размер — не менее 44x44 pt), удобство использования одной рукой, работа "бургер"-меню, навигация между полями формы.
• Контент: Изображения ресайзятся адекватно, видео проигрываются, отключается user-scalable=no (это антипаттерн для доступности).

4. Инструменты для автоматизации и мониторинга

• Автоматизация: Для регрессионного тестирования ключевых сценариев использую Appium или WebDriverIO в связке с облачными сервисами (см. ниже).

  # Пример кода на Python с Appium для клика по элементу
  from appium import webdriver
  desired_caps = {
      'platformName': 'iOS',
      'deviceName': 'iPhone 13',
      'browserName': 'Safari'
  }
  driver = webdriver.Remote('http://localhost:4723/wd/hub', desired_caps)
  element = driver.find_element_by_accessibility_id('submitButton')
  element.click()
  

• Облачные фермы устройств (Device Farms): Сервисы вроде BrowserStack, Sauce Labs, AWS Device Farm незаменимы для доступа к огромному парку реальных устройств. Я создаю автоматизированные сьюты, которые прогоняются по выбранной матрице устройств после каждого билда.
• Производительность: Использую Lighthouse (в том числе в составе CI/CD) и WebPageTest для аудита скорости, доступности, SEO. Особое внимание — метрикам Core Web Vitals (LCP, FID, CLS) на мобильных сетях.

5. Специфические типы тестирования

• Кросс-доменные проверки: Работа ссылок на приложения (Deep Linking) и переходов с мобильного сайта в нативные приложения (например, в App Store/Google Play).
• Безопасность: Корректная работа на HTTPS, защита от ввода данных в небезопасные iframe.
• Доступность (Accessibility): Проверка с помощью скринридеров (VoiceOver на iOS, TalkBack на Android), достаточный цветовой контраст.

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