ভিজ্যুয়াল টেস্টিং - UI Testing Inspector
Extension Actions
ওয়েবসাইটের জন্য স্থানীয় ভিজ্যুয়াল রিগ্রেশন টেস্টিং - UI পরিবর্তনগুলি দৃশ্যমানভাবে তুলনা করুন এবং ক্লাউড ছাড়াই DOM/CSS পার্থক্য…
প্রতিটি কোড পরিবর্তনের পরে ম্যানুয়ালি ভিজ্যুয়াল বাগ চেক করতে ক্লান্ত? 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
- Дарья Петрова
- 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.