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

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

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

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

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

Требования

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

• 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 .

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

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