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

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

Настройка устройства

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

Пример настройки устройства:

const puppeteer = require(&

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

  // Эмуляция iPhone X
  const device = puppeteer.devices['iPhone X'];
  await page.emulate(device);

  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });

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

Этот код запускает браузер, создает новую страницу и эмулирует устройство iPhone X. После этого открывается указанная веб-страница и делается скриншот. Puppeteer автоматически устанавливает размеры экрана, разрешение и другие параметры для эмулированного устройства.

Полный контроль над настройками устройства

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

Пример настройки с собственными параметрами:

const puppeteer = require('puppeteer');

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

  // Эмуляция кастомного мобильного устройства
  await page.emulate({
    viewport: {
      width: 375,
      height: 667,
      isMobile: true,
      hasTouch: true,
      deviceScaleFactor: 2,
    },
    userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 10_0_0 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/10.0 Mobile/14A346 Safari/602.1',
  });

  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });

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

Здесь задается экран с размерами 375x667 пикселей, который соответствует стандартному iPhone. Также задается пользовательский агент и устанавливаются параметры, такие как поддержка сенсорного экрана (через hasTouch) и фактор масштабирования (через deviceScaleFactor).

Обработка тач-событий

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

Пример симуляции тач-событий:

const puppeteer = require('puppeteer');

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

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

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

  // Эмуляция касания по координатам (например, центр экрана)
  await page.touchscreen.tap(375 / 2, 667 / 2);

  await page.screenshot({ path: 'screenshot.png' });

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

Метод touchscreen.tap(x, y) имитирует касание экрана в указанных координатах, что полезно при тестировании элементов, таких как кнопки или ссылки, на мобильных устройствах.

Эмуляция ориентации устройства

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

Пример смены ориентации:

const puppeteer = require('puppeteer');

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

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

  // Смена ориентации с портретной на ландшафтную
  await page.setViewport({
    width: 667,
    height: 375,
    isMobile: true,
    hasTouch: true,
    deviceScaleFactor: 2,
  });

  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });

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

В данном примере с помощью метода setViewport меняются размеры экрана, что позволяет эмулировать смену ориентации устройства с вертикальной на горизонтальную.

Тестирование адаптивных веб-страниц

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

Пример тестирования адаптивной страницы:

const puppeteer = require('puppeteer');

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

  // Эмуляция iPhone 6
  const device = puppeteer.devices['iPhone 6'];
  await page.emulate(device);

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

  // Проверка наличия адаптивного меню
  const menuVisible = await page.evaluate(() => {
    const menu = document.querySelector('.menu');
    return menu && window.getComputedStyle(menu).display !== 'none';
  });

  if (menuVisible) {
    console.log('Меню адаптировано для мобильного устройства');
  } else {
    console.log('Меню не адаптировано');
  }

  await page.screenshot({ path: 'screenshot.png' });

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

В данном примере с помощью Puppeteer проверяется, видимо ли мобильное меню на экране iPhone 6. Это типичный сценарий для тестирования адаптивных интерфейсов, где важно убедиться в правильности отображения элементов на мобильных устройствах.

Сетевые условия и эмуляция скорости соединения

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

Пример симуляции медленного соединения:

const puppeteer = require('puppeteer');

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

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

  // Установка медленной сети (например, 3G)
  await page.emulateNetworkConditions({
    offline: false,
    downloadThroughput: 750 * 1024 / 8,  // 750 kbps
    uploadThroughput: 250 * 1024 / 8,    // 250 kbps
    latency: 400, // 400ms задержка
  });

  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });

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

В данном примере с помощью метода emulateNetworkConditions эмулируется медленное 3G-соединение с определенной пропускной способностью и задержкой, что позволяет проверить, как веб-приложение работает в условиях медленного интернета.

Заключение

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