برنامه نویسی

4 روش برای خودکارسازی تست های رگرسیون بصری

قبل از شروع، اجازه دهید به چند سوال سریع بپردازیم:

تست رگرسیون بصری به چه معناست؟

تست رگرسیون بصری فرآیندی است برای مقایسه ظاهر بصری رابط کاربری یک برنامه بین دو نسخه مختلف تا اطمینان حاصل شود که هیچ تغییر بصری ناخواسته ای وجود ندارد. این فرآیند شامل گرفتن اسکرین شات از عناصر مختلف رابط کاربری و مقایسه آنها با اسکرین شات های قبلی گرفته شده برای شناسایی هرگونه تغییر در ظاهر بصری است. تست رگرسیون بصری کمک می کند تا اطمینان حاصل شود که رابط کاربری برنامه در دستگاه ها، مرورگرها و سیستم عامل های مختلف سازگار و از نظر بصری جذاب باقی می ماند.

چرا باید آن را خودکار کنید؟

تست رگرسیون بصری خودکار می تواند به شناسایی مشکلات UI در اوایل چرخه توسعه کمک کند، که می تواند مقدار قابل توجهی در زمان و هزینه صرفه جویی کند که در غیر این صورت ممکن است بعداً برای رفع مشکلات صرف شود. در مورد زمان (و در نتیجه پول) که صرف رفع ابهامات رابط کاربری می شود فکر کنید که در Q/A، UAT یا تولید وجود دارد. چرا نمی‌توانید آن اشکالات بصری را خودکار کنید؟

چک های بصری دستی چطور؟

اگرچه می‌توانید بررسی‌های بصری دستی را انجام دهید، توصیه نمی‌شود که صرفاً به آن‌ها تکیه کنید، زیرا در مقایسه با استفاده از مجموعه‌های خودکار، زمان بسیار بیشتری می‌برد. تشخیص تفاوت ها در UI می تواند چالش برانگیز باشد، حتی برای اشکالات بصری ظریف. مثال زیر را ببینید – آیا می توانید 8 تفاوت را تشخیص دهید؟ شاید. اما خیلی بیشتر از یک مجموعه اتوماسیون طول می کشد.

2 تصویر مختلف از یک میز سوشی با تفاوت های جزئی

چند درصد از اشکالات بصری توسط تست های رگرسیون بصری خودکار شناسایی می شوند؟

مطالعات از منابع مختلف (BrowserStack، AppliTools، و غیره) نشان می‌دهد که تست رگرسیون بصری خودکار می‌تواند بیشتر باگ‌های بصری را با میزان موفقیت از 95٪ تا 99٪، بسته به پیچیدگی برنامه و فرآیند آزمایش مورد استفاده، شناسایی کند.


در این مقاله، ما 4 کتابخانه محبوب برای خودکارسازی تست رگرسیون بصری را بررسی خواهیم کرد: Chromatic، Percy، Jest Image Snapshot، BackstopJS.


رنگی

Chromatic یک ابزار تست رگرسیون بصری است که به طور خاص برای Storybook طراحی شده است. Chromatic یک پلت فرم ابری ارائه می دهد که به کاربران اجازه می دهد تا اجزای رابط کاربری یک پروژه را آزمایش و مدیریت کنند و اطمینان حاصل کنند که تغییرات ایجاد شده منجر به تغییرات بصری غیرمنتظره نمی شود.

چه کسی از Chromatic استفاده می کند؟

Adobe، Auth0، CircleCI، GOV.UK، BBC و غیره

نکات مثبت Chromatic

  • ادغام آسان: به طور خاص برای Storybook (توسط نگهبانان Storybook!) ساخته شده است، تنظیم آن برای کتابخانه جزء یا سیستم طراحی شما یکپارچه است.
  • همکاری تیمی: Chromatic با اجازه دادن به شما برای به اشتراک گذاشتن نتایج آزمایش با اعضای تیم خود، گذاشتن نظرات و بحث در مورد هر مشکلی، بستری برای همکاری تیمی فراهم می کند.
  • تجزیه و تحلیل ساخت: Chromatic تجزیه و تحلیل دقیق ساخت را ارائه می دهد و به شما نشان می دهد چه تغییراتی ایجاد شده است، چه کسی آنها را ایجاد کرده است و چگونه بر اجزای رابط کاربری شما تأثیر گذاشته است.

معایب کروماتیک

  • گزینه های سفارشی سازی محدود: در حالی که رابط کاربری Chromatic به گونه ای طراحی شده است که استفاده از آن آسان باشد، ممکن است به اندازه سایر ابزارهای تست رگرسیون بصری انعطاف پذیری یا سفارشی سازی را ارائه ندهد.
  • قیمت گذاری: Chromatic یک طرح رایگان با مشارکت کنندگان و کتاب های داستان نامحدود ارائه می دهد. با این حال، سطح رایگان آن دارای محدودیت 5000 عکس فوری در ماه است، بنابراین اگر فکر می‌کنید به این محدودیت خواهید رسید، ارزش آن را دارد که در نظر بگیرید که آیا سطح اول (149 دلار در ماه) برای تیم شما مقرون به صرفه است یا خیر. اطلاعات بیشتر قیمت را می توانید در اینجا پیدا کنید.
  • بدون گزینه تست محلی: Chromatic در حال حاضر راهی برای آزمایش تغییرات بصری در یک ماشین محلی قبل از استقرار آنها در سرور ارائه نمی دهد، که می تواند برای برخی از تیم ها محدودیت باشد.

پرسی

Percy یک پلتفرم بررسی بصری همه در یک است که طیف گسترده ای از ویژگی ها و ادغام ها را ارائه می دهد. توسط BrowserStack که پیشرو صنعت در تست برنامه و مرورگر است، خریداری شد. پرسی به توسعه‌دهندگان کمک می‌کند تا رگرسیون‌های بصری را پیدا کنند، فرآیند بررسی را ساده‌تر کنند و به تیم‌ها اجازه می‌دهد تا به راحتی با یکدیگر همکاری کرده و تغییرات را دنبال کنند.

چه کسی از پرسی استفاده می کند؟

Google، Sentry، Shopify، Fastly، Basecamp و غیره.

جوانب مثبت پرسی

  • همه کاره و انعطاف پذیر: Percy را می توان برای تست رگرسیون بصری در طیف گسترده ای از برنامه های کاربردی فراتر از کتاب داستان استفاده کرد. Percy دارای ویژگی‌های پیشرفته‌ای مانند تست بین مرورگرها، ادغام با چارچوب‌های تست محبوب، و یک API قدرتمند است که امکان سفارشی‌سازی و کنترل گسترده‌تری بر فرآیندهای تست شما را فراهم می‌کند.
  • مقیاس پذیری: Percy مقیاس بسیار خوبی دارد و مدیریت تست های رگرسیون بصری را حتی برای بزرگترین پروژه ها آسان می کند.
  • همکاری: پرسی طیف وسیعی از ابزارهای همکاری، از جمله ویژگی‌های نظر دادن و اشتراک‌گذاری را ارائه می‌کند که به توسعه‌دهندگان اجازه می‌دهد تا برای شناسایی و حل سریع مشکلات با یکدیگر همکاری کنند.

معایب پرسی

  • سفارشی سازی محدود: برخی از کاربران ممکن است متوجه شوند که تنظیمات و ویژگی های خارج از جعبه Percy نیازهای آزمایشی خاص آنها را برآورده نمی کند، زیرا گزینه های محدودی برای سفارشی سازی وجود دارد.
  • وابستگی به خدمات خارجی: از آنجایی که Percy یک ابزار مبتنی بر ابر است، توسعه‌دهندگان باید برای میزبانی و نگهداری پلتفرم به ارائه‌دهندگان خدمات خارجی تکیه کنند، که می‌تواند وابستگی‌های اضافی و نقاط احتمالی شکست را معرفی کند.
  • قیمت گذاری: پرسی طرحی رایگان با مشارکت کنندگان و کتاب های داستان نامحدود ارائه می دهد. با این حال، سطح رایگان آن دارای محدودیت 5000 عکس فوری در ماه است، بنابراین اگر فکر می‌کنید به این محدودیت خواهید رسید، ارزش آن را دارد که در نظر بگیرید که آیا سطح اول برای تیم شما مقرون به صرفه است یا خیر. اطلاعات بیشتر قیمت را می توانید در اینجا پیدا کنید.

کدام راه حل Cloud را برای Storybook انتخاب کنیم؟

به نظر من، اگر قبلاً از آن برای سایر تست‌های رگرسیون بصری (مثلاً در مجموعه‌های تست Cypress E2E) استفاده می‌کردم یا برنامه‌ریزی می‌کردم از آن استفاده کنم، با پرسی می‌رفتم تا تست‌های رگرسیون بصری شما در یک پلتفرم ادغام شوند. از طرف دیگر، اگر من فقط نیاز به انجام تست های رگرسیون بصری برای Storybook داشته باشم، Chromatic را انتخاب می کنم. Chromatic به طور خاص برای Storybook توسط نگهبانان آن طراحی شده است و آن را سازگارتر و آینده نگرتر می کند. از آنجایی که Chromatic فقط برای Storybook بهینه شده است، بهتر با پلتفرم ادغام می شود و گردش کار ساده تری را ارائه می دهد.

روند NPM از @percy/storybook در مقابل. chromatic به نظر می رسد نشان می دهد که اکثر مردم به همین نتیجه رسیده اند:

1679260945 910 4 روش برای خودکارسازی تست های رگرسیون بصری Storybook” loading=”lazy” width=”880″ height=”359″/>


عکس لحظه ای تصویر وجود دارد

Jest Image Snapshot یک ابزار تست رگرسیون بصری است که برای Jest ساخته شده است. این به توسعه دهندگان اجازه می دهد تا از اجزا یا عناصر رندر شده عکس فوری بگیرند و آنها را با تصاویر ذخیره شده قبلی مقایسه کنند تا تفاوت یا تغییر بصری را بررسی کنند. با رندر کردن کامپوننت یا عنصر و ایجاد تصویری از خروجی رندر شده با استفاده از یک مرورگر هدلس کار می کند. سپس تصویر تولید شده با استفاده از مقایسه پیکسل به پیکسل با تصویر ذخیره شده قبلی مقایسه می شود و در صورت مشاهده هر گونه تفاوت، Jest یک آزمایش ناموفق را گزارش می دهد.

چه کسی از Jest Image Snapshot استفاده می کند؟

امریکن اکسپرس و غیره

نکات مثبت Jest Image Snapshot

  • آسان برای استفاده: راه اندازی و استفاده از Jest Image Snapshot آسان است و آن را برای توسعه دهندگان در تمام سطوح تجربه در دسترس قرار می دهد. این یکپارچه با Jest، یک چارچوب تست محبوب، ادغام می شود و نیازی به پیکربندی اضافی ندارد.
  • مستقل: Jest Image Snapshot را می توان به صورت محلی، بدون نیاز به سرویس خارجی استفاده کرد، و آن را به یک راه حل راحت تر و مقرون به صرفه تر برای توسعه دهندگانی تبدیل می کند که ترجیح می دهند برنامه های خود را به صورت محلی آزمایش و اشکال زدایی کنند.
  • قیمت گذاری: این یک پروژه منبع باز است و 100٪ رایگان است.

معایب Jest Image Snapshot

  • سربار عملکرد: تست رگرسیون بصری محلی می تواند منابع فشرده باشد و آزمایش های در حال اجرا می تواند روند توسعه را کند کند، به خصوص برای پروژه های در مقیاس بزرگ.
  • وابستگی به بله: همانطور که از نام آن پیداست، Jest Image Snapshot کاملاً با چارچوب تست Jest ادغام شده است، که ممکن است برای تیم هایی که از سایر چارچوب های آزمایشی استفاده می کنند مناسب نباشد.
  • گزینه های پیکربندی محدود: در حالی که تنظیم و استفاده Jest Image Snapshot آسان است، به اندازه سایر ابزارهای تست رگرسیون بصری گزینه های پیکربندی زیادی را ارائه نمی دهد. این می تواند برای تیم هایی که به انعطاف پذیری بیشتری در تست های خود نیاز دارند، محدود کننده باشد.

BackstopJS

BackstopJS یک ابزار تست رگرسیون بصری منبع باز برای برنامه های کاربردی وب است که فرآیند مقایسه اسکرین شات های وضعیت فعلی یک برنامه وب با نسخه قبلی آن را برای شناسایی هرگونه تغییر بصری خودکار می کند. از اتوماسیون مرورگر بدون سر برای شبیه سازی تعاملات کاربر و گرفتن اسکرین شات از صفحات وب استفاده می کند. BackstopJS را می توان به گونه ای پیکربندی کرد که چندین صفحه را آزمایش کند و طراحی واکنش گرا را در چندین ویوپورت آزمایش کند. همچنین از احراز هویت کاربر پشتیبانی می کند و می تواند با خطوط لوله CI/CD مختلف ادغام شود. BackstopJS از یک فایل پیکربندی برای تعریف URL های مورد آزمایش، پورت های نمایش و سایر تنظیمات استفاده می کند.

مزایای BackstopJS

  • پیکربندی انعطاف پذیر: BackstopJS بسیار قابل تنظیم است که آن را برای آزمایش انواع مختلف برنامه ها با نیازهای بصری مختلف مناسب می کند. این به شما امکان می دهد سناریوهای سفارشی را تعریف کنید، محیط های مختلف را تنظیم کنید و پارامترها را برای دستیابی به سطح مورد نظر از آزمایش تنظیم کنید.
  • مقایسه های قدرتمند: BackstopJS یک موتور مقایسه تصویر قدرتمند ارائه می دهد که حتی کوچکترین تفاوت های بصری را تشخیص می دهد. از مقایسه پیکسل به پیکسل و مقادیر آستانه برای تعیین اینکه آیا یک تغییر به اندازه کافی قابل توجه است که شکست خورده در نظر گرفته شود، استفاده می کند.
  • قیمت گذاری: این یک پروژه منبع باز است و 100٪ رایگان است.

معایب BackstopJS

  • پیچیدگی: BackstopJS در مقایسه با سایر ابزارهای رگرسیون بصری به پیکربندی و راه اندازی بیشتری نیاز دارد که ممکن است اجرای آن را پیچیده تر کند.
  • تست کندتر: BackstopJS در مقایسه با سایر ابزارهای رگرسیون بصری به دلیل نحوه تولید و مقایسه اسکرین شات ها می تواند کندتر اجرا شود.
  • پشتیبانی محدود: در حالی که BackstopJS دارای اسناد و پشتیبانی انجمن است، ممکن است به اندازه ابزارهای دیگر با پایگاه های کاربری بزرگتر و شبکه های پشتیبانی قوی تر (مانند Percy) قوی نباشد.

در نتیجه، هر ابزار ویژگی ها و مزایای منحصر به فرد و همچنین معایب احتمالی را ارائه می دهد. انتخاب کدام مورد برای آزمایش رگرسیون بصری به عوامل مختلفی مانند الزامات پروژه، ترجیحات تیم و منابع موجود بستگی دارد. در انتخاب هر ابزار معاوضه هایی وجود دارد و تصمیم گیری به این بستگی دارد که چه عواملی برای پروژه شما مهم هستند.

به نظر من پرسی جامع ترین و کاربرپسندترین راه حل را ارائه می دهد و آن را به گزینه ای عالی برای تیم هایی تبدیل می کند که به دنبال یک ابزار پیشرفته هستند. Chromatic یک گزینه مناسب برای تیم هایی است که فقط نیاز به آزمایش کتابخانه Storybook خود دارند، در حالی که BackstopJS برای تیم هایی که به دنبال قابلیت های تست جامع تر هستند، مناسب تر است. Jest Image Snapshot گزینه خوبی برای توسعه دهندگانی است که روی پروژه های کوچکتر کار می کنند که از Jest استفاده می کنند.

در نهایت، گنجاندن تست رگرسیون بصری خودکار در فرآیند توسعه شما برای تشخیص زودهنگام نقص های رابط کاربری و اطمینان از تجربه کاربری با کیفیت بالا برای وب سایت یا برنامه شما حیاتی است.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا