Эта страница переведена с помощью Cloud Translation API.

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

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

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

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

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

Требования

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

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

Настраивать

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

Добавьте в свой проект плагин com.android.compose.screenshot версии 0.0.1-alpha01 .

Добавьте плагин в файл каталогов версий:

[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"}

В файле build.gradle.kts на уровне модуля добавьте плагин в блок plugins {} :
```
plugins {
    ...
    alias(libs.plugins.screenshot)
}
```

Включите экспериментальное свойство в файле gradle.properties вашего проекта.
```
android.experimental.enableScreenshotTest=true
```
В блоке android {} файла build.gradle.kts на уровне модуля включите экспериментальный флаг для использования исходного набора screenshotTest и убедитесь, что для kotlinCompilerExtensionVersion установлено значение 1.5.4 или выше.
Примечание. Если вы используете Kotlin 2.0 или более позднюю версию, вам не нужно отдельно устанавливать версию Compose Compiler. Узнайте больше о плагине Compose Compiler Gradle .
```
android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.4"
    }
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
```
Убедитесь, что вы добавили зависимость 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 и добавлена поддержка пустой композиции.
Улучшения производительности: алгоритм сравнения изображений был обновлен, чтобы работать быстрее.