Внедрение Snapshot-тестов для мобильного приложения

Snapshot-тестирование — это автоматический контроль того, что UI не изменился незапланированно. Разработчик правит отступ в одном компоненте, забывает про экран настроек, где тот же компонент используется с другими пропсами — и через неделю в продакшене обнаруживается съехавшая вёрстка. Snapshot-тест поймал бы это за секунды. Мы внедряем такие тесты под ключ: настраиваем инструмент, пишем тесты для ключевых компонентов и интегрируем проверку в CI. Это экономит часы ручных проверок и предотвращает регрессии.

Почему snapshot-тесты критичны для мобильного приложения?

Без автоматической верификации UI любое изменение стилей или компонентов может привести к визуальным багам, которые не ловятся модульными тестами. Ручной просмотр экранов перед релизом — медленный и ненадёжный. Snapshot-тесты решают проблему: один запуск — 100% проверка всех экранов.

Суть проста: при первом запуске тест сохраняет эталонное изображение или сериализованное дерево компонентов. При каждом следующем запуске сравнивает с эталоном. Расхождение = падающий тест.

Сравнение инструментов snapshot-тестирования

Paparazzi в 20 раз быстрее, чем screenshot-тесты с эмулятором: 200 мс против 6 секунд на тест. Для библиотеки на 200 компонентов разница 30 минут против 3 минут.

iOS: iOSSnapshotTestCase

На iOS snapshot-тесты строятся на pointfreeco/swift-snapshot-testing (бывший FBSnapshotTestCase). Это наиболее зрелое решение:

import SnapshotTesting class ProfileViewControllerTests: XCTestCase { func testProfileScreen() { let vc = ProfileViewController(user: .mock) assertSnapshot(of: vc, as: .image(on: .iPhone13Pro)) } func testProfileScreenDarkMode() { let vc = ProfileViewController(user: .mock) assertSnapshot(of: vc, as: .image(on: .iPhone13Pro(.landscape), traits: .init(userInterfaceStyle: .dark))) } } 

assertSnapshot при первом запуске создаёт файл __Snapshots__/ProfileViewControllerTests/testProfileScreen.1.png. При следующих — сравнивает пиксель за пикселем. Порог — 0, любое отличие = fail.

Поддерживаемые стратегии снимка: .image (скриншот), .recursiveDescription (текстовое дерево view), .dump (структура). Для компонент-библиотек .image — основная.

Проблема с шрифтами в CI

Рендеринг текста на симуляторе может отличаться от рендеринга на CI-машине из-за разных версий системных шрифтов. Решение — фиксировать симулятор (iPhone 15, iOS 17.4) и использовать одну и ту же версию Xcode. В fastlane через xcversion:

xcversion(version: "~> 15.3") 

Android: Paparazzi

Для Android лучший инструмент — Paparazzi от Square. Он не требует эмулятора: рендерит View через LayoutInflater в JVM-окружении, используя layoutlib (тот же движок, что и Android Studio Preview).

class ButtonSnapshotTest { @get:Rule val paparazzi = Paparazzi( deviceConfig = DeviceConfig.PIXEL_6, theme = "Theme.App" ) @Test fun primaryButton() { paparazzi.snapshot { PrimaryButton( text = "Сохранить", onClick = {} ) } } } 

Запуск: ./gradlew recordPaparazziDebug (запись эталонов) и ./gradlew verifyPaparazziDebug (проверка).

Paparazzi поддерживает Jetpack Compose с paparazzi.snapshot { ComposableFunction() } — та же механика.

Flutter: Golden Tests

В Flutter snapshot-тесты называются Golden Tests и являются частью flutter_test:

testWidgets('CustomCard golden', (tester) async { await tester.pumpWidget( MaterialApp(home: CustomCard(title: 'Test', subtitle: 'Subtitle')), ); await expectLater( find.byType(CustomCard), matchesGoldenFile('goldens/custom_card.png'), ); }); 

Обновление эталонов: flutter test --update-goldens.

Платформо-зависимость golden-файлов — известная проблема. macOS рендерит шрифт иначе, чем Linux (CI). Решение: хранить golden-файлы, сгенерированные на CI (Linux), а локально разработчики используют flutter test --update-goldens только на той же ОС. Либо пакет golden_toolkit с loadAppFonts(), который нивелирует часть различий.

Как snapshot-тесты интегрируются в CI?

Мы настраиваем CI-пайплайн так, чтобы в нём выполнялась только верификация (verify), а запись эталонов происходила локально. Это гарантирует, что изменения UI не проскользнут незамеченными.