محتوا
- 01. خشم
- امتحانش کن
- مزایا و معایب
- 02. PhantomCSS
- امتحانش کن
- مزایا و معایب
- 03. جوزا
- امتحانش کن
- مزایا و معایب
- 04. WebdriverCSS
- امتحانش کن
- مزایا و معایب
- 05. شبح
- امتحانش کن
- مزایا و معایب
- نام آوران
- بعدش چی؟
در طول چندین سال گذشته ، من بیشتر و بیشتر متوجه شده ام که واژه تست رگرسیون بصری در مکالمات توسعه وب بیشتر می شود ... و این دلیل خوبی دارد. این نوید ارائه دهنده ارزش فوق العاده ای برای کسانی است که از بررسی دستی سایت های خود برای مشکلات سبک خسته شده اند.
با این محبوبیت فزاینده ، به نظر می رسد هر ماه ابزاری جدید عرضه می شود که هر یک نویدبخش ارائه اتوماسیون تست رگرسیون بصری عالی است. متأسفانه ، من بیشتر خواب را بیش از واقعیت دیده ام ، واقعیت این است که این نوع آزمایشات فریبکارانه پیچیده هستند.
با این حال ، تعداد معدودی وجود دارد که از جمعیت متمایز هستند. در حالی که هر کدام مزایا و معایب خود را دارند ، اما معتقدم هر ابزاری در این لیست ارزش بررسی را دارد.
01. خشم
Wraith برای چندین سال وجود داشته است. این یکی از اولین ابزارهای موجود در صحنه بود و با افزایش بیش از 200 درخواست کشش در نسخه ی نمایشی GitHub ، همچنان قابلیت های عملکردی را مشاهده می کند. این ابزار ابتدایی برای هر کسی است که در روبی توسعه می دهد.
امتحانش کن
از فهرست پروژه خود ، اجرا کنید نصب غضب. سپس بدوید configs / config.yaml capture wraith. این مجموعه آزمایشاتی را بر روی دو نسخه مختلف از صفحه اصلی BBC اجرا می کند. پس از اتمام اجرای آزمایشی خود ، با گشودن صفحه ایجاد شده جدید ، گالری عکس صفحه خود را بررسی کنید عکس / گالری. html صفحه را در مرورگر مورد نظر خود انتخاب کنید.
همچنین می توانید تست های خود را شخصی سازی کنید. در configs / config.yaml می توانید سایت ها و صفحات را برای آزمایش ، همراه با تنظیم عرض صفحه و حالت پخش ، به روز کنید.
مزایا و معایب
- کار با فایل پیکربندی YAML ساده است
- می توانید دو URL مختلف را با هم مقایسه کنید
- اگر با Ruby آشنا نباشید ، نصب ممکن است مشکل باشد
- اجرای تعاملات خاص برای صفحات جداگانه دشوار است
02. PhantomCSS
یکی دیگر از گزینه های کهنه کار ، PhantomCSS یکی از گزینه های محبوب در بین توسعه دهندگان frontend بوده است. آشنایی و عملکرد آن ، PhantomCSS را به گزینه ای مناسب برای افرادی که از نظر آزمایش وب سایت می خواهند پاهای خود را دراز کنند ، انتخاب کند. PhantomCSS که در بالای PhantomJS / CasperJS ساخته شده است ، به قابلیت خارق العاده ارائه شده توسط این دو ابزار می افزاید.
امتحانش کن
یک فایل JavaScript جدید با کد زیر ایجاد کنید:
casper.start ('http://the-internet.herokuapp.com/checkboxes'). سپس (تابع () {phantomcss.screenshot ('# کادرهای انتخاب'، 'قبل از کلیک')؛ casper.click ('# checkboxes input : first-child ')؛ phantomcss.screenshot (' # کادر تأیید '،' پس از کلیک ')؛})؛
سپس پرونده خود را از طریق CapserJS CLI اجرا کنید: تست casperjs myfile.js. اسکریپت شما در پس زمینه اجرا می شود و تصاویر شما در ذخیره می شوند عکسهای صفحه پوشه
مزایا و معایب
- بسیاری از آموزش ها و ارائه ها در مورد آن
- در بالای CasperJS ساخته شده است ، و اجازه می دهد اقدامات صفحه را در آزمایشات ادغام کنید
- آزمایشات محدود به PhantomJS
- بدون رابط کاربری برای بررسی / مدیریت عکسهای صفحه
03. جوزا
به نظر من جوزا جذاب است زیرا آزمایش سنتی سلنیوم را در یک رابط کاربری بسیار پیچیده بسته بندی می کند. همانند PhantomCSS ، می توانید اقدامات سفارشی را در اطراف صفحه نمایش خود تعریف کنید. برخلاف PhantomCSS ، Gemini با تهیه "مجموعه تست" که می تواند به سازماندهی کد شما کمک کند ، چندین مرحله جلوتر می رود.
امتحانش کن
ایجاد یک .gemini.yml پرونده را با محتوای زیر (جایگزین کردن URL به سرور شبکه سلنیوم خود):
rootUrl: http://the-internet.herokuapp.com/checkboxes gridUrl: http: // localhost: 4444 / wd / hub مرورگرها: chrome: مورد نظر قابلیت ها: مرورگر نام: chrome
سپس یک فایل آزمایشی ایجاد کنید و آن را در لیست قرار دهید جوزا پوشه در ریشه پروژه شما. پرونده می تواند به همین سادگی باشد:
gemini.suite ('yandex-search'، function (suite) {suite.setUrl ('/ checkboxes') .setCaptureElement ('# checkboxes') .capture ('قبل از کلیک') .capture ('بعد از کلیک'، function ( اقدامات ، پیدا کنید) {action.click ('# checkboxes input: first-child')؛})؛})؛
بعد ، با اجرای تصاویر پایه خود را ایجاد کنید بروزرسانی gemini. باید ببینید یک آزمون قبولی دارد. می توانید از طریق آزمون رگرسیون انجام دهید تست جمینی، که تصاویر جدید را با تصاویر ذخیره شده در داخل مقایسه می کند gemini / صفحه نمایش فهرست راهنما.
مزایا و معایب
- ادغام سلنیوم به شما امکان می دهد طیف گسترده ای از مرورگرها و دستگاه ها را آزمایش کنید
- یک سایت کاملا مستند با مثالهای مختلف
- چارچوبی برای مرتب سازی آزمون ها به مجموعه ها فراهم می کند
- عدم دسترسی مستقیم به سلنیوم ، محدود کردن نوع اقداماتی که می توانید در یک صفحه انجام دهید
- اجرای یک آزمون در چندین وضوح به پیکربندی پیشرفته نیاز دارد
04. WebdriverCSS
اول ، یک نکته: آینده WebdriverCSS نامشخص است ، زیرا تلاش هایی برای جایگزینی آن با ماژول به روزتری وجود دارد. با این وجود ، من فکر می کنم هنوز هم لازم به ذکر است ، زیرا همان ساختار اساسی برای اجرای بعدی ادامه خواهد داشت.
مانند Gemini ، WebdriverCSS به دلیل عملکردش در سلنیوم قرار می گیرد. همچنین در بالای یک ابزار دیگر قرار دارد: WebdriverIO. از آنجا که بخشی از اکوسیستم WebdriverIO است ، از هر آنچه که چارچوب ارائه می دهد بهره مند می شود. این شامل صدها دستور است که می توانید قبل و بعد از عکس گرفتن از صفحه به مرورگر ارسال کنید.
WebdriverCSS همچنین با چارچوب های آزمایشی مانند Mocha ، Jasmine و Cucumber.js ادغام می شود. با سرویس های Cloud Selenium مانند Sauce Labs و Browserstack به اتصال اضافه کنید و یک مجموعه تست عملکردی کامل با تست رگرسیون بصری به عنوان گیلاس در بالای صفحه دارید.
امتحانش کن
یک پرونده جدید JavaScript ایجاد کنید (test.js) در پروژه خود با محتوای زیر:
var مشتری = Require ('webdriverio'). Remote ({სასურველიCapunities: {browserName: 'chrome'}}) Require ('webdrivercss'). init (مشتری، {screenWidth: [640،1024]})؛ var screenshotElement = [{name: 'checkboxes'، elem: '#checkboxes'}]؛ client.init () .url ('http://the-internet.herokuapp.com/checkboxes') .webdrivercss ("قبل از کلیک" ، screenshotElement). کلیک کنید ("# checkboxes input: first-child") .webdrivercss ("پس از کلیک" ، screenshotElement). پایان ()؛
آزمون را با تایپ این دستور در خط فرمان خود اجرا کنید: $ node test.js. تصویری که با بررسی موارد ایجاد شده تأیید کنید webdrivercss پوشه اگر دوباره تست خود را اجرا کنید و عکسهای صفحه تغییر کند ، متوجه یک مورد می شوید تفاوت پوشه اضافه خواهد شد و تصاویر متفاوت مربوطه در داخل آن خواهد بود.
مزایا و معایب
- از آنجا که از WebdriverIO استفاده می کند ، می توانید از تمام ویژگی هایی که چارچوب ارائه می دهد استفاده کنید
- پیکربندی سریع وضوح صفحه نمایش مختلف
- شما را قادر می سازد مناطق خاصی از عکس صفحه را پنهان یا ماسک کنید
- آینده نامشخص است زیرا این افزونه خاص دیگر رسماً حفظ نمی شود
- شما را ملزم به یادگیری نحوه استفاده از WebdriverIO می کند
05. شبح
بر خلاف سایر ابزارهای این لیست ، Spectre تست ها را اجرا نمی کند. در عوض ، این کار بر روی ارائه قابلیت مقایسه تصویر ، همراه با یک رابط مدیر برای مدیریت عکس ها متمرکز است.
در حالت عادی ، می توانید Spectre را با ابزاری مانند WebdriverIO یا PhantomJS جفت کنید. دومی کار ثبت عکس های صفحه را انجام می دهد ، در حالی که Spectre ذخیره سازی و پردازش تصاویر را مدیریت می کند. من طرفدار این موضوع هستم ، زیرا تفکیک نگرانی ها داشتن یک ابزار آزمایش به انتخاب ما به عنوان یک جامعه را آسان می کند ، اما همچنین یک رابط مدیر مشترک ایجاد می کند.
امتحانش کن
در وب سایت Spectre خود ، مسیر را باز کنید / تست / جدید /. از آنجا می توانید اطلاعات آزمون را سفارشی کرده و تصویر اولیه را بارگذاری کنید. پس از ارسال آزمون ، به صفحه اصلی سایت خود بروید که در آنجا "یک پروژه آزمایشی" را همراه با اعلان 1 تصویب شده مشاهده خواهید کرد. برای جزئیات بیشتر در مورد آزمون می توانید روی هر یک از پیوندهای آن صفحه کلیک کنید.
بعد ، بازگشت به/ تست / جدید صفحه را بارگذاری کنید و یک تصویر جدید بارگذاری کنید. پس از اتمام ، به صفحه اصلی برگردید و خواهید دید که Spectre مقایسه را انجام داده و اکنون یک آزمایش ناموفق را گزارش می دهد.
مزایا و معایب
- رابط کاربری تمیز و دوستانه برای مدیریت عکس های صفحه
- سعی نمی کند کارهای زیادی انجام دهید ، تلاش ها را بر روی یک منطقه خاص از زمینه آزمایش متمرکز می کند
- نیاز به دانش راه اندازی سرور Ruby دارد
- شما را ملزم به دانستن نحوه ارسال داده / عکس از طریق REST API می کند
نام آوران
چند ابزار وجود دارد که به نظر من قابل ذکر است ، حتی اگر در لیست بالا جای خاصی نداشته باشد. آن ها هستند:
- چارچوب جالینوس
- شووو
- BackstopJS
برای لیست کاملی از ابزارها و مقالات در این زمینه ، به visualregressiontesting.com مراجعه کنید.
بعدش چی؟
"این لیست عالی است ، اما آیا نمی توانید فقط بگویید از کدام ابزار استفاده کنم؟" خوب ... نه ، زیرا این بستگی زیادی به آزمایش دارد. اگر سایتی کاملاً ساده را بررسی می کنید ، Wraith یا Gemini گزینه های بسیار خوبی هستند. اما اگر شما نیاز به تقلید از اقدامات کاربر دارید ، WebdriverCSS یا PhantomCSS مناسب تر خواهد بود.
اگر مطمئن نیستید ، نگران نباشید. فقط یکی را انتخاب کنید و امتحان کنید. مهم نیست که کدام ابزار را انتخاب کنید ، شما در مورد آزمایش پیشرو و اینکه چقدر قدرتمند (هرچند پیچیده) است ، درسهای ارزشمندی خواهید آموخت.
این مقاله در اصل در مجله نت شماره 290؛ از اینجا بخر!
