Использование скриншотов в процессе тестирования с Puppeteer является одним из самых удобных способов для визуальной отладки. Скриншоты помогают быстро идентифицировать проблемы с интерфейсами, особенно в случаях, когда логика теста работает правильно, но есть визуальные или стилистические несоответствия.
Puppeteer предоставляет возможность делать скриншоты на каждом этапе теста, что позволяет зафиксировать состояние страницы на конкретный момент времени. Это полезно для анализа ошибок или для того, чтобы представить результат тестирования другим членам команды.
Для того чтобы делать скриншоты, необходимо сначала создать экземпляр браузера и страницу через Puppeteer. Пример базового кода для запуска браузера:
const puppeteer = require(&
(async () => {
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();
})();
В этом примере создается новый экземпляр браузера, открывается страница,
и затем делается скриншот, который сохраняется на диск под именем
example.png.
Puppeteer предоставляет несколько опций для настройки снимков экрана, которые дают гибкость в создании скриншотов:
Основной параметр для указания пути к изображению — path.
Если путь не задан, скриншот сохраняется в памяти и его нельзя будет
сохранить на диск, однако можно использовать его как Base64 строку.
await page.screenshot({ path: 'screenshot.png' });fullPage
По умолчанию Puppeteer снимает только видимую часть страницы. Однако
если требуется сохранить скриншот всей страницы, включая части, которые
находятся за пределами видимой области, нужно использовать параметр
fullPage: true.
await page.screenshot({ path: 'full_page_screenshot.png', fullPage: true });clip
Параметр clip позволяет задать область экрана для
скриншота. Этот параметр принимает объект с координатами области:
{ x, y, width, height }. Это полезно, если нужно
зафиксировать только часть страницы.
await page.screenshot({
path: 'clip_screenshot.png',
clip: { x: 0, y: 0, width: 300, height: 200 }
});type
Puppeteer поддерживает два формата изображений для скриншотов — PNG и
JPEG. По умолчанию используется формат PNG, но можно явно указать формат
через параметр type. Если формат JPEG, можно дополнительно
настроить качество через параметр quality (диапазон от 0 до
100).
await page.screenshot({ path: 'image.jpg', type: 'jpeg', quality: 80 });Для анализа возникающих ошибок в процессе тестирования можно делать снимки экрана при возникновении исключений. Пример скрипта, который делает снимок в случае сбоя:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
try {
await page.goto('https://example.com');
// Проведение теста
await page.click('#nonexistentElement'); // Имитируем ошибку
} catch (error) {
console.error('Ошибка:', error);
// Делаем скриншот в случае ошибки
await page.screenshot({ path: 'error_screenshot.png' });
} finally {
await browser.close();
}
})();В этом примере после возникновения ошибки автоматически делается скриншот, который помогает понять, что происходило на странице в момент сбоя.
При написании тестов с использованием Puppeteer скриншоты могут быть частью тестового отчета. Например, если используется фреймворк Mocha, можно сделать скриншот в случае провала теста. Пример с Mocha и Chai:
const puppeteer = require('puppeteer');
const { expect } = require('chai');
describe('Example Test', () => {
let browser;
let page;
before(async () => {
browser = await puppeteer.launch();
page = await browser.newPage();
});
after(async () => {
await browser.close();
});
it('should load the example page', async () => {
await page.goto('https://example.com');
const title = await page.title();
expect(title).to.equal('Example Domain');
// Скриншот в случае ошибки
if (title !== 'Example Domain') {
await page.screenshot({ path: 'failed_test_screenshot.png' });
}
});
});Здесь, если тест не проходит, делается снимок экрана, который может быть полезен для дальнейшего анализа проблемы.
Скриншоты также могут быть полезными в процессе непрерывной интеграции (CI), например, для того, чтобы просматривать визуальные изменения в UI после выполнения тестов. Снимки можно интегрировать в отчеты, добавлять их в историю изменений интерфейса или использовать для визуальных регрессионных тестов.
В случае с инструментами CI/CD, такими как Jenkins или GitHub Actions, можно настроить автоматическую загрузку скриншотов в соответствующие артефакты или отчеты:
await page.screenshot({ path: 'screenshots/test_step_1.png' });
// После теста скриншот будет автоматически загружен как артефакт в CI/CD процессеДля создания более сложных сценариев, таких как визуальный регрессионный тест, можно использовать несколько скриншотов на разных этапах тестирования и сравнивать их между собой. Такой подход позволяет автоматически выявлять визуальные отличия и ошибки.
Появление подобных библиотек, как puppeteer-regression, позволяет значительно упростить этот процесс:
const puppeteer = require('puppeteer');
const { compareImages } = require('puppeteer-regression');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const screenshot = await page.screenshot();
const comparisonResult = await compareImages(screenshot, 'baseline_screenshot.png');
if (comparisonResult.differences > 0) {
console.log('Есть различия в изображениях');
} else {
console.log('Изображения совпадают');
}
await browser.close();
})();В этом случае сравниваются текущие скриншоты с эталонными изображениями, что позволяет автоматически находить регрессионные ошибки в интерфейсе.
При большом количестве тестов, где делается много скриншотов, важно правильно организовать процесс их хранения и очистки. Скриншоты можно сохранять по определенным именам или структуре каталогов, чтобы избежать переполнения хранилища.
Использование уникальных имен файлов, включающих временные метки или хеши, помогает избежать перезаписи старых скриншотов. Также полезно настроить систему автоматической очистки старых изображений через cron-работы или с использованием встроенных инструментов CI.
Скриншоты являются важным инструментом для отладки тестов с Puppeteer. Они помогают в автоматической фиксации состояния интерфейса, дают возможность анализировать ошибки и дают четкую картину происходящего на странице в случае сбоя. С помощью правильных настроек и интеграции скриншотов можно значительно улучшить процесс тестирования и повысить качество тестируемого продукта.