Параметры скриншотов: fullPage, clip, omitBackground

В Puppeteer для создания снимков экрана используется метод page.screenshot(). Он предоставляет несколько важных параметров, которые позволяют детально настроить процесс захвата изображения. Эти параметры включают fullPage, clip и omitBackground, каждый из которых влияет на конечный результат в разных аспектах. Разберем их более подробно.

fullPage

Параметр fullPage позволяет сделать скриншот всей страницы, включая те части, которые не помещаются в пределах видимой области (экранной области). При установке этого параметра в значение true Puppeteer захватывает всю страницу, а не только ту её часть, которая видна на экране. Это полезно, когда необходимо получить изображение с содержимым, которое выходит за пределы текущей области просмотра (например, длинные страницы с прокруткой).

Пример использования: 

await page.screenshot({
  path: &
  fullPage: true
});

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

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

clip

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

Значение параметра clip — это объект, который описывает прямоугольную область, которую нужно захватить. Этот объект включает следующие свойства:

  • x: координата верхнего левого угла области по оси X.
  • y: координата верхнего левого угла области по оси Y.
  • width: ширина области.
  • height: высота области.

Пример использования: 

await page.screenshot({
  path: 'clipped-screenshot.png',
  clip: { x: 0, y: 0, width: 800, height: 600 }
});

В этом примере будет захвачена область размером 800x600 пикселей, начиная с верхнего левого угла страницы (координаты 0, 0). Параметр clip полезен для создания снимков только важных частей страницы, таких как определенные блоки, элементы интерфейса или области с контентом.

omitBackground

Параметр omitBackground позволяет управлять фоном скриншота. Когда значение этого параметра установлено в true, Puppeteer не захватывает фон страницы, а делает его прозрачным. Это полезно, если необходимо создать скриншот с прозрачным фоном, например, для использования изображения в графических приложениях или при сборке UI-снимков.

По умолчанию Puppeteer сохраняет фон страницы в том виде, как он есть — будь то белый фон, цветной или изображение. Установив omitBackground: true, можно исключить фон, и результатом будет изображение с прозрачным фоном.

Пример использования: 

await page.screenshot({
  path: 'no-background-screenshot.png',
  omitBackground: true
});

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

Совмещение параметров

Можно использовать несколько параметров одновременно, чтобы более точно настроить процесс захвата скриншотов. Например, можно сделать скриншот определенной области страницы с прозрачным фоном: 

await page.screenshot({
  path: 'clipped-transparent-screenshot.png',
  clip: { x: 0, y: 0, width: 400, height: 300 },
  omitBackground: true
});

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

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

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

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

Оглавление