Ali Razavi
Ali Razavi
خواندن ۳ دقیقه·۲ سال پیش

Cypress E2E Test | تست به روش سایپرس پارت سوم

مقدمه

خب امروز قراره در مورد یک سری assertion در cypress باهم گفت گو کنیم چند مورد تست بنویسیم و در اخر روش اجرای تست برروی سرور و CI CD رو میخام براتون بگم .

تست نویسی

۱ - اولین تست که قراره بنویسیم باهم قراره وارد وب سایت گوگل بشیم و عبارت cypress رو تایپ کنه و در نهایت دکمه Enter بزنه تست مون و نتایج گوگل مشاهده کنیم . ( برای اجرای این تست به Selector Input وب سایت گوگل احتیاج داریم با inspect مرورگر نحوه Select کردن شو انتخاب کنید که بهترین روشش به صورت input[name='q'] هستش )


خب همون طور قسمت قبل توضیح دادم برای تست مون یک توضیحات مینویسیم سپس میگیم وارد سایت گوگل بشیم و در ادامه برای گرفتن input گوگل به کمک Selector Css اقدام میکنیم و با تابع get المنت input میگیریم و به کمک تابع type کلمه cypress رو تایپ میکنیم سپس event enter رو صدا میزنیم ( نحوه تعریف event ها در cypress {} به این شکل می باشد . )

۲ - دومین تست قراره وارد سایت گوگل بشیم ببینیم title document وب سایت گوگل ایا با این کلمه Google برابر است یا خیر ؟

خب دوباره یک توضیح در مورد تست مون میدیم سپس به کمک تابع visit وارد سایت گوگل میشیم و به در ادامه به کمک assertion title چک میکنیم عنوان داکیومنت به کمک assertion should برابر با Google هست یا خیر . ( should دو تا ورودی میگه اولین ورودی بهش میگن chainer میتونه شامل chainer های مختلفی باشه که در این لینک میتونید لیست تمامی chainer رو ببینید . )

اجرای تست در CI CD

خب احتمالا برای کانفینگ کردن cypress در قسمت جایی که انتخابی محیط اجرای تست بود یک گزینه بهش برخوردید به اسم Electron که این گزینه به شما کمک میکنه تست های خودتون داخل CI CD اجرا کنید به صورت command line

نکته باید cypress به صورت Global داخل سیستم شما نصب شده باشد :) پس دستور npm i -g cypress فراموش نشود .

پس با دستور cypress run namefiletest.js میتونیم تست خودمون اجرا کنیم .

وقتی اجرا کردیم با این چند بخش مواجه میشیم که هر کدوم براتون توضیح میدم .


خب داخل این بخش دوباره ورژن cypress داریم . سپس نوشته با Browser الکترون نسخه ۱۰۶ به صورت headless اجرا شده ( یعنی به صورت کامند لاین ) ورژن نود زده برامون که من دارم از اخرین نسخه نود استفاده میکنم . سپس چون من با این دستور ران کردم تست مو cypress run session.js گفته یک تست با این نام پیدا شد . ومحل سرچ دایرکتوری هم برامون نوشته .

خب داخل این قسمت دوباره توضیحاتی که گفتم خیلی مهمه رو داره برامون نشون میده که اگر پاس شده باشن با رنگ سبز اگر پاس نشده باشن با رنگ قرمز اگر هم اسکیپ شده باشند با رنگ سفید نمایش میده .

بعد دوباره یک سری امار بهمون داده که میتونید ببینید خودتون .


در قسمت اخر این بخش هم که مورد باحال هست در مورد snapshot ها که توضیح داده بودم که خیلی هم مهمه برامون یک ویدیو از روند کار گرفته که اگر خطایی چیزی خوردیم داخل CI CD میتونیم اون ویدیو رو ببینیم و مشکل رو جویا بشیم ادرس ذخیره ویدیو هم داخل پوشه خود cypress هستش که میتونید بعد از اتمام تست خودتون مشاهده فرمایید .

نتیجه گیری

خب اینم از پایان بخش سوم امیدوارم از این مطلب هم خوشتون امده باشه و با لایک و کامنت هاتون منو حمایت کنید :)


ci cdتستجاوااسکریپتcypresstest
برنامه نویس دون پایه
شاید از این پست‌ها خوشتان بیاید