Kiểm thử ảnh chụp màn hình là một cách hiệu quả để xác minh giao diện người dùng của bạn hiển thị với người dùng. Công cụ Kiểm thử ảnh chụp màn hình của tính năng xem trước trong Compose kết hợp tính đơn giản và các tính năng của bản xem trước thành phần kết hợp với khả năng tăng năng suất khi chạy kiểm thử ảnh chụp màn hình phía máy chủ. Tính năng Kiểm thử ảnh chụp màn hình của tính năng xem trước trong Compose được thiết kế để dễ sử dụng như bản xem trước thành phần kết hợp.
Kiểm thử ảnh chụp màn hình là một quy trình kiểm thử tự động, chụp ảnh màn hình một phần giao diện người dùng, sau đó so sánh với hình ảnh tham chiếu đã được phê duyệt trước đó. Nếu hình ảnh không khớp, thì kiểm thử sẽ không thành công và tạo báo cáo HTML để giúp bạn so sánh và tìm ra sự khác biệt.
Với công cụ Kiểm thử ảnh chụp màn hình bản xem trước trong Compose, bạn có thể:
- Xác định một số bản xem trước thành phần kết hợp mới hoặc hiện có mà bạn muốn sử dụng cho kiểm thử ảnh chụp màn hình.
- Tạo hình ảnh tham chiếu từ các bản xem trước thành phần kết hợp đó.
- Tạo báo cáo HTML xác định các thay đổi đối với các bản xem trước đó sau khi bạn thay đổi mã.
- Sử dụng các tham số
@Preview
(chẳng hạn nhưuiMode
hoặcfontScale
) và các bản xem trước nhiều bản xem trước để giúp bạn mở rộng quy mô kiểm thử. - Mô-đun hoá chương trình kiểm thử bằng nhóm tài nguyên
screenshotTest
mới.
![](https://developer.android.com/static/studio/images/compose-screenshot-testing.png?authuser=5&hl=vi)
Yêu cầu
Để sử dụng tính năng Kiểm thử ảnh chụp màn hình của tính năng xem trước trong Compose, bạn cần:
- Android Gradle 8.5.0-beta01 trở lên.
- Kotlin 1.9.20 trở lên.
Thiết lập
Để bật công cụ này, hãy làm theo các bước sau:
- Thêm trình bổ trợ
com.android.compose.screenshot
, phiên bản0.0.1-alpha01
vào dự án của bạn. - Thêm trình bổ trợ vào tệp danh mục phiên bản:
[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"}
- Trong tệp
build.gradle.kts
ở cấp mô-đun, hãy thêm trình bổ trợ vào khốiplugins {}
:plugins { ... alias(libs.plugins.screenshot) }
- Bật thuộc tính thử nghiệm trong tệp
gradle.properties
của dự án.android.experimental.enableScreenshotTest=true
- Trong khối
android {}
của tệpbuild.gradle.kts
cấp mô-đun, hãy bật cờ thử nghiệm để sử dụng nhóm tài nguyênscreenshotTest
và đảm bảo rằngkotlinCompilerExtensionVersion
được đặt thành 1.5.4 trở lên.android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true }
- Hãy đảm bảo bạn đã thêm phần phụ thuộc
ui-tooling
.- Thêm vào danh mục phiên bản:
[libraries] androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
- Thêm vào tệp
build.gradle.kts
cấp mô-đun:dependencies { screenshotTestImplementation(libs.androidx.compose.ui.tooling) }
- Thêm vào danh mục phiên bản:
Chỉ định bản xem trước thành phần kết hợp để dùng cho các kiểm thử ảnh chụp màn hình
Để chỉ định bản xem trước thành phần kết hợp mà bạn muốn sử dụng cho các bài kiểm thử ảnh chụp màn hình, hãy đặt bản xem trước trong một lớp kiểm thử. Tệp lớp kiểm thử phải nằm trong nhóm tài nguyên screenshotTest
mới, ví dụ: app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt
({module}/src/screenshotTest/{kotlin|java}/com/your/package
).
Bạn có thể thêm nhiều thành phần kết hợp và/hoặc bản xem trước khác (bao gồm cả nhiều bản xem trước) vào tệp này hoặc các tệp khác được tạo trong cùng một nhóm tài nguyên.
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!")
}
}
}
Tạo hình ảnh tham chiếu
Sau khi thiết lập một lớp kiểm thử, bạn cần tạo hình ảnh tham chiếu cho mỗi bản xem trước. Các hình ảnh tham chiếu này được dùng để xác định các thay đổi sau này, sau khi bạn thay đổi mã. Để tạo hình ảnh tham chiếu cho các bài kiểm thử ảnh chụp màn hình của bản xem trước thành phần kết hợp, hãy chạy tác vụ Gradle sau:
- Linux và macOS:
./gradlew updateDebugScreenshotTest
(./gradlew {:module:}update{Variant}ScreenshotTest
) - Windows:
gradlew updateDebugScreenshotTest
(gradlew {:module:}update{Variant}ScreenshotTest
)
Sau khi tác vụ hoàn tất, hãy tìm ảnh tham chiếu trong
app/src/debug/screenshotTest/reference
({module}/src/{variant}/screenshotTest/reference
).
Tạo báo cáo thử nghiệm
Khi đã có hình ảnh tham chiếu, hãy chạy tác vụ xác thực để chụp ảnh màn hình mới rồi so sánh với hình ảnh tham chiếu:
- Linux và macOS:
./gradlew validateDebugScreenshotTest
(./gradlew {:module:}validate{Variant}ScreenshotTest
) - Windows:
gradlew validateDebugScreenshotTest
(gradlew {:module:}validate{Variant}ScreenshotTest
)
Tác vụ xác minh sẽ tạo một báo cáo HTML tại {module}/build/reports/screenshotTest/preview/{variant}/index.html
.
Vấn đề đã biết
- Nếu một bản xem trước trong nhóm tài nguyên
screenshotTest
chia sẻ tên phương thức đủ điều kiện với một bản xem trước trongmain
, thì phương thức trong nhóm tài nguyên chính sẽ được sử dụng không đúng cách cho hoạt động kiểm thử thay vì kiểm thử ảnh chụp màn hình.