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

يُعدّ اختبار لقطات الشاشة طريقة فعّالة للتحقّق من مظهر واجهة المستخدم للمستخدمين. تشير رسالة الأشكال البيانية تجمع أداة اختبار لقطة الشاشة في 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

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

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

التحديثات

ملاحظات الإصدار والتغييرات في الإصدارات الحالية

0.0.1-alpha06

يقدم هذا الإصدار ما يلي:

حد اختلافات الصور: سيسمح لك إعداد الحدّ العام الجديد هذا التحكم بشكل أدق في مقارنات لقطات الشاشة. لإجراء الإعداد، حدِّث Build.gradle.kts:

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

سيتم تطبيق هذا الحدّ على جميع اختبارات لقطات الشاشة المحدّدة في الوحدة.

• إصلاح الأخطاء: تم إصلاح بعض أخطاء أداة عرض الإنشاء، كما تم إتاحة إنشاء رسالة فارغة.
• تحسينات الأداء: تم تعديل خوارزمية تمييز الصور لتكون أسرع.