Скриншоты отдельных элементов

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

Захват скриншота элемента

Для того чтобы сделать снимок экрана отдельного элемента на странице, необходимо использовать метод elementHandle.screenshot(). Сначала необходимо получить ссылку на элемент с помощью одного из доступных методов поиска, таких как page.$() или page.$$(...), а затем вызвать метод для создания скриншота.

Пример кода, который демонстрирует процесс создания скриншота отдельного элемента:

const { chromium } = require('playwright');

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

  // Находим элемент по селектору
  const element = await page.$('div.example');

  // Делаем скриншот элемента
  await element.screenshot({ path: 'element-screenshot.png' });

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

В данном примере:

  • Открывается браузер и загружается страница.
  • С помощью page.$() выбирается элемент с классом example.
  • После этого на основе этого элемента вызывается метод screenshot(), который сохраняет изображение в файл.

Опции метода screenshot()

Метод screenshot() имеет несколько опций, которые могут быть полезны при настройке скриншота:

  • path — указывает путь, по которому будет сохранён скриншот. Если путь не указан, изображение не будет сохранено, но его можно будет получить в виде буфера.
  • type — формат изображения. Поддерживаются два типа: png (по умолчанию) и jpeg.
  • quality — параметр, доступный только при использовании формата jpeg. Определяет качество изображения от 0 до 100.
  • clip — позволяет захватывать только часть элемента. Этот параметр указывается как объект, содержащий координаты прямоугольной области, в которой будет выполнен скриншот. Структура объекта: { x, y, width, height }.
  • fullPage — если установлено в true, будет сделан скриншот всей страницы, а не только видимой области. Этот параметр можно использовать, если нужно сравнить визуальное состояние страницы с полным захватом.

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

await element.screenshot({
  path: 'element-clip.png',
  clip: { x: 0, y: 0, width: 300, height: 200 }
});

Здесь будет сделан скриншот только части элемента с размерами 300x200 пикселей, начиная с координат (0, 0).

Работа с несколькими элементами

Если необходимо сделать скриншоты нескольких элементов, можно использовать метод page.$$(), который возвращает массив элементов, соответствующих указанному селектору. Далее для каждого элемента вызывается метод screenshot().

Пример:

const elements = await page.$$('div.example');
for (let i = 0; i < elements.length; i++) {
  await elements[i].screenshot({ path: `element-${i}.png` });
}

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

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

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

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

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

const fs = require('fs');
const pixelmatch = require('pixelmatch');
const PNG = require('pngjs').PNG;

const img1 = PNG.sync.read(fs.readFileSync('old-screenshot.png'));
const img2 = PNG.sync.read(fs.readFileSync('new-screenshot.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(`Number of differing pixels: ${numDiffPixels}`);

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

Использование скриншотов для отладки

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

Для этого можно добавить создание скриншотов непосредственно в моменты, когда возникает ошибка или когда происходит сбой:

try {
  await element.screenshot({ path: 'debug-screenshot.png' });
} catch (error) {
  console.error('Error occurred while capturing screenshot', error);
}

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

Заключение

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

Оглавление