تست بصری - UI Testing Inspector
Extension Actions
تست رگرسیون بصری محلی برای وبسایتها - تغییرات UI را بصری مقایسه کنید و تفاوتهای DOM/CSS را بدون کلود تشخیص دهید
چرا از آن استفاده کنید؟
⚡ 100٪ محلی و خصوصی: تمام اسکرینشاتها و دادههای مقایسه در رایانه شما باقی میمانند؛ بدون سرویس کلود، بدون اشتراک داده
⚡ بازخورد فوری: افزونه را نصب کنید، خط مبنا بگیرید، کد را تغییر دهید و بلافاصله تفاوتها را ببینید؛ ایدهآل برای تستهای سریع رگرسیون
⚡ تشخیص پیکسلبهپیکسل: کوچکترین تغییرات بصری که ممکن است از دید انسان دور بماند را شکار کنید
ویژگیهای کلیدی
🔸 خط مبنای تککلیک: حالت «قبل» هر صفحه وب را با یک کلیک ثبت کنید
🔸 تفاوت بصری پیکسلکامل: گزارش شفاف با خط مبنا، وضعیت فعلی و تصویر تفاوتهای دقیق
🔸 بازرسی عنصر: ببینید چه چیزی در DOM و CSS تغییر کرده است
🔸 ضبط صفحه کامل یا ناحیه دید (Viewport)
🔸 تاریخچه گزارش: ذخیره و مرور تا ۱۵ گزارش قبلی
🔸 تم روشن و تیره برای مشاهده راحت در روز و شب
درون گزارش تفصیلی
🔍 پس از هر مقایسه، یک گزارش جامع دریافت میکنید:
✔️ خلاصه: درصد تفاوت بصری و تعداد عناصر اضافه، حذف یا اصلاحشده
✔️ نمای کنارهم: «قبل» / «بعد» کنار تصویر «تفاوتها»
✔️ فهرست تغییرات DOM & CSS: تغییرات دقیق رنگ، فونت، حاشیه و …
مواردی که شناسایی میشود
➤ جابجایی یا بههمریختگی چیدمان
➤ تغییرات رنگ و استایل
➤ عناصر حذف یا جابجاشده
➤ اصلاح فونت و متن
➤ تفاوت تصاویر
نحوه کار
1️⃣ «خط مبنا» را تعیین کنید
2️⃣ تغییرات کد را با اطمینان اعمال کنید
3️⃣ «مقایسه با خط مبنا» برای گزارش تفصیلی
4️⃣ تفاوتها را تحلیل و مشکلات را برطرف کنید
5️⃣ در صورت رضایت، خط مبنا را بهروزرسانی کنید
نکات حرفهای
✨ پس از بارگذاری کامل صفحه خط مبنا بگیرید
✨ برای پوشش کامل از ضبط صفحه کامل استفاده کنید
✨ اسکرینشاتها را در همان اندازه پنجره بگیرید
✨ خط مبنا را زمانی بگیرید که محتوا ثابت است
✨ هر بار یک تغییر را تست کنید برای نتایج شفاف
✨ قبل از بازسازی بزرگ کد، خط مبناهای مهم را ذخیره کنید
موارد استفاده
✅ تست رگرسیون بصری
✅ تأیید UI/طراحی
✅ بازسازی CSS بدون نگرانی
✅ گردش کار تست فرانتاند با فیدبک آنی
مخاطبان
➡️ توسعهدهندگان فرانتاند • مهندسان QA • طراحان UI/UX • فریلنسرها و تیمهای کوچک
چرا متمایز است
🖼️ بهتر از اسکرینشاتهای دستی
📝 بدون نیاز به منحنی یادگیری—استفاده آسان
سؤالات متداول
❓ چگونه تغییرات را تشخیص میدهد؟
💬 مقایسه پیکسلبهپیکسل + اسکن ساختاری 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.