Compose প্রিভিউ স্ক্রিনশট টেস্টিং

সতর্কতা: এই পৃষ্ঠায় বর্ণিত স্ট্যান্ডঅ্যালোন com.android.compose.screenshot প্লাগ-ইন আর রক্ষণাবেক্ষণ করা হয় না। আমরা Android Gradle প্লাগ-ইন (AGP) 9.5 বা তার পরবর্তী ভার্সন ব্যবহার করে AGP টেস্ট স্যুট-এর মাধ্যমে স্ক্রিনশট টেস্ট সেট-আপ করার সাজেশন দিই। পাল্টাতে, আগে থেকে থাকা প্রোজেক্ট মাইগ্রেট করুন দেখুন।

ব্যবহারকারীরা আপনার UI কেমন দেখছেন তা যাচাই করার একটি কার্যকর উপায় হল স্ক্রিনশট টেস্টিং। Compose প্রিভিউ স্ক্রিনশট টেস্টিং টুল কম্পোজেবল প্রিভিউ-এর সরলতা ও ফিচারকে হোস্ট-সাইড স্ক্রিনশট টেস্ট চালানোর মাধ্যমে উৎপাদনশীলতা বৃদ্ধির সাথে একত্রিত করে। Compose Preview Screenshot Testing এমনভাবে ডিজাইন করা হয়েছে যাতে কম্পোজেবল প্রিভিউয়ের মতোই সহজে ব্যবহার করা যায়।

Android স্কিল

GitHub-এ দেখুন

স্ক্রিনশট টেস্ট তৈরি করুন

টেস্টিং স্ট্র্যাটেজি ডেভেলপ করতে এবং স্ক্রিনশট টেস্ট তৈরি করতে testing-setup Android স্কিল ব্যবহার করুন।

Android CLI থেকে স্কিল ইনস্টল করতে, এটি রান করুন:

android skills add testing-setup

স্ক্রিনশট টেস্ট হল একটি অটোমেটেড টেস্ট যা UI-এর কোনও অংশের স্ক্রিনশট নেয় এবং তারপর আগে থেকে অনুমোদিত রেফারেন্স ইমেজের সাথে সেটির তুলনা করে। ছবি না মিললে, টেস্ট ব্যর্থ হয় এবং একটি HTML রিপোর্ট তৈরি করে যা আপনাকে তুলনা করতে এবং পার্থক্য খুঁজে পেতে সাহায্য করে।

Compose প্রিভিউ স্ক্রিনশট টেস্টিং টুলের সাহায্যে আপনি এগুলি করতে পারবেন:

• আগে থেকে থাকা বা নতুন কম্পোজেবল প্রিভিউয়ের জন্য স্ক্রিনশট টেস্ট তৈরি করতে @PreviewTest ব্যবহার করুন।
• সেইসব কম্পোজেবল প্রিভিউ থেকে রেফারেন্স ইমেজ জেনারেট করুন।
• কোডে পরিবর্তন করার পরে, সেইসব প্রিভিউতে হওয়া পরিবর্তন শনাক্ত করে এমন একটি HTML রিপোর্ট তৈরি করুন।
• আপনার টেস্ট স্কেল করতে সাহায্য করার জন্য @Preview প্যারামিটার, যেমন uiMode বা fontScale এবং মাল্টি-প্রিভিউ ব্যবহার করুন।
• নতুন screenshotTest সোর্স সেটের মাধ্যমে আপনার টেস্ট মডিউলারাইজ করুন।

ছবি ১. HTML রিপোর্টের উদাহরণ।

IDE ইন্টিগ্রেশন

আপনি ম্যানুয়ালি অন্তর্নিহিত Gradle টাস্ক (updateScreenshotTest এবং validateScreenshotTest) চালিয়ে Compose প্রিভিউ স্ক্রিনশট টেস্টিং টুল ব্যবহার করতে পারলেও, Android Studio Otter 3 ফিচার ড্রপ Canary 4-এ সম্পূর্ণ IDE ইন্টিগ্রেশন চালু করা হয়েছে। এটি আপনাকে রেফারেন্স ইমেজ তৈরি করতে, টেস্ট চালাতে এবং IDE-এর মধ্যে সম্পূর্ণরূপে যাচাইকরণ ব্যর্থতা বিশ্লেষণ করতে দেয়। এখানে কিছু গুরুত্বপূর্ণ ফিচার উল্লেখ করা হল:

• এডিটরে গাটার আইকন। আপনি এখন সরাসরি সোর্স কোড থেকে টেস্ট চালাতে বা রেফারেন্স ইমেজ আপডেট করতে পারবেন। @PreviewTest-এর মাধ্যমে অ্যানোটেট করা কম্পোজেবল ও ক্লাসের পাশে গাটার অংশে সবুজ রঙের রান আইকন দেখা যায়।
  • স্ক্রিনশট টেস্ট রান করুন। কোনও একটি ফাংশন বা সম্পূর্ণ ক্লাসের জন্য নির্দিষ্টভাবে টেস্ট চালান।
  • রেফারেন্স ইমেজ যোগ বা আপডেট করুন। বেছে নেওয়া স্কোপের জন্য নির্দিষ্টভাবে আপডেট ফ্লো ট্রিগার করুন।

• ইন্টার‍্যাক্টিভ রেফারেন্স ম্যানেজমেন্ট। রেফারেন্স ইমেজ আপডেট করা এখন আরও নিরাপদ এবং আরও সূক্ষ্ম।
  • নতুন রেফারেন্স ইমেজ জেনারেশন ডায়ালগ। বাল্ক Gradle টাস্ক রান করার পরিবর্তে, একটি নতুন ডায়ালগ আপনাকে ঠিক কোন প্রিভিউ জেনারেট বা আপডেট করতে হবে তা দেখতে এবং বেছে নিতে দেয়।
  • ভেরিয়েশন প্রিভিউ করুন। ডায়ালগে সব প্রিভিউ ভেরিয়েশন (যেমন লাইট থিম বা ডার্ক থিম অথবা বিভিন্ন ডিভাইস) আলাদাভাবে তালিকাভুক্ত করা থাকে, যাতে আপনি ছবি তৈরি করার আগে নির্দিষ্ট আইটেম বেছে নিতে বা মুছে দিতে পারেন।

• ইন্টিগ্রেটেড টেস্ট ফলাফল ও ডিফারেন্স ভিউয়ার। IDE থেকে না বেরিয়েই ফলাফল দেখুন।
  • ইউনিফায়েড রান প্যানেল। স্ক্রিনশট টেস্টের ফলাফল স্ট্যান্ডার্ড রান টুল উইন্ডোতে দেখা যায়। টেস্টগুলি ক্লাস এবং ফাংশন দ্বারা গ্রুপ করা হয়, পাস বা ফেল স্ট্যাটাস স্পষ্টভাবে চিহ্নিত করা হয়।
  • ভিজ্যুয়াল ডিফারেন্স টুল। কোনও টেস্টে সমস্যা হলে, স্ক্রিনশট ট্যাব আপনাকে রেফারেন্স, আসল এবং পার্থক্য ছবি পাশাপাশি রেখে তুলনা করতে দেয়।
  • বিস্তারিত অ্যাট্রিবিউট। অ্যাট্রিবিউট ট্যাবে ব্যর্থ টেস্টের মেটাডেটা থাকে, যার মধ্যে মিলের শতাংশ, ছবির ডাইমেনশন এবং ব্যবহৃত নির্দিষ্ট প্রিভিউ কনফিগারেশন (যেমন, uiMode বা fontScale) অন্তর্ভুক্ত।

• ফ্লেক্সিবল টেস্ট স্কোপিং। আপনি এখন সরাসরি প্রোজেক্ট ভিউ থেকে বিভিন্ন স্কোপ সহ স্ক্রিনশট টেস্ট চালাতে পারবেন। কোনও মডিউল, ডিরেক্টরি, ফাইল বা ক্লাসের উপর মাউস রেখে ডানদিকের বোতামে ক্লিক করুন যাতে নির্দিষ্টভাবে সেই বেছে নেওয়া আইটেমের জন্য স্ক্রিনশট টেস্ট রান করা যায়।

প্রয়োজনীয়তা

মনে রাখবেন: AGP টেস্ট স্যুটের প্রয়োজনীয়তা ও সেট-আপ সংক্রান্ত নির্দেশাবলীর জন্য, AGP টেস্ট স্যুট দেখুন।

সম্পূর্ণ IDE ইন্টিগ্রেশনের মাধ্যমে কম্পোজ প্রিভিউ স্ক্রিনশট টেস্টিং ব্যবহার করতে, আপনার প্রজেক্টকে নিম্নলিখিত প্রয়োজনীয়তাগুলি পূরণ করতে হবে:

• Android Studio Panda 1 Canary 4 বা তার পরবর্তী যেকোনও ভার্সন।
• Android Gradle প্লাগ-ইন (AGP) ভার্সন ৯.০ বা তার পরবর্তী যেকোনও ভার্সন।
• Compose Preview স্ক্রিনশট টেস্টিং প্লাগ-ইন ভার্সন 0.0.1-alpha16 বা তার পরবর্তী যেকোনও ভার্সন।
• Kotlin ভার্সন 2.2.10 বা তার পরবর্তী যেকোনও ভার্সন।
• JDK ভার্সন ১৭ বা তার পরবর্তী যেকোনও ভার্সন।
• আপনার প্রোজেক্টের জন্য Compose চালু করা হয়েছে। আমরা Compose Compiler Gradle প্লাগ-ইন ব্যবহার করে Compose চালু করার সাজেশন দিই।

আপনি যদি IDE ইন্টিগ্রেশন ছাড়াই শুধু অন্তর্নিহিত Gradle টাস্ক ব্যবহার করতে চান, তাহলে নিম্নলিখিত প্রয়োজনীয়তাগুলি পূরণ করতে হবে:

• Android Gradle প্লাগ-ইন (AGP) ভার্সন 8.5.0 বা তার পরবর্তী যেকোনও ভার্সন।
• Compose Preview স্ক্রিনশট টেস্টিং প্লাগ-ইন ভার্সন 0.0.1-alpha16 বা তার পরের যেকোনও ভার্সন।
• Kotlin ভার্সন 1.9.20 বা তার পরবর্তী যেকোনও ভার্সন। আমরা Kotlin 2.0 বা তার পরবর্তী ভার্সন ব্যবহার করার সাজেশন দিই যাতে আপনি Compose কম্পাইলার Gradle প্লাগ-ইন ব্যবহার করতে পারেন।
• JDK ভার্সন ১৭ বা তার পরবর্তী যেকোনও ভার্সন।
• আপনার প্রোজেক্টের জন্য Compose চালু করা হয়েছে। আমরা Compose Compiler Gradle প্লাগ-ইন ব্যবহার করে Compose চালু করার সাজেশন দিই।

মনে রাখবেন: আপনি Compose Compiler Gradle প্লাগ-ইন ব্যবহার করতে না পারলে, Compose Compiler-এর উপর সরাসরি ডিপেন্ডেন্সি ঘোষণা করে Compose চালু করতে পারবেন। আপনি kotlinCompilerExtensionVersion ভার্সন 1.5.4 বা তার পরবর্তী ভার্সন ব্যবহার করছেন কিনা তা ভাল করে দেখে নিন।

সেট-আপ করুন

ইন্টিগ্রেট করা টুল এবং অন্তর্নিহিত Gradle টাস্ক, দুটিই Compose Preview স্ক্রিনশট টেস্টিং প্লাগ-ইনের উপর নির্ভর করে। প্লাগ-ইন সেট-আপ করতে, এইসব ধাপ অনুসরণ করুন:

1. আপনার প্রোজেক্টের gradle.properties ফাইলে এক্সপেরিমেন্টাল প্রপার্টি চালু করুন।

   android.experimental.enableScreenshotTest=true
   

2. আপনার মডিউল-লেভেল build.gradle.kts ফাইলের android {} ব্লকে, screenshotTest সোর্স সেট ব্যবহার করার জন্য এক্সপেরিমেন্টাল ফ্ল্যাগ চালু করুন।

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

3. আপনার প্রোজেক্টে com.android.compose.screenshot প্লাগ-ইন, ভার্সন 0.0.1-alpha16 যোগ করুন।

   1. আপনার ভার্সন ক্যাটালগ ফাইলে প্লাগ-ইন যোগ করুন:

      [versions]
      agp = "9.0.0-rc03"
      kotlin = "2.2.10"
      screenshot = "0.0.1-alpha16"
      
      [plugins]
      screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}
      

   2. আপনার মডিউল-লেভেল build.gradle.kts ফাইলে, plugins {} ব্লকে প্লাগ-ইন যোগ করুন:

      plugins {
          alias(libs.plugins.screenshot)
      }
      

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!")
    }
}

রেফারেন্স ইমেজ জেনারেট করুন

টেস্ট ক্লাস সেট-আপ করার পরে, আপনাকে প্রতিটি প্রিভিউয়ের জন্য রেফারেন্স ইমেজ জেনারেট করতে হবে। আপনি কোডে পরিবর্তন করার পরে, পরিবর্তনগুলি শনাক্ত করতে এই রেফারেন্স ছবিগুলি ব্যবহার করা হয়। আপনার কম্পোজেবল প্রিভিউ স্ক্রিনশট টেস্টের জন্য রেফারেন্স ইমেজ তৈরি করতে, IDE ইন্টিগ্রেশন বা Gradle টাস্কের জন্য এই বিভাগে দেওয়া নির্দেশাবলী অনুসরণ করুন।

Android CLI

Android CLI ডাউনলোড করুন

Compose প্রিভিউ রেন্ডার করতে Android CLI ব্যবহার করে দেখুন

আপনি Android Studio ব্যবহার না করলে অথবা কমান্ড লাইন থেকে কাজ করতে চাইলে, Android CLI ব্যবহার করে দেখুন।

যেমন, ভিজ্যুয়াল টেস্টিংয়ের জন্য কম্পোজ প্রিভিউ রেন্ডার করতে চাইলে, android studio render-compose-preview কমান্ড ব্যবহার করুন।

android studio render-compose-preview

IDE-তে

@PreviewTest ফাংশনের পাশে থাকা গাটার আইকনে ক্লিক করুন এবং রেফারেন্স ইমেজ যোগ/আপডেট করুন বিকল্প বেছে নিন। ডায়ালগে প্রিভিউ বেছে নিয়ে যোগ করুন বিকল্পে ক্লিক করুন।

Gradle টাস্কের মাধ্যমে

এই Gradle টাস্ক রান করুন:

• Linux ও macOS: ./gradlew updateDebugScreenshotTest (./gradlew :{module}:update{Variant}ScreenshotTest)
• Windows: gradlew updateDebugScreenshotTest (gradlew :{module}:update{Variant}ScreenshotTest)

টাস্ক সম্পূর্ণ হওয়ার পরে, app/src/screenshotTestDebug/reference ({module}/src/screenshotTest{Variant}/reference)-এ রেফারেন্স ইমেজ খুঁজুন।

মনে রাখবেন: রেফারেন্স ইমেজের নাম টেস্ট ফাংশনের সম্পূর্ণ-যোগ্য নাম এবং প্রিভিউ প্যারামিটারের হ্যাশের কনক্যাটেনেশন দিয়ে রাখা হয়, যেমন com.sample.screenshottests.test1_da39a3ee_c2200e98_0.png।

একটি টেস্ট রিপোর্ট তৈরি করুন

রেফারেন্স ইমেজ তৈরি হয়ে গেলে, IDE ইন্টিগ্রেশন বা Gradle টাস্কের জন্য এই বিভাগে দেওয়া নির্দেশাবলী অনুসরণ করে একটি টেস্ট রিপোর্ট তৈরি করুন।

IDE-তে

@PreviewTest ফাংশনের পাশে থাকা গাটার আইকনে ক্লিক করে Run 'ScreenshotTests' বিকল্প বেছে নিন।

কোনও টেস্টে সমস্যা হলে, রান করুন প্যানেলে টেস্টের নামে ক্লিক করুন। ইন্টিগ্রেটেড জুম ও প্যান কন্ট্রোল ব্যবহার করে ছবির পার্থক্য পরীক্ষা করতে স্ক্রিনশট ট্যাব বেছে নিন।

মনে রাখবেন: @PreviewTest-এর সাথে অ্যানোটেট করা কোনও ফাংশনের নাম পরিবর্তন করলে, আগে থেকে থাকা রেফারেন্স ইমেজের সাথে অ্যাসোসিয়েশন ভেঙে যায়। সেক্ষেত্রে, নতুন ফাংশনের নামের জন্য আপনাকে অবশ্যই রেফারেন্স ইমেজ আবার তৈরি করতে হবে।

Gradle টাস্কের মাধ্যমে

নতুন স্ক্রিনশট নিতে এবং রেফারেন্স ইমেজের সাথে তুলনা করতে যাচাইকরণ টাস্ক রান করুন:

• Linux ও macOS: ./gradlew validateDebugScreenshotTest (./gradlew :{module}:validate{Variant}ScreenshotTest)
• Windows: gradlew validateDebugScreenshotTest (gradlew :{module}:validate{Variant}ScreenshotTest)

যাচাইকরণ টাস্কটি {module}/build/reports/screenshotTest/preview/{variant}/index.html-এ একটি HTML রিপোর্ট তৈরি করে।

সমস্যার সমাধান

কম্পোজ প্রিভিউ স্ক্রিনশট টেস্টিং হোস্ট-সাইড টেস্ট রান করে, যা মেমরি-ইনটেনসিভ হতে পারে। আপনার gradle.properties ফাইলে নিম্নলিখিত প্রপার্টি যোগ করে আপনি টেস্ট JVM-এর জন্য সর্বাধিক হিপ সাইজ বাড়াতে পারবেন:

android.compose.screenshot.maxHeapSize=4g

পরিচিত সমস্যা

• Kotlin Multiplatform (KMP): IDE এবং অন্তর্নিহিত প্লাগ-ইন, দুটিই Android প্রোজেক্টের জন্য বিশেষভাবে তৈরি করা হয়েছে। KMP প্রোজেক্টে Android নয় এমন টার্গেটে এগুলি কাজ করে না।

টুলের ইস্যু ট্র্যাকার কম্পোনেন্ট-এ আপনি বর্তমানে পরিচিত সমস্যার সম্পূর্ণ তালিকা দেখতে পাবেন। ইস্যু ট্র্যাকার-এর মাধ্যমে অন্য কোনও মতামত ও সমস্যা সম্পর্কে অভিযোগ জানান।

রিলিজ সম্পর্কিত আপডেট

রিলিজ সংক্রান্ত আপডেটের সম্পূর্ণ তালিকা দেখতে, রিলিজ নোট দেখুন।