Работа с window.print

Работа с window.print в Puppeteer

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

Метод window.print() запускает процесс печати документа через интерфейс браузера. Обычно он вызывает диалоговое окно печати, где пользователь может выбрать принтер и настроить параметры печати. Однако при автоматизации тестирования с Puppeteer важно учитывать, что этот процесс может быть блокирован или не виден, так как происходит в фоновом режиме.

В большинстве случаев метод window.print не вызывает реальное окно печати в Puppeteer. Однако, могут быть ситуации, когда важно протестировать его поведение или взаимодействие с другими частями приложения, например, с медиазапросами CSS для печати.

Как использовать window.print в Puppeteer

Выполнение печати в контексте страницы

Для того чтобы имитировать поведение метода window.print с помощью Puppeteer, можно использовать page.evaluate(). Этот метод позволяет выполнить любой JavaScript-код в контексте текущей страницы. Для вызова window.print достаточно передать соответствующую команду через evaluate: 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Запуск print в контексте страницы
  await page.evaluate(() => {
    window.print();
  });

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

Этот код вызывает метод window.print, который запускает диалог печати в браузере. Однако, важно помнить, что при автоматизации тестов реальный процесс печати не будет отображён на экране. Вместо этого Puppeteer будет работать с веб-страницей как обычно, без вмешательства пользователя.

Печать и CSS для печати

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

Пример: 

@media print {
  body {
    font-size: 12pt;
  }
  
  .no-print {
    display: none;
  }
}

Эти стили активируются только при вызове window.print(). Важно удостовериться, что тесты, связанные с печатью, корректно работают с такими медиазапросами. Puppeteer предоставляет все возможности для проверки этих стилей, включая снимки экрана страницы в режиме печати.

Проверка результата печати

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

Для создания PDF-файла с помощью Puppeteer используется метод page.pdf(), который позволяет контролировать размер страницы, поля и другие параметры.

Пример создания PDF: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Генерация PDF
  await page.pdf({ path: 'page.pdf', format: 'A4' });

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

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

Имитация печати с помощью скриншотов

Если важно получить визуальную проверку того, как выглядит страница в процессе печати, можно сделать снимок экрана страницы после активации window.print. Для этого нужно настроить страницу таким образом, чтобы она имитировала состояние печати (например, с помощью медиазапросов CSS). Затем можно сделать скриншот страницы в этом состоянии.

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

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Применение стилей для печати
  await page.emulateMediaType('print');

  // Сделать скриншот
  await page.screenshot({ path: 'print_preview.png' });

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

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

Работа с подменой событий печати

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

Пример перехвата событий: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Слушаем события печати
  await page.exposeFunction('onPrint', () => {
    console.log('Печать была вызвана');
  });

  await page.evaluate(() => {
    window.print = () => {
      window.onPrint();
    };
    window.print();
  });

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

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

Заключение

Работа с window.print в Puppeteer требует учёта множества аспектов, связанных с поведением печати в браузере. Хотя Puppeteer не может напрямую взаимодействовать с диалогом печати, он предоставляет мощные инструменты для имитации печати, проверки стилей для печатных версий страниц, а также создания PDF-документов и скриншотов для тестирования. Эти возможности позволяют автоматизировать тестирование печатных версий веб-страниц и удостовериться в корректности их отображения при выводе на принтер.

Оглавление