Создание скриншотов страницы

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

Основы работы с методами для создания скриншотов

Для создания скриншота в Playwright используется метод page.screenshot(). Он позволяет захватывать изображения как всей страницы, так и её отдельных частей, например, определённых элементов. Важно понимать, что Playwright делает скриншоты на уровне браузера, а значит, они точно отражают то, что видит пользователь на экране.

Пример базового создания скриншота
const { chromium } = require('playwright'); 

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

В данном примере создается скриншот всей страницы, который сохраняется в файл с именем example.png. Метод screenshot() принимает объект с различными параметрами, которые позволяют тонко настроить поведение захвата изображения.

Параметры метода page.screenshot()

  1. path — указывает путь и имя файла, куда будет сохранён скриншот.
  2. type — тип изображения (например, ‘png’ или ‘jpeg’). По умолчанию используется ‘png’.
  3. quality — параметр, доступный только для ‘jpeg’ типа. Определяет качество изображения (от 0 до 100).
  4. fullPage — если установлено значение true, будет сделан скриншот всей страницы, включая части, которые не отображаются на экране.
  5. clip — объект с координатами (x, y, width, height), определяющий область страницы, которую нужно захватить. Позволяет делать скриншоты отдельных элементов или частей страницы.
  6. omitBackground — если установлено значение true, фон страницы будет прозрачным, вместо обычного белого.
Пример создания скриншота части страницы
await page.screenshot({
  path: 'element.png',
  clip: { x: 100, y: 100, width: 300, height: 200 }
});

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

Создание скриншотов с прозрачным фоном

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

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

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

Скриншоты с прокруткой страницы

Когда нужно сделать снимок всей страницы, включая её невидимые части, можно использовать параметр fullPage: true. Это позволит Playwright автоматически прокрутить страницу и захватить её целиком.

await page.screenshot({
  path: 'fullpage.png',
  fullPage: true
});

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

Отладка скриншотов в тестах

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

it('should load the login page correctly', async () => {
  await page.goto('https://example.com/login');
  await page.screenshot({ path: 'login-page.png' });
});

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

Сравнение скриншотов

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

Playwright не предоставляет встроенных инструментов для сравнения скриншотов, но это можно реализовать с помощью сторонних библиотек, например, pixelmatch или resemblejs.

Пример с использованием pixelmatch
const pixelmatch = require('pixelmatch');
const fs = require('fs');
const { PNG } = require('pngjs');

const img1 = PNG.sync.read(fs.readFileSync('before.png'));
const img2 = PNG.sync.read(fs.readFileSync('after.png'));
const { width, height } = img1;
const diff = new PNG({ width, height });

const numDiffPixels = pixelmatch(img1.data, img2.data, diff.data, width, height, { threshold: 0.1 });

fs.writeFileSync('diff.png', PNG.sync.write(diff));
console.log(`${numDiffPixels} pixels are different.`);

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

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

Скриншоты играют важную роль в визуальном тестировании. Они могут использоваться для:

  • Проверки визуальных регрессий — обнаружение изменений в внешнем виде страницы.
  • Отладки тестов — запись состояния страницы после выполнения теста.
  • Мониторинга интерфейсов — регулярная проверка интерфейсов на наличие визуальных изменений.
  • Документации — создание отчетов о статусе UI в процессе тестирования.

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

Заключение

Скриншоты в Playwright — это мощный инструмент для автоматизации визуальных тестов. Используя параметры метода page.screenshot(), можно захватывать как отдельные части страницы, так и её полное содержимое. Эти изображения полезны не только для тестирования, но и для анализа визуальных изменений в процессе разработки.

Оглавление