Про Compose Preview Screenshot Testing

Краткий рассказ, как я игрался с Compose Preview Screenshot Testing.

Он нужен для тестирования изменений вёрстки. С помощью него можно:

определять Preview, которые будут тестироваться, в новой папке screenshotTest
генерировать эталонные скриншоты, которые в дальнейшем будут использоваться для сравнения
генерировать HTML отчёт, на котором будет виден diff сравнения двух скриншотов

Основной флоу

Для генерации эталонных скриншотов я запустил таску:

./gradlew updateDebugScreenshotTest

В итоге получил папку с эталонными скриншотами по адресу /app/src/debug/screenshotTest/reference/com/example/testscreenshotcompose/ExamplePreviewScreenshots

Теперь самое интересное - меняем код)) Просто разрабатываете дальше своё приложение, потом запускаете тесты таской:
./gradlew validateDebugScreenshotTest

Я пробовал на простых примерах, где поменял только текст и при этом превью не изменила свой размер. Тест упал, что логично, diff сгенерился, всё наглядно и понятно можно увидеть в отчёте:

Скриншоты не совпали, тест красный, diff сгенерился

Но что, если по размерами картинки будут разными?

В Diff получим такое сообщение:

Size Mismatch. Reference image size: 279X554. Rendered image size: 557X554

Размеры скриншотов разные, получаем Size Mismatch

В целом логично, кажется, что если размеры превьюшек не совпадают, то это уже баг.

Если скриншоты совпадают, тест будет зелёным, Diff будет содержать надпись "Images match!":

Тест зелёный, если скриншоты совпадают, Diff содержит надпись "Images match!"

Обновления

Пока я игрался, они уже выпустили апдейт в 0.0.1-alpha06. В нём добавлена настройка imageDifferenceThreshold для выставления порогового значения, выше которого тест будет падать:

android {
    ...
    testOptions {
        ...
        screenshotTests {
            imageDifferenceThreshold = 0.0001f // 0.01%
        }
    }
}

К примеру, если процент изменений ниже этого значения, то тест не упадёт, но diff будет показан всё равно:

Тест зелёный при значении ниже порогового, diff показывается

Что на мой взгляд можно улучшить:

добавить сравнение через "наложение", как это реализовано, к примеру в Allure Screen Diff плагине:

Allure Screen Diff Plugin - show overlay view

нужна таска на перегенерацию эталонных скриншотов, так как чтоб создать их заново, нужно удалять папку с эталонными скриншотами

Про Compose Preview Screenshot Testing

Основной флоу

Обновления

Что на мой взгляд можно улучшить:

Report Page