Ориентация экрана

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

Настройка viewport

Viewport определяет область видимого контента страницы и напрямую влияет на ориентацию экрана. В Puppeteer это настраивается через метод page.setViewport(): 

const puppeteer = require(&

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

  await page.setViewport({
    width: 800,
    height: 600,
    deviceScaleFactor: 1,
    isMobile: false,
    hasTouch: false,
    isLandscape: true
  });

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

Пояснения к параметрам:

  • width и height — размеры экрана в пикселях. Для проверки портретной и альбомной ориентации достаточно поменять их местами.
  • deviceScaleFactor — множитель плотности пикселей. Важен для тестирования ретина-дисплеев.
  • isMobile — логика мобильного устройства, включая touch-обработку.
  • hasTouch — имитация сенсорного ввода.
  • isLandscape — ключевой параметр, определяющий альбомную (true) или портретную (false) ориентацию.

Изменение ориентации на лету

Для проверки адаптивного интерфейса часто требуется динамически менять ориентацию без перезапуска страницы. В Puppeteer это достигается повторным вызовом page.setViewport(): 

// Портретная ориентация
await page.setViewport({ width: 600, height: 800, isLandscape: false });

// Альбомная ориентация
await page.setViewport({ width: 800, height: 600, isLandscape: true });

Такая перестройка viewport автоматически перерассчитывает рендеринг страницы, CSS media queries и макеты сетки.

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

Puppeteer включает встроенные пресеты популярных устройств через puppeteer.devices. Они позволяют эмулировать реальные телефоны и планшеты, включая ориентацию: 

const iPhone = puppeteer.devices['iPhone 12'];
await page.emulate(iPhone); // по умолчанию портрет
await page.emulate({
  ...iPhone,
  viewport: { ...iPhone.viewport, isLandscape: true } // альбомная ориентация
});

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

  • медиа-запросов (@media (orientation: landscape/portrait)),
  • адаптивных меню и сеток,
  • функционала, зависящего от touch-событий.

Проверка ориентации с JavaScript на странице

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

const orientation = await page.evaluate(() => {
  return window.matchMedia("(orientation: portrait)").matches ? 'portrait' : 'landscape';
});
console.log(orientation);

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

Советы по организации тестов

  1. Разделение тестов по ориентации: создавать отдельные сценарии для портретной и альбомной ориентации, чтобы избежать смешения состояний.
  2. Использование эмуляции устройств: предпочтительнее для тестирования touch-событий и точного рендеринга.
  3. Минимизация перезапуска браузера: менять viewport динамически вместо запуска нового браузера, экономя ресурсы.
  4. Проверка адаптивных медиа-запросов: обязательно проверять элементы, зависящие от CSS @media, особенно скрытые и всплывающие блоки.

Особенности при параллельном тестировании

При запуске нескольких тестов в параллели важно создавать отдельные страницы (page) для каждой ориентации. Общий браузер можно использовать один, но не менять viewport на одной и той же странице для разных сценариев одновременно. Это предотвращает коллизии между тестами и гарантирует корректную проверку адаптивности.

Влияние на скриншоты и видео

Изменение ориентации напрямую влияет на:

  • размер скриншотов (page.screenshot()),
  • записи видео страницы,
  • визуальное сравнение интерфейсов (visual regression testing).

Пример для скриншота в альбомной ориентации: 

await page.setViewport({ width: 1280, height: 720, isLandscape: true });
await page.screenshot({ path: 'screenshot_landscape.png', fullPage: true });

При этом скриншоты автоматически подстраиваются под заданные размеры и ориентацию, что важно для корректного сравнения в тестах.

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

Оглавление