Тестирование снимков экрана — эффективный способ проверить, как ваш пользовательский интерфейс выглядит для пользователей. Инструмент Compose Preview Screenshot Testing сочетает в себе простоту и возможности составных предварительных просмотров с повышением производительности при выполнении скриншотов на стороне хоста. Тестирование скриншотов составления предварительного просмотра разработано таким образом, чтобы его было так же легко использовать, как и составные предварительные просмотры.
Скриншот-тест — это автоматизированный тест, который делает снимок экрана части пользовательского интерфейса, а затем сравнивает его с ранее утвержденным эталонным изображением. Если изображения не совпадают, тест завершается неудачей и создается отчет в формате HTML, который поможет вам сравнить и найти различия.
С помощью инструмента Compose Preview Screenshot Testing вы можете:
- Определите количество существующих или новых составных превью, которые вы хотите использовать для тестов скриншотов.
- Создавайте эталонные изображения из этих компонуемых превью.
- Создайте отчет HTML, в котором будут указаны изменения в этих предварительных просмотрах после внесения изменений в код.
- Используйте параметры
@Preview
, такие какuiMode
илиfontScale
, а также множественные предварительные просмотры, чтобы масштабировать тесты. - Модульизируйте свои тесты с помощью нового исходного набора
screenshotTest
.
![](https://developer.android.com/static/studio/images/compose-screenshot-testing.png?authuser=19&hl=ru)
Требования
Чтобы использовать тестирование скриншотов предварительного просмотра, вам необходимо следующее:
- 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 или выше.android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Убедитесь, что вы добавили зависимость
ui-tooling
.- Добавьте его в каталоги версий:
[libraries] androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
- Добавьте его в файл
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
.
Известные проблемы
Текущий список известных проблем можно найти в компоненте «Отслеживание проблем» инструмента. Сообщайте о любых других отзывах и проблемах через систему отслеживания проблем .