Эмуляция медиа-запросов

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

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

Установка и настройка Puppeteer

Перед тем как приступить к эмуляции медиа-запросов, необходимо установить Puppeteer и настроить окружение для тестирования. 

npm install puppeteer

После установки Puppeteer можно приступить к написанию тестов.

Эмуляция мобильных устройств с Puppeteer

Puppeteer предоставляет возможность эмулировать не только браузеры, но и различные мобильные устройства. Для этого используется метод puppeteer.devices, который содержит настройки для популярных мобильных устройств. Это позволяет эмулировать устройства с заданными размерами экрана, плотностью пикселей и другими параметрами, которые могут быть полезны для тестирования медиа-запросов.

Пример эмуляции мобильного устройства 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Эмуляция устройства iPhone X
  const iPhone = puppeteer.devices['iPhone X'];
  await page.emulate(iPhone);

  await page.goto('https://example.com');
  // Выполните действия на странице

  await browser.close();
})();

В этом примере страница будет эмулировать устройство iPhone X с размерами экрана, плотностью пикселей и другими характеристиками, свойственными этому устройству.

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

Кроме использования стандартных устройств, Puppeteer позволяет эмулировать собственные параметры экрана с помощью метода page.setViewport(). Это позволяет вручную задавать ширину, высоту и другие параметры окна браузера, что полезно для тестирования различных медиа-запросов.

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

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Установка кастомных размеров экрана
  await page.setViewport({
    width: 768,
    height: 1024,
    deviceScaleFactor: 2
  });

  await page.goto('https://example.com');
  // Выполните действия на странице

  await browser.close();
})();

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

Эмуляция изменения ориентации экрана

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

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

Пример эмуляции ориентации экрана 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Эмуляция альбомной ориентации
  await page.setViewport({
    width: 1024,
    height: 768,
    deviceScaleFactor: 2
  });

  await page.goto('https://example.com');
  // Выполните действия на странице

  await browser.close();
})();

В этом примере используется альбомная ориентация с разрешением 1024x768.

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

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

Для того чтобы протестировать такие изменения, можно воспользоваться методами Puppeteer для получения данных с элементов на странице, такими как page.$eval() или page.evaluate().

Пример проверки изменения стилей с использованием медиа-запросов 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Эмуляция мобильного устройства
  const iPhone = puppeteer.devices['iPhone X'];
  await page.emulate(iPhone);

  await page.goto('https://example.com');

  // Проверка изменения стиля элемента на мобильном устройстве
  const element = await page.$eval('.some-element', el => {
    return window.getComputedStyle(el).display;
  });

  if (element === 'none') {
    console.log('Элемент скрыт на мобильном устройстве');
  } else {
    console.log('Элемент видим на мобильном устройстве');
  }

  await browser.close();
})();

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

Рекомендации по тестированию с медиа-запросами

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

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

  3. Использование кастомных размеров. Иногда стандартных настроек устройств недостаточно, чтобы протестировать сайт в специфичных условиях. В таких случаях можно задать кастомные размеры экрана с помощью setViewport().

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

Заключение

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

Оглавление