Skip to main content

স্ক্রিনশট ক্যাপচার সহ ভিজ্যুয়াল রিগ্রেশন টেস্টিং

ডেভ টিমগুলো Webshot ব্যবহার করে ঠিক সেসব বাগ ধরতে, যেগুলো ইউনিট টেস্ট এড়িয়ে যায় — ভেঙে যাওয়া লেআউট, ফন্ট ফলব্যাক, হারিয়ে যাওয়া আইকন, নষ্ট রেসপনসিভ স্টেট। স্টেজিং ক্যাপচার করুন, প্রোডাকশন ক্যাপচার করুন, জোড়াটা ডিফ করুন। ডিফটা একটা PR মন্তব্যে যোগ করুন প্রমাণ হিসেবে যে আপনার পরিবর্তন নিরাপদ (কিংবা প্রমাণ হিসেবে যে নতুন বাগটা এইমাত্র হাজির হয়েছে)।

🖥️ ডেস্কটপ পূর্ণ-পাতা (PNG, ঝকঝকে ডিফ) 📱 মোবাইল পূর্ণ-পাতা ⚙️ বদলে বিনামূল্যের API ব্যবহার করুন

সব বাটনই ক্যাপচার ফর্মটি আগে থেকে কনফিগার করা অবস্থায় খোলে। পাতা লোড হওয়ার পর আপনি ফরম্যাট আর ভিউপোর্ট বদলে নিতে পারবেন।

এই কাজে কেন Webshot

পিক্সেল-নিখুঁত ক্যাপচার

PNG মোড ঝকঝকে টেক্সট আর প্রান্ত অটুট রাখে — পিক্সেল-ডিফিং টুলের (`pixelmatch`, ImageMagick `compare`) জন্য আদর্শ, যেখানে JPG কম্প্রেশনের নয়েজ মিথ্যা পজিটিভ তৈরি করত।

প্রতিবার একই ভিউপোর্ট

Webshot প্রতিবার হুবহু একই ভিউপোর্ট, একই স্ক্রল অবস্থান আর একই ফন্ট-লোডিং অপেক্ষার সময়ে ক্যাপচার করে — ডিফ ফলাফল নির্ভরযোগ্য।

API-বান্ধব

বিনামূল্যের Webshot API আপনার CI-তে যুক্ত করুন: ডিপ্লয়ের আগে ও পরে ক্যাপচার করুন, `pixelmatch` দিয়ে ডিফ করুন, পরিবর্তিত-পিক্সেল থ্রেশহোল্ড ছাড়ালে বিল্ড ফেল করান।

হেডলেস-Chrome বয়লারপ্লেট নেই

puppeteer সেটআপ, ফন্ট ইনস্টল, স্যান্ডবক্স ফ্ল্যাগ — সব বাদ। Webshot-এর কাছে এসব আমাদের অবকাঠামোতেই চলছে। আপনার CI শুধু একটা HTTP কল করে।

ভিজ্যুয়াল রিগ্রেশন টেস্টিং যেভাবে ক্যাপচার করবেন

  1. যে পাতা(গুলো) নজরে রাখতে চান বেছে নিন — হোমপেজ, গুরুত্বপূর্ণ ল্যান্ডিং পেজ, চেকআউট ফ্লো, যেখানে রিগ্রেশন ক্ষতি করবে এমন যেকোনো জায়গা।
  2. আপনার বর্তমান প্রোডাকশন চেহারা বেসলাইন করতে প্রতিটি PNG + desktop_full + mobile_full-এ ক্যাপচার করুন।
  3. পরের ডিপ্লয়ের পর একই URL আবার ক্যাপচার করুন। পুরনো বনাম নতুন `pixelmatch` বা ImageMagick দিয়ে ডিফ করুন — ১% এর বেশি পিক্সেল বদলালে তা মানুষের পর্যালোচনা পাওয়ার যোগ্য।
  4. CI-তে যুক্ত করুন: একটা প্রি-ডিপ্লয় হুক স্টেজিং ক্যাপচার করে, একটা পোস্ট-ডিপ্লয় হুক প্রোডাকশন ক্যাপচার করে, আর ডিফ আপনার থ্রেশহোল্ড ছাড়িয়ে গেলে বিল্ড ফেল করে।

প্রায়শই জিজ্ঞাসিত প্রশ্ন

CI-তে হেডলেস Chrome মানে Chromium, ফন্ট আর স্যান্ডবক্স কার্নেল-ফ্ল্যাগ ইনস্টল করা, তার ওপর সবকিছু নিয়মিত আপডেট রাখা। Webshot দিয়ে ইনস্টলের ঝামেলা পুরোপুরি বাদ — আপনার CI শুধু আমাদের API-তে একটা HTTP কল করে আর ফেরত পায় একটা PNG। Chrome আপডেট, ফন্ট ক্যাশিং আর SSRF সুরক্ষা আমরাই সামলাই।

হ্যাঁ, যদি আপনি PNG + একই ভিউপোর্ট + একই ওয়েট-স্ট্র্যাটেজি ব্যবহার করেন। Webshot ভিউপোর্টের মাপ স্থির রাখে এবং fonts.ready + নেটওয়ার্ক-আইডল + `prefers-reduced-motion` কোয়েরির মাধ্যমে ঘোষিত যেকোনো অ্যানিমেশনের জন্য অপেক্ষা করে। এলোমেলো অ্যানিমেশন (lottie লুপ, Date.now() ব্যাকগ্রাউন্ড) প্রতিবার আলাদা ডিফ দেবে; সেগুলো আপনার টেস্ট এনভায়রনমেন্টে স্থির করে নিন।

একটি কলে নয় — প্রতিটি URL আলাদাভাবে ক্যাপচার করে তারপর আলাদা একটি লাইব্রেরি দিয়ে সেগুলো ডিফ করুন। আমরা API-কে শুধু ক্যাপচারেই কেন্দ্রীভূত রাখছি; ডিফিং তো মাত্র ৩০ লাইনের একটা স্ক্রিপ্ট। উদাহরণ কোডের জন্য `/developers` দেখুন।

হ্যাঁ। Webshot ক্যাপচারের আগে নেটওয়ার্ক-আইডল (৫০০ms ধরে কোনো রিকোয়েস্ট নেই) আর fonts.ready-এর জন্য অপেক্ষা করে, ফলে React, Vue, Svelte আর Next.js অ্যাপ স্ক্রিনশটের আগে পুরোপুরি রেন্ডার হয়ে যায়। যেসব সাইট কখনও নেটওয়ার্ক-আইডলে পৌঁছায় না (লং পোলিং, ওয়েবসকেট), সেখানে API-এর মাধ্যমে একটা `maxWait` প্যারামিটার পাঠাতে পারেন।

বিনামূল্যের পাবলিক ফর্মে প্রতি IP-তে ১৫ মিনিটে ৫টি — CI-এর জন্য খুবই কম। বিনামূল্যের API টিয়ার আরও উদার; `/developers` দেখুন। বেশি ভলিউমের রিগ্রেশন টেস্টিংয়ের (প্রতি বিল্ডে ৫০+ ক্যাপচার) জন্য বাণিজ্যিক API প্ল্যান প্রতি-IP সীমা তুলে দেয়।

Webshot নিজে শুধু ক্যাপচার করে — ডিফিং স্তরটা আপনাকেই দিতে হবে। দুই লাইনের সমাধান: `npx pixelmatch baseline.png new.png diff.png`। কিংবা একটি ম্যানেজড ভিজ্যুয়াল-ডিফ সার্ভিস (Percy, Chromatic, BackstopJS) ব্যবহার করুন আর তাতে Webshot-এর PNG ফিড করুন।

ক্যাপচার করতে প্রস্তুত?

বিনামূল্যে, সাইনআপ ছাড়া, ওয়াটারমার্ক ছাড়া। শুধু একটা URL পেস্ট করুন।

📸 ক্যাপচার ফর্ম খুলুন

অন্যান্য ব্যবহারের ক্ষেত্র: Google Maps স্ক্রিনশট · WordPress স্ক্রিনশট · ল্যান্ডিং পেজ QA · আইনি প্রমাণের স্ক্রিনশট · সোশ্যাল মিডিয়া স্ক্রিনশট · ডেভেলপার ওয়ার্কফ্লো স্ক্রিনশট · সব দেখুন →

Share: 𝕏 Twitter Facebook LinkedIn