Проведение визуальных тестов является важной частью автоматизированного тестирования веб-приложений. Одним из самых распространённых подходов является использование снимков страниц (или скриншотов) для того, чтобы проверить, как изменяется интерфейс приложения с течением времени. Puppeteer предоставляет удобный инструмент для захвата снимков, что позволяет легко интегрировать этот процесс в систему тестирования.
Puppeteer — это библиотека для Node.js, которая предоставляет API для управления браузером Chromium или Chrome. Она позволяет выполнять множество задач, таких как симуляция пользовательских действий, тестирование интерфейсов и взаимодействие с веб-страницами.
Для захвата снимков достаточно вызвать метод
page.screenshot() на экземпляре страницы. Этот метод
позволяет сделать скриншот всей страницы или её части, сохраняя
изображение в различных форматах (например, PNG или JPEG). Основная
задача при использовании снимков заключается в сравнении изображений для
выявления визуальных изменений на страницах.
const puppeteer = require(&
async function takeScreenshot() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await page.screenshot({ path: 'example.png' });
await browser.close();
}
takeScreenshot();
В приведённом примере создаётся снимок страницы example.com
и сохраняется в файл example.png.
Метод page.screenshot() имеет несколько параметров, которые
позволяют настроить поведение снимка в зависимости от требований:
true,
будет захвачен скриншот всей страницы, включая области, находящиеся за
пределами экрана. По умолчанию снимается только видимая часть страницы.
png или jpeg).
Пример использования параметров для захвата части страницы:
await page.screenshot({
path: 'example-part.png',
clip: { x: 0, y: 0, width: 800, height: 600 }
});В этом примере будет сделан скриншот только области 800x600 пикселей, начиная с верхнего левого угла страницы.
Для автоматизированного тестирования важным моментом является способность сравнивать снимки страниц, чтобы выявить изменения в интерфейсе. Существует несколько подходов к решению этой задачи.
pixelmatch
Одним из популярных способов сравнения изображений является
использование библиотеки pixelmatch. Эта библиотека
позволяет сравнивать два изображения, пиксель за пикселью, и вычислять
процент различий между ними. Она может быть полезной для обнаружения
незначительных изменений в UI, таких как изменение цвета кнопки или
текста.
Для использования pixelmatch необходимо установить её через
npm:
npm install pixelmatch
Пример кода для сравнения двух снимков с использованием
pixelmatch:
const fs = require('fs');
const pixelmatch = require('pixelmatch');
const PNG = require('pngjs').PNG;
const img1 = PNG.sync.read(fs.readFileSync('screenshot1.png'));
const img2 = PNG.sync.read(fs.readFileSync('screenshot2.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 different pixels: ${numDiffPixels}`);
В этом примере сравниваются два снимка, screenshot1.png и
screenshot2.png. Результат сохраняется в виде изображения
diff.png, где будут отображены отличия между изображениями.
Метод pixelmatch возвращает количество пикселей, которые
отличаются на двух изображениях. Это позволяет быстро определить,
насколько сильно изменился интерфейс.
Для большинства приложений потребуется учитывать небольшие различия между снимками, которые могут возникнуть из-за таких факторов, как временные изменения в содержимом страницы, асинхронная загрузка данных или различия в рендеринге браузера.
Чтобы справиться с этим, можно настроить порог изменения пикселей.
Параметр threshold в библиотеке pixelmatch
позволяет задать процент различий, при котором изменения будут считаться
значимыми. Значение по умолчанию — 0.1, что соответствует 10% различий
между пикселями.
Если нужно игнорировать изменения, которые не оказывают существенного влияния на визуальное восприятие, можно повысить значение порога.
const numDiffPixels = pixelmatch(img1.data, img2.data, diff.data, width, height, { threshold: 0.2 });Кроме того, стоит учитывать время рендеринга страницы. Чтобы избежать ложных срабатываний тестов из-за временных изменений, можно добавлять небольшую задержку перед снятием снимков или использовать дополнительные техники синхронизации.
Автоматическое тестирование с использованием снимков страниц и их сравнение является важным элементом в процессе интеграции и доставки (CI/CD). Такие тесты позволяют убедиться, что обновления в коде не нарушают визуальную целостность приложения.
Для интеграции с CI/CD можно настроить скрипты, которые будут автоматически выполнять тесты с использованием Puppeteer и сравнивать снимки перед каждым деплоем. Если различия в снимках превышают допустимый порог, можно настроить систему так, чтобы она отклоняла изменения, требующие ручной проверки.
Визуальное тестирование с помощью снимков страниц помогает автоматически отслеживать изменения в интерфейсе и гарантировать, что приложение не теряет своей визуальной стабильности при каждом обновлении.