Compose 미리보기 스크린샷 테스트

스크린샷 테스트는 UI가 사용자에게 어떻게 표시되는지 확인하는 효과적인 방법입니다. 이 Compose 미리보기 스크린샷 테스트 도구는 컴포저블 미리보기: 호스트 측 스크린샷 테스트 실행으로 생산성을 높일 수 있습니다 Compose 미리보기 스크린샷 테스트는 컴포저블 미리보기만큼 쉽게 사용하도록 설계되었습니다.

스크린샷 테스트는 UI의 스크린샷을 찍는 자동화된 테스트입니다. 이전에 승인된 참조 이미지와 비교합니다. 만약 이미지가 일치하지 않으면 테스트가 실패하고 문제 해결에 도움이 되는 HTML 보고서가 생성됩니다. 비교할 수 있습니다.

Compose 미리보기 스크린샷 테스트 도구를 사용하면 다음 작업을 할 수 있습니다.

  • 사용하려는 기존 또는 새로운 컴포저블 미리보기의 수를 확인합니다. 사용할 수 있습니다.
  • 이러한 컴포저블 미리보기에서 참조 이미지를 생성합니다.
  • 작업을 완료한 후 미리보기에 대한 변경사항을 식별하는 HTML 보고서를 생성합니다. 코드를 변경할 수 있습니다
  • uiMode 또는 fontScale와 같은 @Preview 매개변수와 다중 미리보기를 사용하여 테스트를 확장하세요.
  • 새로운 screenshotTest 소스 세트로 테스트를 모듈화합니다.
그림 1. HTML 보고서 예

요구사항

Compose 미리보기 스크린샷 테스트를 사용하려면 다음이 필요합니다.

  • Android Gradle 8.5.0-beta01 이상
  • Kotlin 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

알려진 문제

도구의 Issue Tracker 구성요소에서 현재 알려진 문제 목록을 확인할 수 있습니다. 다른 의견 및 문제 신고 Issue Tracker를 통해 문제를 해결합니다.

업데이트 출시

진행 중인 버전의 출시 노트 및 변경사항

0.0.1-alpha06

이 릴리스에서는 다음 기능을 제공합니다.

이미지 차이 임계값: 새로운 전역 임계값 설정을 사용하면 스크린샷 비교를 더 세밀하게 제어할 수 있습니다. 구성하려면 모듈의 build.gradle.kts:

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

이 기준점은 모듈에 정의된 모든 스크린샷 테스트에 적용됩니다.

  • 버그 수정: 일부 Compose 렌더러 버그 수정 및 빈 Compose 지원 추가
  • 성능 개선: 이미지 디핑 알고리즘이 더 빠르게 업데이트되었습니다.