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

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

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

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

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

Требования

Для использования функции тестирования снимков экрана Compose Preview вам потребуется следующее:

  • Плагин Android Gradle 8.5.0-beta01 или выше.
  • Kotlin 1.9.20 или выше. Мы рекомендуем использовать Kotlin 2.0 или выше, чтобы вы могли использовать плагин Compose Compiler Gradle.

  • Включите Compose для вашего проекта. Мы рекомендуем включить Compose с помощью плагина Gradle Compose Compiler .

Настраивать

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

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

[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 . 
    android {
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
  4. Добавьте зависимости screenshot-validation-api и ui-tooling .
    1. Добавьте их в свои каталоги версий: 
      [libraries]
screenshot-validation-api = { group = "com.android.tools.screenshot", name = "screenshot-validation-api", version.ref = "screenshot"}
androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
    2. Добавьте их в файл build.gradle.kts на уровне модуля: 
      dependencies {
  screenshotTestImplementation(libs.screenshot.validation.api)
  screenshotTestImplementation(libs.androidx.ui.tooling)
}

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

Чтобы обозначить компонуемые превью, которые вы хотите использовать для тестов скриншотов, отметьте превью аннотацией @PreviewTest . Превью должны быть расположены в новом исходном наборе screenshotTest , например app/src/screenshotTest/kotlin/com/example/yourapp/ExamplePreviewScreenshotTest.kt .

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

package com.example.yourapp

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.android.tools.screenshot.PreviewTest
import com.example.yourapp.ui.theme.MyApplicationTheme

@PreviewTest
@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/screenshotTestDebug/reference ( {module}/src/screenshotTest{Variant}/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-альфа10

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

  • С этой версии вам необходимо пометить все ваши функции предварительного просмотра аннотацией @PreviewTest . Предварительные просмотры без аннотации не будут выполнены.

  • Каталог эталонных изображений изменен с {module}/src/{variant}/screenshotTest/reference на {module}/src/screenshotTest{Variant}/reference . Это сделано для того, чтобы сгенерированные эталонные изображения не стали частью производственного кода и соответствовали структуре каталогов других типов тестов.

  • Задача {variant}PreviewScreenshotRender удалена. Рендеринг изображений перенесен в JUnit Test Engine.

  • Задача update{Variant}ScreenshotTest будет сравнивать новые изображения рендеринга с эталонными изображениями перед обновлением. Она будет обновлять только те изображения, различия в которых превышают указанный порог. Флаг командной строки --updateFilter был удален.

0.0.1-альфа06

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

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

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

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

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