Ответ
Скриншотные тесты (Snapshot Testing) — это метод тестирования, при котором сравнивается текущий вывод компонента/страницы с сохранённым эталонным скриншотом. Если есть различия — тест падает.
Как работает:
- При первом запуске тест сохраняет эталонный скриншот
- При последующих запусках делает новый скриншот и сравнивает с эталоном
- Если есть различия — либо баг, либо нужно обновить эталон (при intentional changes)
Пример с Jest + React Testing Library:
it('renders button correctly', () => {
const {container} = render(<Button>Click me</Button>);
expect(container).toMatchSnapshot();
});Плюсы:
- Быстрое выявление визуальных регрессий
- Простота написания тестов
- Хорошо ловит неожиданные изменения
Минусы:
- Ложные срабатывания (шрифты, анимации, даты)
- Требуют ручного подтверждения изменений
- Плохо работают с динамическим контентом
Ответ 18+ 🔞
А, скриншотные тесты, ёпта! Это когда ты, как последний параноик, фоткаешь каждую соплю в интерфейсе и потом, если хоть пиксель сдвинулся — сразу кричишь «ПИЗДЕЦ, ВСЁ СЛОМАЛОСЬ!».
Как эта штука работает, если по-человечьи:
- Первый раз ты говоришь: «Так, сука, вот эта кнопка — идеал, запоминаем!» И софтина тупо сохраняет картинку.
- Потом, через месяц, ты снова её запускаешь, а она: «Стой, блядь! А почему у этой кнопки тень на 0.5 пикселя жирнее? Это баг или ты просто дизайнер-извращенец?»
- И вот тут начинается: либо ты нашёл реальную проблему, либо тебе нужно вручную сказать «да похуй, я так и задумал, обнови эталон, дурак».
Вот тебе кусок кода, чтоб понятнее было (не трогаю его, как договаривались):
it('renders button correctly', () => {
const {container} = render(<Button>Click me</Button>);
expect(container).toMatchSnapshot();
});Чем это, блядь, хорошо:
- Скорость, как у пули. Написал одну строку — и ты уже ловец визуальных глюков. Не надо расписывать, что
paddingдолжен быть 16px, а не 15. - Проще некуда. Даже мартышка, если её научить жать Enter, сможет такие тесты писать.
- Ловит всякую неожиданную хуйню, которую в логике и не предусмотришь. Вдруг весь текст курсивом встал из-за какого-нибудь глобального стиля? А ты уже в курсе.
А чем это, сука, плохо:
- Ложные срабатывания — это просто пиздец, волнение ебать! Шрифты в Linux и Windows рендерятся по-разному, анимация моргнула не в тот момент, сегодняшняя дата на таймере — и всё, тест красный. А ты уже полчаса ищешь, что сломал.
- Каждое изменение, даже осознанное, надо руками подтверждать. «Да, Колян, я специально эту иконку на 2 пикселя вправо сдвинул, это фича, а не баг!» Надоедает, терпения ноль ебать.
- С динамической хуйней (типа «Доброе утро, Вася!» или бегущих курсов валют) вообще беда. Приходится извращаться, подменять данные, чтобы они не плавали. А иначе эталонный скриншот устаревает быстрее, чем молоко в твоём холодильнике.
Короче, инструмент мощный, но тупой как пробка. Как молоток: гвозди забивать — охуенно, а вот для тонкой хирургии — полная жопа. Используй с умом, а то будешь как дурак, вручную десять скриншотов апрувить каждый день.