Мобильные браузеры

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

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

Для эмуляции мобильного устройства в Puppeteer используется метод page.emulate(). Этот метод принимает объект с конфигурацией устройства, включающий размеры экрана, плотность пикселей и пользовательский агент. В Puppeteer встроен набор предопределённых устройств в объекте puppeteer.devices.

Пример: 

const puppeteer = require(&
const iPhone = puppeteer.devices['iPhone 12'];

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

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

  // Снимок экрана для проверки рендеринга
  await page.screenshot({ path: 'example-iphone.png' });

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

Ключевые параметры эмуляции:

  • viewport.width и viewport.height — размеры экрана.
  • deviceScaleFactor — плотность пикселей, критична для корректного рендеринга графики.
  • isMobile — флаг, включающий поведение мобильного браузера, такое как касания и скроллинг.
  • hasTouch — поддержка сенсорного ввода.
  • userAgent — имитация строки агента браузера, что позволяет тестировать адаптивные версии сайта.

Настройка viewport вручную

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

await page.setViewport({
  width: 375,
  height: 812,
  deviceScaleFactor: 3,
  isMobile: true,
  hasTouch: true
});

await page.setUserAgent('Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1');

Такой подход удобен для тестирования нестандартных устройств или проверки специфических разрешений.

Тестирование сенсорных событий

Мобильные браузеры обрабатывают события касания иначе, чем мышь. Puppeteer позволяет генерировать события touchstart, touchmove и touchend через API страницы. В большинстве случаев достаточно установить hasTouch: true при эмуляции, чтобы встроенные методы Puppeteer корректно симулировали касания: 

await page.tap('#button'); // симуляция касания на элемент

Для сложных жестов можно использовать метод touchscreen: 

const touchscreen = page.touchscreen;
await touchscreen.tap({ x: 100, y: 200 });
await touchscreen.swipe({ startX: 100, startY: 500, endX: 100, endY: 100 });

Мобильные сетевые условия

Тестирование мобильных браузеров часто требует эмуляции медленного соединения или ограниченной полосы пропускания. Puppeteer предоставляет метод page.emulateNetworkConditions(): 

const slow3G = puppeteer.networkConditions['Slow 3G'];
await page.emulateNetworkConditions(slow3G);

Эмуляция сети включает:

  • download — скорость загрузки.
  • upload — скорость выгрузки.
  • latency — задержка в миллисекундах.

Многостраничное тестирование и навигация

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

  • Следить за page.on(‘load’) или page.waitForNavigation() для корректного ожидания загрузки.
  • Собирать данные о производительности через page.metrics().
  • Проверять видимость элементов с page.$eval() и page.waitForSelector().

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

Для проверки кроссплатформенной совместимости полезно запускать один и тот же сценарий на разных устройствах: 

const devices = ['iPhone 12', 'Pixel 5', 'iPad Pro'];

for (const deviceName of devices) {
  const device = puppeteer.devices[deviceName];
  const page = await browser.newPage();
  await page.emulate(device);
  await page.goto('https://example.com');
  await page.screenshot({ path: `${deviceName}.png` });
  await page.close();
}

Тонкости и ограничения

  • Не все функции мобильных браузеров можно точно эмулировать. Например, GPS и гироскоп требуют дополнительных настроек.
  • Эмуляция в Puppeteer использует Chromium, поэтому отличия от реальных устройств с другими движками (Safari на iOS) возможны.
  • Рендеринг тяжелых страниц на мобильных эмуляторах может быть медленнее, чем на десктопе, из-за меньшей виртуальной мощности устройства.

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

Оглавление