اختبار لقطة الشاشة لإنشاء معاينة

يعد اختبار لقطات الشاشة طريقة فعالة للتحقق من كيفية ظهور واجهة المستخدم للمستخدمين. تشير رسالة الأشكال البيانية تجمع أداة اختبار لقطة الشاشة في Compose لمعاينة البساطة وميزاتها المعاينات القابلة للإنشاء باستخدام إجراء اختبارات لقطات الشاشة من جهة المضيف. إنشاء معاينة تم تصميم ميزة "اختبار لقطات الشاشة" لتكون سهلة الاستخدام مثل المعاينات القابلة للإنشاء.

اختبار لقطة الشاشة هو اختبار آلي يأخذ لقطة شاشة من واجهة مستخدم. ثم يقارنها بصورة مرجعية تمت الموافقة عليها سابقًا. إذا كانت الصور لا تتطابق، فسيفشل الاختبار وينتج تقرير HTML لمساعدتك والمقارنة وإيجاد الاختلافات.

باستخدام أداة اختبار لقطة الشاشة للمعاينة، يمكنك إجراء ما يلي:

• تحديد عدد المعاينات الحالية أو الجديدة القابلة للإنشاء والتي تريد استخدامها اختبارات لقطات الشاشة.
• أنشئ صورًا مرجعية من تلك المعاينات القابلة للإنشاء.
• إنشاء تقرير HTML يحدد التغييرات التي تطرأ على هذه المعاينات بعد وإجراء تغييرات على التعليمات البرمجية.
• استخدام مَعلمات @Preview، مثل uiMode أو fontScale والمعاينات المتعدّدة لمساعدتك على توسيع نطاق اختباراتك.
• نظِّم اختباراتك باستخدام مجموعة مصادر screenshotTest الجديدة.

المتطلبات

لاستخدام ميزة "اختبار لقطة الشاشة للمعاينة"، ستحتاج إلى ما يلي:

• الإصدار 8.5.0-beta01 من نظام التشغيل Android Gradle أو الإصدارات الأحدث
• Kotlin 1.9.20 أو إصدار أحدث.

ضبط إعدادات الجهاز

لتمكين الأداة، اتبع الخطوات التالية:

1. إضافة إصدار المكوّن الإضافي com.android.compose.screenshot 0.0.1-alpha01 لمشروعك.
1. أضِف المكوّن الإضافي إلى ملف كتالوجات الإصدارات:

   [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"}
   

2. في ملف build.gradle.kts على مستوى الوحدة، أضف المكون الإضافي في مجموعة رموز plugins {}:

   plugins {
       ...
       alias(libs.plugins.screenshot)
   }
   

2. تفعيل الموقع التجريبي في صفحة مشروعك ملف gradle.properties.

   android.experimental.enableScreenshotTest=true
   

3. في الجزء android {} من مستوى الوحدة build.gradle.kts، فعّل العلامة التجريبية لاستخدام تم تعيين مصدر screenshotTest والتأكد من تمّ ضبط kotlinCompilerExtensionVersion على 1.5.4 أو أعلى.

   android {
       ...
       composeOptions {
           kotlinCompilerExtensionVersion = "1.5.4"
       }
       experimentalProperties["android.experimental.enableScreenshotTest"] = true
   }
   

4. تأكد من أنك قد أضفت ui-tooling والتبعية.
   1. إضافته إلى كتالوجات الإصدارات:

      [libraries]
      androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
      

   2. أضِفه إلى ملف 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

المشاكل المعروفة

يمكنك العثور على القائمة الحالية بالمشاكل المعروفة في صفحة مكوِّن أداة تتبُّع المشاكل. الإبلاغ عن أي ملاحظات أو مشاكل أخرى من خلال أداة تتبّع المشاكل