Что такое screenshot testing?

Что такое screenshot testing?

Screenshot testing (или visual regression testing) — это подход к тестированию пользовательского интерфейса, при котором автоматически создаются скриншоты экранов или компонентов и сравниваются с заранее сохранёнными эталонными изображениями. Если обнаруживаются различия в пикселях, тест считается проваленным, что сигнализирует о возможном визуальном баге.

Как это работает?

Процесс обычно включает три шага:

• Создание эталонного скриншота (baseline) — первый успешный прогон теста.
• Запуск теста после изменений — делается новый скриншот.
• Сравнение пикселей — если разница превышает порог, тест падает.

Пример на JavaScript с библиотекой Playwright:

const { test, expect } = require('@playwright/test');
test('homepage screenshot', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveScreenshot('homepage.png');
});

Где применяется?

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

Вывод

Screenshot testing стоит применять, когда важна визуальная консистентность интерфейса и есть автоматизированный пайплайн CI/CD. Он дополняет классические функциональные тесты, но требует аккуратного управления эталонами (например, обновления при осознанных изменениях дизайна).