نوشتن آزمایش پیش‌نمایش عکس صفحه

تست اسکرین شات روشی موثر برای بررسی ظاهر رابط کاربری شما برای کاربران است. ابزار Compose Preview Screenshot Testing سادگی و ویژگی‌های پیش‌نمایش‌های قابل ترکیب را با دستاوردهای بهره‌وری اجرای آزمایش‌های اسکرین‌شات سمت میزبان ترکیب می‌کند. تست اسکرین شات پیش نمایش نوشتن به گونه ای طراحی شده است که استفاده از آن به آسانی پیش نمایش های قابل ترکیب باشد.

تست اسکرین شات یک تست خودکار است که یک اسکرین شات از یک UI می گیرد و سپس آن را با یک تصویر مرجع قبلا تایید شده مقایسه می کند. اگر تصاویر مطابقت نداشتند، آزمایش با شکست مواجه می‌شود و یک گزارش HTML تولید می‌کند تا به شما در مقایسه و یافتن تفاوت‌ها کمک کند.

با ابزار Compose Preview Screenshot Testing، می توانید:

  • از @PreviewTest برای ایجاد تست های اسکرین شات برای پیش نمایش های قابل ترکیب موجود یا جدید استفاده کنید.
  • تصاویر مرجع را از آن پیش نمایش های قابل ترکیب ایجاد کنید.
  • یک گزارش HTML ایجاد کنید که تغییرات در آن پیش نمایش ها را پس از ایجاد تغییرات کد مشخص می کند.
  • از پارامترهای @Preview ، مانند uiMode یا fontScale و پیش‌نمایش‌های چندگانه برای کمک به مقیاس‌بندی تست‌های خود استفاده کنید.
  • تست های خود را با مجموعه منبع جدید screenshotTest مدولار کنید.
شکل 1. نمونه گزارش HTML.

الزامات

برای استفاده از Compose Preview Screenshot Testing، به موارد زیر نیاز دارید:

  • پلاگین Android Gradle 8.5.0-beta01 یا بالاتر.
  • Kotlin 1.9.20 یا بالاتر. توصیه می کنیم از Kotlin 2.0 یا بالاتر استفاده کنید تا بتوانید از افزونه Compose Compiler Gradle استفاده کنید.
  • نوشتن برای پروژه شما فعال است. توصیه می کنیم Compose را با استفاده از افزونه Compose Compiler Gradle فعال کنید.

راه اندازی

برای فعال کردن ابزار، مراحل زیر را دنبال کنید:

  1. افزونه com.android.compose.screenshot نسخه 0.0.1-alpha10 را به پروژه خود اضافه کنید.
    1. افزونه را به فایل کاتالوگ نسخه خود اضافه کنید:
      [versions]
      agp = "8.11.0-alpha06"
      kotlin = "2.1.20"
      screenshot = "0.0.1-alpha10"
      
      [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 فعال کنید.
    android {
        experimentalProperties["android.experimental.enableScreenshotTest"] = true
    }
    
  4. وابستگی های screenshot-validation-api و ui-tooling را اضافه کنید.
    1. آنها را به کاتالوگ نسخه خود اضافه کنید:
      [libraries]
      screenshot-validation-api = { group = "com.android.tools.screenshot", name = "screenshot-validation-api", version.ref = "screenshot"}
      androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
    2. آنها را به فایل build.gradle.kts در سطح ماژول خود اضافه کنید:
      dependencies {
        screenshotTestImplementation(libs.screenshot.validation.api)
        screenshotTestImplementation(libs.androidx.ui.tooling)
      }

پیش‌نمایش‌های قابل ترکیب را برای استفاده برای آزمایش‌های اسکرین‌شات تعیین کنید

برای تعیین پیش نمایش های قابل ترکیبی که می خواهید برای آزمایش های اسکرین شات استفاده کنید، پیش نمایش ها را با حاشیه نویسی @PreviewTest علامت گذاری کنید. پیش‌نمایش‌ها باید در مجموعه منبع screenshotTest جدید قرار داشته باشند، برای مثال app/src/screenshotTest/kotlin/com/example/yourapp/ExamplePreviewScreenshotTest.kt .

می‌توانید ترکیب‌پذیرها و/یا پیش‌نمایش‌های بیشتری، از جمله پیش‌نمایش‌های چندگانه، در این فایل یا سایر فایل‌های ایجاد شده در همان مجموعه منبع اضافه کنید.

package com.example.yourapp

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.android.tools.screenshot.PreviewTest
import com.example.yourapp.ui.theme.MyApplicationTheme

@PreviewTest
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    MyApplicationTheme {
        Greeting("Android!")
    }
}

تصاویر مرجع تولید کنید

پس از راه‌اندازی یک کلاس آزمایشی، باید تصاویر مرجع برای هر پیش‌نمایش تولید کنید. این تصاویر مرجع برای شناسایی تغییرات بعداً، پس از ایجاد تغییرات کد استفاده می‌شوند. برای تولید تصاویر مرجع برای آزمایش‌های اسکرین‌شات پیش‌نمایش، کار Gradle زیر را اجرا کنید:

  • لینوکس و macOS: ./gradlew updateDebugScreenshotTest ( ./gradlew :{module}:update{Variant}ScreenshotTest )
  • ویندوز: gradlew updateDebugScreenshotTest ( gradlew :{module}:update{Variant}ScreenshotTest )

پس از تکمیل کار، تصاویر مرجع را در app/src/screenshotTestDebug/reference ( {module}/src/screenshotTest{Variant}/reference ) پیدا کنید.

یک گزارش تست ایجاد کنید

هنگامی که تصاویر مرجع وجود دارند، وظیفه اعتبارسنجی را اجرا کنید تا یک اسکرین شات جدید بگیرید و آن را با تصویر مرجع مقایسه کنید:

  • لینوکس و macOS: ./gradlew validateDebugScreenshotTest ( ./gradlew :{module}:validate{Variant}ScreenshotTest )
  • ویندوز: gradlew validateDebugScreenshotTest ( gradlew :{module}:validate{Variant}ScreenshotTest )

کار تأیید یک گزارش HTML در {module}/build/reports/screenshotTest/preview/{variant}/index.html ایجاد می‌کند.

مسائل شناخته شده

می‌توانید فهرست فعلی مشکلات شناخته شده را در مؤلفه ردیاب مشکل ابزار پیدا کنید. هرگونه بازخورد و مشکل دیگر را از طریق ردیاب مشکل گزارش دهید.

به روز رسانی ها را منتشر کنید

یادداشت های انتشار و تغییرات برای نسخه های در حال اجرا.

0.0.1-آلفا10

این نسخه معرفی می کند:

  • از این نسخه، باید تمام عملکردهای پیش نمایش خود را با حاشیه نویسی @PreviewTest علامت گذاری کنید. پیش‌نمایش‌های بدون حاشیه‌نویسی اجرا نمی‌شوند.

  • فهرست راهنمای تصویر مرجع از {module}/src/{variant}/screenshotTest/reference به {module}/src/screenshotTest{Variant}/reference تغییر کرده است. این برای اطمینان از این است که آن تصاویر مرجع تولید شده بخشی از کد تولید نیستند و با ساختار دایرکتوری سایر انواع آزمایش همسو می شوند.

  • وظیفه {variant}PreviewScreenshotRender حذف شده است. رندر تصویر به موتور تست JUnit منتقل شده است.

  • کار update{Variant}ScreenshotTest تصاویر رندر جدید را قبل از به‌روزرسانی با تصاویر مرجع مقایسه می‌کند. فقط تصاویری را به روز می کند که اختلاف آنها بیشتر از آستانه مشخص شده باشد. پرچم خط فرمان --updateFilter حذف شد.

0.0.1-alpha06

این نسخه معرفی می کند:

آستانه تفاوت تصویر: این تنظیم آستانه جهانی جدید به شما این امکان را می دهد که کنترل دقیق تری بر مقایسه اسکرین شات بدست آورید. برای پیکربندی، build.gradle.kts ماژول خود را به روز کنید:

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

این آستانه برای تمام تست های اسکرین شات تعریف شده در ماژول اعمال خواهد شد.

  • رفع اشکال: برخی از اشکالات Compose Renderer و پشتیبانی اضافه شده برای نوشتن خالی
  • بهبود عملکرد: الگوریتم تفاوت تصویر به‌روزرسانی شد تا سریع‌تر باشد