בדיקה של צילום מסך היא דרך יעילה לאמת איך ממשק המשתמש נראה למשתמשים. הכלי לבדיקת צילום המסך של תצוגה מקדימה משלב את הפשטות ואת התכונות של תצוגות מקדימות קומפוזביליות עם טובה יותר בהרצת בדיקות צילום מסך בצד המארח. תצוגה מקדימה של הרכב התכונה 'בדיקת צילום מסך' תוכננה להיות קלה לשימוש כמו תצוגות מקדימות קומפוזביליות.
בדיקת צילום מסך היא בדיקה אוטומטית שמבצעת צילום מסך של קטע של ממשק משתמש ולאחר מכן משווה אותה לתמונת עזר שאושרה בעבר. אם התמונות לא תואמות, הבדיקה נכשלת ומפיקה דוח HTML כדי לעזור לך להשוות ולמצוא את ההבדלים.
באמצעות הכלי לבדיקת צילומי מסך של תצוגה מקדימה לכתיבה, אתם יכולים:
- לזהות כמה תצוגות מקדימות קומפוזביליות קיימות או חדשות שאתם רוצים להשתמש בהן צילומי מסך.
- אפשר ליצור תמונות עזר מהתצוגות המקדימות הקומפוזביליות האלה.
- להפיק דוח HTML שמזהה את השינויים בתצוגות המקדימות האלה לאחר לערוך שינויים בקוד.
- להשתמש בפרמטרים של
@Preview
, כמוuiMode
אוfontScale
, ובתצוגות מקדימות מרובות כדי לעזור לכם להתאים את הבדיקות. - משנים את הבדיקות באמצעות קבוצת המקור החדשה מסוג
screenshotTest
.
![](https://developer.android.com/static/studio/images/compose-screenshot-testing.png?authuser=0000&hl=he)
הדרישות
כדי להשתמש בבדיקת צילום המסך של התצוגה המקדימה של הכתיבה, צריך את הדברים הבאים:
- 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
בעיות מוכרות
אפשר למצוא רשימה עדכנית של בעיות ידועות בכלי רכיב למעקב אחר בעיות. אפשר לדווח על משוב או בעיה אחרים דרך אתר המעקב אחר בעיות.