কম্পোজ প্রিভিউ স্ক্রিনশট টেস্টিং

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

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

Compose Preview Screenshot Testing টুলের সাহায্যে আপনি যা করতে পারেন:

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

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

যদিও আপনি অন্তর্নিহিত গ্রেডল টাস্কগুলো ( updateScreenshotTest এবং validateScreenshotTest ) ম্যানুয়ালি চালিয়ে কম্পোজ প্রিভিউ স্ক্রিনশট টেস্টিং টুলটি ব্যবহার করতে পারেন, অ্যান্ড্রয়েড স্টুডিও অটার ৩ ফিচার ড্রপ ক্যানারি ৪ একটি সম্পূর্ণ আইডিই ইন্টিগ্রেশন নিয়ে এসেছে। এর মাধ্যমে আপনি রেফারেন্স ইমেজ তৈরি করতে, টেস্ট চালাতে এবং ভ্যালিডেশন ব্যর্থতাগুলো সম্পূর্ণভাবে আইডিই-এর মধ্যেই বিশ্লেষণ করতে পারবেন। এর কিছু প্রধান বৈশিষ্ট্য নিচে দেওয়া হলো:

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

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

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

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

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

সম্পূর্ণ IDE ইন্টিগ্রেশনের মাধ্যমে Compose Preview Screenshot Testing ব্যবহার করতে হলে, আপনার প্রজেক্টকে নিম্নলিখিত শর্তগুলো পূরণ করতে হবে:

• অ্যান্ড্রয়েড স্টুডিও পান্ডা ১ ক্যানারি ৪ বা উচ্চতর সংস্করণ।
• অ্যান্ড্রয়েড গ্রেডল প্লাগইন (AGP) সংস্করণ ৯.০ বা উচ্চতর।
• Compose Preview Screenshot Testing প্লাগইন সংস্করণ 0.0.1-alpha14 বা উচ্চতর।
• কোটলিন সংস্করণ ২.২.১০ বা উচ্চতর।
• জেডিকে সংস্করণ ১৭ বা উচ্চতর।
• আপনার প্রোজেক্টের জন্য Compose সক্রিয় করা হয়েছে। আমরা Compose Compiler Gradle প্লাগইন ব্যবহার করে Compose সক্রিয় করার পরামর্শ দিই।

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

• অ্যান্ড্রয়েড গ্রেডল প্লাগইন (AGP) সংস্করণ ৮.৫.০ বা উচ্চতর।
• Compose Preview Screenshot Testing প্লাগইন সংস্করণ 0.0.1-alpha14 বা উচ্চতর।
• কোটলিন সংস্করণ ১.৯.২০ বা তার উচ্চতর সংস্করণ। আমরা কোটলিন ২.০ বা তার উচ্চতর সংস্করণ ব্যবহারের পরামর্শ দিই, যাতে আপনি কম্পোজ কম্পাইলার গ্রেডল প্লাগইনটি ব্যবহার করতে পারেন।
• জেডিকে সংস্করণ ১৭ বা উচ্চতর।
• আপনার প্রোজেক্টের জন্য Compose সক্রিয় করা হয়েছে। আমরা Compose Compiler Gradle প্লাগইন ব্যবহার করে Compose সক্রিয় করার পরামর্শ দিই।

সেটআপ

ইন্টিগ্রেটেড টুল এবং অন্তর্নিহিত গ্রেডল টাস্ক উভয়ই কম্পোজ প্রিভিউ স্ক্রিনশট টেস্টিং প্লাগইনের উপর নির্ভর করে। প্লাগইনটি সেট আপ করতে, এই ধাপগুলো অনুসরণ করুন:

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

   android.experimental.enableScreenshotTest=true
   

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

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

3. আপনার প্রজেক্টে com.android.compose.screenshot প্লাগইনটির 0.0.1-alpha14 সংস্করণটি যোগ করুন।

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

      [versions]
      agp = "9.0.0-rc03"
      kotlin = "2.1.20"
      screenshot = "0.0.1-alpha14"
      
      [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 ইন্টিগ্রেশন অথবা গ্রেডল টাস্কের জন্য এই বিভাগের নির্দেশাবলী অনুসরণ করুন।

IDE-তে

@PreviewTest ফাংশনের পাশে থাকা গাটার আইকনে ক্লিক করুন এবং Add/Update Reference Images নির্বাচন করুন। ডায়ালগ বক্সে প্রিভিউগুলো নির্বাচন করুন এবং Add-এ ক্লিক করুন।

গ্রেডল টাস্কগুলির সাথে

নিম্নলিখিত গ্রেডল টাস্কটি চালান:

• লিনাক্স এবং ম্যাকওএস: ./gradlew updateDebugScreenshotTest ( ./gradlew :{module}:update{Variant}ScreenshotTest )
• উইন্ডোজ: gradlew updateDebugScreenshotTest ( gradlew :{module}:update{Variant}ScreenshotTest )

কাজটি সম্পন্ন হওয়ার পর, app/src/screenshotTestDebug/reference ( {module}/src/screenshotTest{Variant}/reference ) -এ রেফারেন্স ছবিগুলো খুঁজুন।

একটি পরীক্ষার প্রতিবেদন তৈরি করুন

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

IDE-তে

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

যদি কোনো টেস্ট ব্যর্থ হয়, তাহলে রান প্যানেলে টেস্টের নামে ক্লিক করুন। সমন্বিত জুম এবং প্যান কন্ট্রোল ব্যবহার করে ছবির পার্থক্য পরীক্ষা করার জন্য স্ক্রিনশট ট্যাবটি নির্বাচন করুন।

গ্রেডল টাস্কগুলির সাথে

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

• লিনাক্স এবং ম্যাকওএস: ./gradlew validateDebugScreenshotTest ( ./gradlew :{module}:validate{Variant}ScreenshotTest )
• উইন্ডোজ: gradlew validateDebugScreenshotTest ( gradlew :{module}:validate{Variant}ScreenshotTest )

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

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

• কোটলিন মাল্টিপ্ল্যাটফর্ম (কেএমপি): এর আইডিই এবং অন্তর্নিহিত প্লাগইন উভয়ই বিশেষভাবে অ্যান্ড্রয়েড প্রোজেক্টের জন্য তৈরি করা হয়েছে। এগুলো কেএমপি প্রোজেক্টে নন-অ্যান্ড্রয়েড টার্গেট সমর্থন করে না।

আপনি টুলটির ইস্যু ট্র্যাকার অংশে বর্তমান জ্ঞাত সমস্যাগুলির সম্পূর্ণ তালিকা খুঁজে পেতে পারেন। অন্য যেকোনো মতামত এবং সমস্যা ইস্যু ট্র্যাকারের মাধ্যমে জানান।

রিলিজ আপডেট

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