Настройка экрана для автоматизации и тестирования с помощью Chrome Headless.

Peter Kvitek

Мы рады сообщить, что как безголовый режим Chrome ( chrome --headless ), так и безголовая оболочка ( chrome-headless-shell ) теперь используют полностью настраиваемый виртуальный безголовый экран, независимый от физических дисплеев, подключенных к системе, на которой работает Chrome. Начальную конфигурацию безголового экрана можно указать с помощью параметра командной строки --screen-info. Этот параметр определяет такие свойства, как точка отсчета, размер, коэффициент масштабирования, ориентация и рабочая область для каждого дисплея.

В режиме работы Chrome без графического интерфейса виртуальные безграфические экраны можно добавлять и удалять с помощью команд протокола Chrome DevTools Protocol (CDP) Emulation.addScreen и Emulation.removeScreen .

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

Проверка статических конфигураций экрана

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

• Протестируйте поведение с помощью параметров --start-maximized и --start-fullscreen , учитывая рабочую область экрана и масштабный коэффициент (например, в режиме киоска).
• Оцените поведение методов element.requestFullscreen() и document.exitFullscreen() на экранах различных размеров и в многоэкранных конфигурациях.
• Обратите внимание на поведение режима разделенного экрана, когда окно занимает несколько экранов или перемещается между ними.
• Проверьте корректность обработки различных настроек дисплея, включая масштабирование, разрешение и разрешение экранов с высоким DPI.
• Оцените открытие окон или всплывающих окон на основном и дополнительном экранах.

Конфигурация с двумя экранами

Следующий скрипт Puppeteer настраивает Chrome для работы в двухэкранном режиме с помощью ключа --screen-info . Основной экран 800x600 настроен в альбомной ориентации, а дополнительный экран 600x800, расположенный непосредственно справа от основного экрана, — в портретной ориентации.

import puppeteer from 'puppeteer-core';

const browser = await puppeteer.launch({
  args: ['--screen-info={800x600 label=1st}{600x800 label=2nd}'],
});

const screens = await browser.screens();
const screenInfos = screens.map(
    s =>  `Screen [${s.id}]`

+   ` ${s.left},${s.top} ${s.width}x${s.height}`
+   ` label='${s.label}'`
+   ` isPrimary=${s.isPrimary}`
+   ` isExtended=${s.isExtended}`
+   ` isInternal=${s.isInternal}`
+   ` colorDepth=${s.colorDepth}`
+   ` devicePixelRatio=${s.devicePixelRatio}`
+   ` avail=${s.availLeft},${s.availTop} ${s.availWidth}x${s.availHeight}`
+   ` orientation.type=${s.orientation.type}`
+   ` orientation.angle=${s.orientation.angle}`
);

console.log(`Number of screens: ${screens.length}\n` + screenInfos.join('\n'));

await browser.close();

Выход :

Number of screens: 2
Screen [1] 0,0 800x600 label='1st' isPrimary=true isExtended=true isInternal=false colorDepth=24 devicePixelRatio=1 avail=0,0 800x600 orientation.type=landscapePrimary orientation.angle=0
Screen [2] 800,0 600x800 label='2nd' isPrimary=false isExtended=true isInternal=false colorDepth=24 devicePixelRatio=1 avail=800,0 600x800 orientation.type=portraitPrimary orientation.angle=0

Тестирование динамических конфигураций экрана

Динамически настраивайте среду экрана, чтобы проверить, как ваш веб-сайт реагирует на неожиданные подключения или отключения монитора, имитируя реальные действия пользователя, такие как подключение ноутбука к настольному монитору. Эти сценарии эмулируются с помощью команд CDP , таких как Emulation.addScreen и Emulation.removeScreen . С помощью этих команд вы можете сделать следующее:

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

Откройте и разверните окно на новом экране.

Следующий скрипт Puppeteer открывает окно в стандартном положении на экране 800x600, затем перемещает и разворачивает окно на новый созданный экран. После этого он возвращает окно в его обычное состояние.

import puppeteer from 'puppeteer-core';

const browser = await puppeteer.launch({
  args: ['--screen-info={800x600}'],
});

async function logWindowBounds() {
  const bounds = await browser.getWindowBounds(windowId);
  console.log(`${bounds.left},${bounds.top}` +
     ` ${bounds.width}x${bounds.height}` +
     ` ${bounds.windowState}`);
}

const page = await browser.newPage({type: 'window'});
const windowId = await page.windowId();
await logWindowBounds();

const screenInfo = await browser.addScreen({
  left: 800,
  top: 0,
  width: 1600,
  height: 1200,
});

await browser.setWindowBounds(windowId, {
  left: screenInfo.left + 50,
  top: screenInfo.top + 50,
  width: screenInfo.width - 100,
  height: screenInfo.height - 100,
});
await logWindowBounds();

await browser.setWindowBounds(windowId, {windowState: 'maximized'});
await logWindowBounds();

await browser.setWindowBounds(windowId, {windowState: 'normal'});
await logWindowBounds();

await browser.close();

Выход :

20,20 780x580 normal
850,50 1500x1100 normal
800,0 1600x1200 maximized
850,50 1500x1100 normal

Больше вариантов использования, примеров и возможностей.

Больше примеров кода вы найдете на pptr.dev . Если у вас возникнут проблемы, сообщите нам об этом через общедоступную систему отслеживания ошибок Puppeteer на GitHub .

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