Установка viewport

Puppeteer — это библиотека для Node.js, которая предоставляет высокоуровневое API для управления браузером Chromium или Chrome через протокол DevTools. Одной из важных задач при автоматизации тестирования является настройка размера окна браузера. В Puppeteer это можно сделать с помощью параметра viewport, который задает размер области видимости браузера.

Что такое viewport?

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

Как установить viewport?

Для изменения размера окна в Puppeteer используется метод page.setViewport(). Этот метод позволяет задать ширину и высоту окна браузера, а также дополнительно настроить параметры, такие как DPR (Device Pixel Ratio), которые могут повлиять на визуализацию контента.

Пример установки стандартного размера viewport: 

const puppeteer = require(&

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

  // Устанавливаем размер окна
  await page.setViewport({
    width: 1280,
    height: 800
  });

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

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

В этом примере создается новый экземпляр браузера, открывается новая вкладка и устанавливается размер окна 1280x800 пикселей. После этого страница загружается и браузер закрывается.

Дополнительные параметры при установке viewport

При установке viewport можно указать дополнительные параметры:

  • width (число) — ширина окна в пикселях.
  • height (число) — высота окна в пикселях.
  • deviceScaleFactor (число) — коэффициент пикселей на дюйм для эмуляции экранов с высокой плотностью пикселей (например, Retina дисплеи). Обычно этот параметр равен 1, но можно установить значения, такие как 2 или 3 для имитации более высокого разрешения.
  • isMobile (логическое значение) — указывает, что окно должно вести себя как мобильное устройство. Это влияет на несколько аспектов работы с браузером, например, на доступность мобильной версии страницы.
  • hasTouch (логическое значение) — эмулирует наличие сенсорного экрана. Это полезно для тестирования интерфейсов, которые зависят от сенсорного ввода.

Пример с дополнительными параметрами: 

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

В этом примере задается viewport размером 375x667 пикселей, что соответствует типичному размеру экрана мобильного устройства (например, iPhone 6/7/8). Устанавливается также коэффициент устройства для имитации дисплея Retina и активируется поддержка сенсорного ввода.

Применение viewport для мобильных устройств

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

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

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

const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');

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

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

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

В этом примере используется встроенная библиотека DeviceDescriptors, которая содержит информацию о характеристиках различных мобильных устройств. Метод page.emulate() автоматически применяет параметры, такие как размер экрана, коэффициент пикселей и особенности устройства.

Использование viewport для тестирования адаптивных сайтов

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

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

const puppeteer = require('puppeteer');

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

  const sizes = [
    { width: 320, height: 480 },  // маленькие экраны (мобильные устройства)
    { width: 768, height: 1024 }, // планшеты
    { width: 1280, height: 1024 }, // стандартные десктопы
    { width: 1920, height: 1080 }  // большие экраны (Full HD)
  ];

  for (let size of sizes) {
    await page.setViewport(size);
    await page.goto('https://example.com');
    // Здесь можно добавить проверки визуального отображения
  }

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

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

Влияние viewport на производительность

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

Заключение

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

Оглавление