בדיקת צילומי מסך היא דרך יעילה לאמת איך ממשק המשתמש נראה למשתמשים. הכלי לבדיקת צילום המסך של תצוגה מקדימה משלב את הפשטות ואת התכונות של תצוגות מקדימות קומפוזביליות עם טובה יותר בהרצת בדיקות צילום מסך בצד המארח. תצוגה מקדימה של הרכב התכונה 'בדיקת צילום מסך' תוכננה להיות קלה לשימוש כמו תצוגות מקדימות קומפוזביליות.
בדיקת צילום מסך היא בדיקה אוטומטית שמבצעת צילום מסך של קטע של ממשק משתמש ולאחר מכן משווה אותה לתמונת עזר שאושרה בעבר. אם התמונות לא תואמות, הבדיקה נכשלת וייוצר דוח HTML שיעזור לכם להשוות ולמצוא את ההבדלים.
באמצעות הכלי לבדיקת צילומי מסך של תצוגה מקדימה לכתיבה, אתם יכולים:
- לזהות כמה תצוגות מקדימות קומפוזביליות קיימות או חדשות שאתם רוצים להשתמש בהן צילומי מסך.
- אפשר ליצור תמונות עזר מהתצוגות המקדימות הקומפוזביליות האלה.
- להפיק דוח HTML שמזהה את השינויים בתצוגות המקדימות האלה לאחר לערוך שינויים בקוד.
- השתמשו בפרמטרים
@Preview
, כמוuiMode
אוfontScale
, ובתצוגות מקדימות מרובות כדי לעזור לכם להרחיב את הבדיקות. - משנים את הבדיקות באמצעות קבוצת המקור החדשה מסוג
screenshotTest
.
הדרישות
כדי להשתמש בבדיקת צילומי מסך של תצוגה מקדימה של קובץ קובץ, צריך את הדברים הבאים:
- 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
- בבלוק
android {}
בקובץbuild.gradle.kts
ברמת המודול, מפעילים את הדגל הניסיוני כדי להשתמש בקבוצת המקור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
)
משימת האימות יוצרת דוח HTML ב
{module}/build/reports/screenshotTest/preview/{variant}/index.html
בעיות מוכרות
אפשר למצוא רשימה עדכנית של בעיות ידועות בכלי רכיב למעקב אחר בעיות. אפשר לדווח על משוב או בעיה אחרים דרך אתר המעקב אחר בעיות.
עדכוני גרסה
נתוני גרסה ושינויים בגרסאות השוטפות
0.0.1-alpha06
הגרסה הזו מציגה:
סף ההבדל בתמונה: הגדרת הסף החדשה הזו תאפשר לך שליטה מדויקת יותר בהשוואות בין צילומי מסך. כדי להגדיר, צריך לעדכן את build.gradle.kts:
android {
...
testOptions {
...
screenshotTests {
imageDifferenceThreshold = 0.0001f // 0.01%
}
}
}
הסף הזה יחול על כל הבדיקות של צילומי מסך שהוגדרו במודול.
- תיקוני באגים: חלק מבאגים בכלי הרינדור של כלי הכתיבה לתמיכה נוספת בכתיבה ריקה
- שיפורי ביצועים: האלגוריתם של ההבדלים בתמונות עודכן כדי להיות מהיר יותר