CRX id
begcddgpiamjkanbgdcihlbfdmogcloo
begcddgpiamjkanbgdcihlbfdmogcloo
Description from extension meta
ওয়েবসাইটের জন্য স্থানীয় ভিজ্যুয়াল রিগ্রেশন টেস্টিং - UI পরিবর্তনগুলি দৃশ্যমানভাবে তুলনা করুন এবং ক্লাউড ছাড়াই DOM/CSS পার্থক্য…
Image from store
Description from store
প্রতিটি কোড পরিবর্তনের পরে ম্যানুয়ালি ভিজ্যুয়াল বাগ চেক করতে ক্লান্ত? UI Testing Inspector হল DOM বিশ্লেষণ সহ আপনার নির্ভরযোগ্য স্থানীয় ভিজ্যুয়াল ডিফ চেকার।
কেন এটি ব্যবহার করবেন?
⚡ 100% স্থানীয় এবং ব্যক্তিগত: সমস্ত স্ক্রিনশট এবং তুলনা ডেটা আপনার কম্পিউটারে থাকে। কোন ক্লাউড সেবা নেই, কোন ডেটা শেয়ারিং নেই
⚡ তাৎক্ষণিক ফিডব্যাক: এক্সটেনশন ইনস্টল করুন, বেসলাইন নিন, আপনার কোড পরিবর্তন করুন এবং তাৎক্ষণিক পার্থক্য দেখুন। দ্রুত রিগ্রেশন টেস্টিংয়ের জন্য নিখুঁত
⚡ পিক্সেল-পারফেক্ট সনাক্তকরণ: এমনকি ক্ষুদ্রতম ভিজ্যুয়াল পরিবর্তনগুলি ধরুন যা মানুষের চোখ মিস করতে পারে
মূল বৈশিষ্ট্যসমূহ:
🔸 ওয়ান-ক্লিক বেসলাইন: এক ক্লিকে যেকোনো ওয়েবপেজের "আগে" অবস্থা ক্যাপচার করুন
🔸 পিক্সেল-পারফেক্ট ভিজ্যুয়াল ডিফস: একটি স্পষ্ট রিপোর্ট পান যা বেসলাইন, বর্তমান অবস্থা এবং একটি চিত্র দেখায় যা সঠিক পার্থক্যগুলি হাইলাইট করে
🔸 এলিমেন্ট ইন্সপেক্ট: বেসিক ইন্সপেক্টরের চেয়ে এগিয়ে যান। শুধু কোড নয়, DOM এবং CSS-এ কী পরিবর্তিত হয়েছে তাও দেখুন
🔸 ফুল পেজ এবং ভিউপোর্ট ক্যাপচার: দৃশ্যমান এলাকা ক্যাপচার করা বা পুরো স্ক্রোলযোগ্য পৃষ্ঠার মধ্যে বেছে নিন
🔸 রিপোর্ট ইতিহাস: 15টি পর্যন্ত পূর্ববর্তী তুলনা রিপোর্ট সংরক্ষণ এবং পর্যালোচনা করুন
🔸 হালকা এবং গাঢ় থিম: আরামদায়ক দেখার জন্য, দিন বা রাতে
বিস্তারিত রিপোর্টের ভিতরে
🔍 প্রতিটি তুলনার পরে, আপনি একটি ব্যাপক রিপোর্ট পান যা সম্পূর্ণ চিত্র প্রদান করে:
✔️ সারসংক্ষেপ: ভিজ্যুয়াল পার্থক্যের শতাংশ এবং যোগ করা, সরানো এবং সংশোধিত উপাদানগুলির গণনা
✔️ পাশাপাশি ভিউ: হাইলাইট করা "পার্থক্য" চিত্রের ঠিক পাশে "আগে" এবং "পরে" স্ক্রিনশটগুলি তুলনা করুন
✔️ DOM এবং CSS পরিবর্তনের তালিকা: সঠিক পরিবর্তিত উপাদানগুলি সনাক্ত করুন। আর অনুমান করার দরকার নেই কেন একটি পিক্সেল সরে গেছে - রঙ, ফন্টের আকার বা মার্জিনের মতো কোড-স্তরের পরিবর্তনগুলি দেখুন
আপনি কী ধরবেন:
➤ বিন্যাস শিফট এবং ভুল সারিবদ্ধতা
➤ রঙ এবং স্টাইল পরিবর্তন
➤ অনুপস্থিত বা সরানো উপাদান
➤ ফন্ট এবং টেক্সট পরিবর্তন
➤ চিত্রের পার্থক্য
এটি কীভাবে কাজ করে:
1️⃣ ভিজ্যুয়াল বেসলাইন সেট করুন: আপনি যে পৃষ্ঠাটি পরীক্ষা করতে চান সেখানে নেভিগেট করুন এবং এক্সটেনশনের পপআপে "বেসলাইন সেট করুন" ক্লিক করুন। এটি আপনার সত্যের উৎস।
2️⃣ আত্মবিশ্বাসের সাথে কোড করুন: আপনার CSS-এ পরিবর্তন করুন, কন্টেন্ট আপডেট করুন বা কম্পোনেন্টগুলি রিফ্যাক্টর করুন।
3️⃣ তাৎক্ষণিক পরিবর্তনগুলি চেক করুন: "বেসলাইনের সাথে তুলনা করুন" ক্লিক করুন। একটি বিস্তারিত ভিজ্যুয়াল রিপোর্ট সহ একটি নতুন ট্যাব খুলবে।
4️⃣ পার্থক্যগুলি বিশ্লেষণ করুন: প্রতিটি সমস্যা চিহ্নিত করতে পাশাপাশি ভিউ এবং সনাক্ত করা পরিবর্তনগুলির তালিকা ব্যবহার করুন।
5️⃣ বেসলাইন আপডেট করুন: নতুন সংস্করণে সন্তুষ্ট? নতুন চেহারাটি আপনার রেফারেন্স হিসাবে সংরক্ষণ করতে আবার "বেসলাইন সেট করুন" ক্লিক করুন।
পেশাদার টিপস
✨ বেসলাইন ক্যাপচার করার আগে পৃষ্ঠা লোডিং সম্পূর্ণ হওয়ার জন্য অপেক্ষা করুন
✨ ব্যাপক পরীক্ষার জন্য পূর্ণ পৃষ্ঠা ক্যাপচার ব্যবহার করুন
✨ সঠিক তুলনার জন্য একই ব্রাউজার উইন্ডো আকারে স্ক্রিনশট নিন
✨ কন্টেন্ট স্থিতিশীল হলে বেসলাইন ক্যাপচার করুন
✨ স্পষ্ট পার্থক্যের ফলাফলের জন্য একসময়ে একটি পরিবর্তন পরীক্ষা করুন
✨ বড় কোড রিফ্যাক্টরিংয়ের আগে গুরুত্বপূর্ণ বেসলাইনগুলি সংরক্ষণ করুন
✨ অনুরূপ পৃষ্ঠার অবস্থা তুলনা করুন (একই ব্যবহারকারী লগইন স্থিতি, লোড করা ডেটা)
ব্যবহারের ক্ষেত্রে
✅ ভিজ্যুয়াল রিগ্রেশন টেস্টিং: মূল ব্যবহারের ক্ষেত্রে। পরিবর্তন করার পরে, কোনো অবাঞ্ছিত ভিজ্যুয়াল বাগ ধরার জন্য একটি তুলনা চালান।
✅ UI/ডিজাইন যাচাইকরণ: ডিজাইন মকআপগুলির বিপরীতে পিক্সেল-পারফেক্ট বাস্তবায়ন এবং ব্র্যান্ড সংগতি নিশ্চিত করুন।
✅ CSS রিফ্যাক্টরিং: ভয় ছাড়াই লিগ্যাসি CSS রিফ্যাক্টর করুন। একটি দ্রুত ভিজ্যুয়াল ডিফ টেস্ট অবিলম্বে আপনাকে বলবে যে আপনার পরিবর্তনগুলির কোনো অপ্রত্যাশিত পার্শ্ব প্রতিক্রিয়া ছিল কিনা।
✅ ফ্রন্টএন্ড টেস্টিং: যেকোনো ফ্রন্টএন্ড টেস্টিং ওয়ার্কফ্লোর জন্য একটি অপরিহার্য টুল, তাৎক্ষণিক ভিজ্যুয়াল ফিডব্যাক প্রদান করে।
এটি কার জন্য তৈরি?
➡️ ফ্রন্টএন্ড ডেভেলপারদের জন্য: আপনার কোড কমিট করার আগে লেআউট সমস্যাগুলি ধরুন
➡️ QA ইঞ্জিনিয়ারদের জন্য: একটি নির্ভরযোগ্য ভিজ্যুয়াল যাচাইকরণ ধাপ দিয়ে আপনার ম্যানুয়াল UI টেস্টগুলি উন্নত করুন
➡️ UI/UX ডিজাইনারদের জন্য: দ্রুত নিশ্চিত করুন যে লাইভ বাস্তবায়ন আপনার ডিজাইনের সাথে মেলে
➡️ ফ্রিল্যান্সার এবং ছোট দলের জন্য: কর্পোরেট মূল্য ট্যাগ ছাড়াই ভিজ্যুয়াল টেস্টিং টুল
কেন এটি আলাদা
🖼️ ম্যানুয়াল স্ক্রিনশটের চেয়ে ভাল: আপনার ডেস্কটপ ফোল্ডারে আগে-এবং-পরে ছবিগুলি নিয়ে জাগলিং বন্ধ করুন
📝 শূন্য শেখার বক্ররেখা: আপনি যদি ব্রাউজ করতে পারেন, আপনি এই টুলটি ব্যবহার করতে পারেন
FAQ
❓এটি কীভাবে পরিবর্তনগুলি সনাক্ত করে?
💬 এটি একটি দ্বৈত-পদ্ধতি ব্যবহার করে: ভিজ্যুয়াল পার্থক্যের জন্য পিক্সেল-বাই-পিক্সেল তুলনা এবং DOM/CSS পরিবর্তনের তালিকার জন্য কাঠামোগত স্ক্যানিং।
❓আমার ডেটা কি নিরাপদ?
💬হ্যাঁ। সবকিছু 100% স্থানীয়ভাবে আপনার ব্রাউজারে প্রক্রিয়াজাত এবং সংরক্ষিত হয়।
❓আমি কি এটি localhost-এ ব্যবহার করতে পারি?
💬অবশ্যই! এটি স্থানীয় উন্নয়নের সময় নিখুঁতভাবে কাজ করে
❓ডায়নামিক কন্টেন্টের কী হবে?
💬 টুলটি স্থিতিশীল অবস্থার তুলনা করার জন্য ডিজাইন করা হয়েছে। সর্বোত্তম ফলাফলের জন্য, অ্যানিমেশন শেষ হলে এবং বিজ্ঞাপনগুলি স্থিতিশীল হলে আপনার স্ক্রিনশট নিন।
Latest reviews
- (2025-07-09) Дарья Петрова: Creates a full and detailed report of differences between two versions of web pages. Waiting for Visual comparison of whole page, not just viewport visible parts.