스크린샷 테스트는 UI가 사용자에게 어떻게 표시되는지 확인하는 효과적인 방법입니다. Compose 미리보기 스크린샷 테스트 도구는 컴포저블 미리보기의 단순성 및 기능과 호스트 측 스크린샷 테스트 실행의 생산성 이점을 결합합니다. Compose 미리보기 스크린샷 테스트는 컴포저블 미리보기만큼 사용하기 쉽게 설계되었습니다.
스크린샷 테스트는 UI의 스크린샷을 찍은 다음 이전에 승인된 참조 이미지와 비교하는 자동 테스트입니다. 이미지가 일치하지 않으면 테스트가 실패하고 차이점을 찾고 찾는 데 도움이 되는 HTML 보고서가 생성됩니다.
Compose 미리보기 스크린샷 테스트 도구를 사용하면 다음 작업을 할 수 있습니다.
- 스크린샷 테스트에 사용할 기존 또는 새 컴포저블 미리보기를 여러 개 확인합니다.
- 이러한 컴포저블 미리보기에서 참조 이미지를 생성합니다.
- 코드를 변경한 후 미리보기의 변경사항을 식별하는 HTML 보고서를 생성합니다.
@Preview
매개변수(예:uiMode
또는fontScale
)와 다중 미리보기를 사용하여 테스트를 확장할 수 있습니다.- 새로운
screenshotTest
소스 세트로 테스트를 모듈화합니다.
요구사항
Compose 미리보기 스크린샷 테스트를 사용하려면 다음이 필요합니다.
- Android Gradle 8.5.0-beta01 이상
- Kotlin 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
- 모듈 수준
build.gradle.kts
파일의android {}
블록에서 실험용 플래그를 사용 설정하여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
)
확인 작업을 수행하면 {module}/build/reports/screenshotTest/preview/{variant}/index.html
에 HTML 보고서가 생성됩니다.
알려진 문제
screenshotTest
소스 세트의 미리보기가 정규화된 메서드 이름을main
의 미리보기와 공유하면 기본에 있는 메서드가 스크린샷 테스트 대신 테스트에 잘못 사용됩니다.