Тестирование создания скриншота предварительного просмотра

Тестирование снимков экрана — эффективный способ проверить, как ваш пользовательский интерфейс выглядит для пользователей. Инструмент Compose Preview Screenshot Testing сочетает в себе простоту и возможности составных предварительных просмотров с повышением производительности при выполнении скриншотов на стороне хоста. Тестирование скриншотов составления предварительного просмотра разработано таким образом, чтобы его было так же легко использовать, как и составные предварительные просмотры.

Скриншот-тест — это автоматизированный тест, который делает снимок экрана части пользовательского интерфейса, а затем сравнивает его с ранее утвержденным эталонным изображением. Если изображения не совпадают, тест завершается неудачей и создается отчет в формате HTML, который поможет вам сравнить и найти различия.

С помощью инструмента Compose Preview Screenshot Testing вы можете:

  • Определите количество существующих или новых составных превью, которые вы хотите использовать для тестов скриншотов.
  • Создавайте эталонные изображения из этих компонуемых превью.
  • Создайте отчет HTML, в котором будут указаны изменения в этих предварительных просмотрах после внесения изменений в код.
  • Используйте параметры @Preview , такие как uiMode или fontScale , а также множественные предварительные просмотры, чтобы масштабировать тесты.
  • Модульизируйте свои тесты с помощью нового исходного набора screenshotTest .
Рисунок 1. Пример HTML-отчета.

Требования

Чтобы использовать тестирование скриншотов предварительного просмотра, вам необходимо следующее:

  • Android Gradle 8.5.0-beta01 или выше.
  • Котлин 1.9.20 или выше.

Настраивать

Чтобы включить инструмент, выполните следующие действия:

  1. Добавьте в свой проект плагин com.android.compose.screenshot версии 0.0.1-alpha01 .
    1. Добавьте плагин в файл каталогов версий: 
      [versions]
agp = "8.5.0-beta01"
kotlin = "1.9.20"
...
screenshot = "0.0.1-alpha01"

[plugins]
...
screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}
    2. В файле build.gradle.kts на уровне модуля добавьте плагин в блок plugins {} : 
      plugins {
    ...
    alias(libs.plugins.screenshot)
}
  2. Включите экспериментальное свойство в файле gradle.properties вашего проекта. 
    android.experimental.enableScreenshotTest=true
  3. В блоке android {} файла build.gradle.kts на уровне модуля включите экспериментальный флаг, чтобы использовать исходный набор screenshotTest , и убедитесь, что для kotlinCompilerExtensionVersion установлено значение 1.5.4 или выше.
    android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.4"
    }
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
  4. Убедитесь, что вы добавили зависимость ui-tooling .
    1. Добавьте его в свои каталоги версий: 
      [libraries]
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
    2. Добавьте его в файл build.gradle.kts на уровне модуля: 
      dependencies {
  screenshotTestImplementation(libs.androidx.compose.ui.tooling)
}

Назначьте составные превью для использования в тестах скриншотов.

Чтобы обозначить составные предварительные просмотры, которые вы хотите использовать для тестов снимков экрана, поместите их в тестовый класс. Файл тестового класса должен находиться в новом исходном наборе screenshotTest , например app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ( {module}/src/screenshotTest/{kotlin|java}/com/your/package ).

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

package com.google.yourapp

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.google.yourapp.ui.theme.MyApplicationTheme

class ExamplePreviewsScreenshots {

    @Preview(showBackground = true)
    @Composable
    fun GreetingPreview() {
        MyApplicationTheme {
            Greeting("Android!")
        }
    }
}

Создание эталонных изображений

После настройки тестового класса вам необходимо создать эталонные изображения для каждого предварительного просмотра. Эти эталонные изображения используются для идентификации изменений позже, после внесения изменений в код. Чтобы создать эталонные изображения для составных тестов скриншотов предварительного просмотра, запустите следующую задачу Gradle:

  • Linux и macOS: ./gradlew updateDebugScreenshotTest ( ./gradlew {:module:}update{Variant}ScreenshotTest )
  • Windows: gradlew updateDebugScreenshotTest ( gradlew {:module:}update{Variant}ScreenshotTest )

После завершения задачи найдите эталонные изображения в app/src/debug/screenshotTest/reference ( {module}/src/{variant}/screenshotTest/reference ).

Создать отчет о тестировании

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

  • Linux и macOS: ./gradlew validateDebugScreenshotTest ( ./gradlew {:module:}validate{Variant}ScreenshotTest )
  • Windows: gradlew validateDebugScreenshotTest ( gradlew {:module:}validate{Variant}ScreenshotTest )

Задача проверки создает отчет HTML по адресу {module}/build/reports/screenshotTest/preview/{variant}/index.html .

Известные проблемы

Текущий список известных проблем можно найти в компоненте «Отслеживание проблем» инструмента. Сообщайте о любых других отзывах и проблемах через систему отслеживания проблем .

Выпуск обновлений

Примечания к выпуску и изменения для текущих версий

0.0.1-альфа06

В этом выпуске представлены:

Порог разницы изображений: этот новый глобальный пороговый параметр позволит вам лучше контролировать сравнение скриншотов. Для настройки обновите build.gradle.kts вашего модуля:

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

Этот порог будет применяться ко всем тестам снимков экрана, определенным в модуле.

  • Исправления ошибок: некоторые ошибки Compose Renderer и добавлена ​​поддержка пустой композиции.
  • Улучшения производительности: алгоритм сравнения изображений был обновлен, чтобы работать быстрее.