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

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

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

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

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

المتطلبات

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

  • الإصدار 8.5.0-beta01 من Android Gradle أو إصدار أحدث
  • ‫Kotlin 1.9.20 أو إصدار أحدث

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

لتفعيل الأداة، اتّبِع الخطوات التالية:

  1. أضِف المكوّن الإضافي com.android.compose.screenshot، الإصدار 0.0.1-alpha07 إلى مشروعك.
    1. أضِف المكوّن الإضافي إلى ملف كتالوجات الإصدارات:
      [versions]
      agp = "8.5.0-beta01"
      kotlin = "1.9.20"
      ...
      screenshot = "0.0.1-alpha07"
      
      [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%
        }
    }
}

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

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