خب داخل قسمت قبلی که در اینجا میتونید مشاهده فرمایید یکم در مورد مزایا معایب و اصن چرا باید تست بنویسیم صحبت کردیم داخل این مقاله قصد دارم یک سری کارها با cypress انجام بدیم پس با من همراه باشید .
برای نصب Cypress در وحله اول باید داخل دایرکتوری مدنظرمون بشیم و دستور npm init -y بزنیم سپس با دستور npm i cypress --save-dev صبر میکنیم cypress نصب بشه . ( اینو بهتون بگم تا این لحظه که الان دارم این مقاله رو مینویسم برای نصب باید قندشکن وصل کنید )
وقتی نصب با موفقیت گذرونده شد با دستور npx میتونید cypress خودتون اجرا کنید .
برای اولین دستور ورژن cypress میخایم ببینم چند نصب شده رو پروژه با دستور npx cypress -v میتونیم این کار انجام بدیم
در این مرحله شما با زدن دستور npx cypress open میتونید یک تست های پیش فرض و از قبل نوشته شده توسط cypress اجرا کنید . وقتی این کامند رو وارد کردید یک فایل به وجود میاد به اسم cypress.json که داخل این فایل میتونیم یک سری کانفینگ ها قرار بدیم ( که در ادامه اموزش یک سری بهش خواهیم زد پس نگران نباشید . ) یک دایرکتوری داریم به cypress که بازش کنیم شامل چند تا دایرکتوری دیگه میشه که به ترتیب براتون توضیح میدم هر کدوم چکار میکنه .
fixtures :
داخل این دایرکتوری ما دیتاهای تست مون رو قرار میدیم مثل Email Name Password etc
integration :
داخل این دایرکتوری که مهم ترین دایرکتوری ما هم حساب میشه میتونیم تست های که مینویسیم داخل اینجا قرار بدیم تا GUI که خود Cypress داره بشناسه تست هامونو . ( یک خبر خوشحال کننده که cypress تست هاشو با زبان جاوا اسکریپت میتونیم بنویسیم )
plugins :
داخل قسمت معرفی Cypress گفتیم Cypress کامل نیست خودش اما به کمک پلاگین ها خودشو کامل کرده داخل این دایرکتوری میتونیم فایل های پلاگین خودمونو قرار بدیم و مورد استفاده قرار بدیم اونارو .
support :
داخل این دایرکتوری میتونیم یک سری کامند برای خودمون تعریف کنیم که کاستوم خودمون باشه بخش جذابیه :) و اکثرا نادیده میگیرن این بخش رو که قراره کلی باهم در مورد این بخش صحبت کنیم و یاد بگیریم
همون طور که توضیح دادم ما برای اجرای Cypress به یک Runner احتیاج داریم که به کمک npx میتونیم ران کنیم تست هامونو به کمک دستور npx cypress open وقتی ران کردیم تست هامونو وارد GUI Cypress میشیم .
وقتی کامند npx cypress open رو زدین با این پنجره باید مواجه بشید . ( نکته من یک سری عدد با رنگ قرمز گذاشتم برای جاهای که نیاز بود طبق همون توضیحات رو خواهم داد . )
۱ - ورژن cypress که در حال حاضر داریم استفاده میکنیم نسخه ۱۲.۴.۱ هستش .
۲ - مارو به سایت مرجع ارجاع میده که یک سری داکیومنت خفن برامون اماده کرده .
۳ - وقتی روش کلیک کردیم کانفینگ استارت تست های E2E رو میتونیم فعال کنیم .
۴ - در اینجا تست های کامپوننت تست هامون میتونیم کانفینگ کنیم یک مسئله advance هستش که در اواسط سری از پارت ها تست بهش اشاره خواهیم کرد .
یک نکته یک قسمت هست به اسم Login که میتونیم به داشبورد خود Cypress متصل بشیم که تا یک جای رایگانه اما از یک جایی به بعد پولی میشه البته نیازش هم نداریم ولی داشتنش خالی از لطف نیست .
خب در اینجا میتونیم محیط و مرورگر خودمون که تست ها روش اجرا بشه رو انتخاب میکنیم بسته به مرورگر های که نصب دارید رو سیستم این صفحه میتونه کاستوم بشه .
فقط یک نکته Electron که اینجا میبینید میتونید باهاش تست های سمت command line بنوسید و با نود جی اس اونو اجرا کنید یک سری unit تست هایی که میخایم که وابسته به مرورگر نیستن رو داخل این محیط اجرا میکنیم .
۲ - با زدن این گزینه میتونید یک سری تست بنویسید عملیات ساخت تست انتخاب اسم و ... رو به صورت GUI انجام میده زیاد گزینه به درد بخوری نیست :)
۳ - این قسمت شما میتونید بازم به پنل مدیریت Cypress وصل بشید .
۴- قسمت تنظیمات میتونید داخل این قسمت به یک سری اپشن Cypress ببینید که به صورت دیفالت صورت گرفته شده که میتونید در اینجا ویرایش شون کنید یا ببینیدشون ( البته همون طور قسمت اول مقاله توضیح دادم فایل cypress.config.js میتونید تنظیمات رو ویرایش حذف یا کم کنید . )
۱ - این قسمت چون یکم توضیح مفصل و زیادی داشت اخر این قسمت اوردم واستون .
در این قسمت که از قسمت سمت چپ ( Specs ) میتونید این قسمت بیارید تمامی تست های نوشتید قابل نمایشهکه میتونید هر کدوم تست های که دوست داشتید اجرا کنید و نتیجه رو ببینید ( به صورت پیش فرض یک سری مثال برامون زده خود cypress که حتما باهاش یکم بازی کنید تا باهاش اشنا بشید )
قسمت سمت راست سه بخش وجود داره یکیش که آخرین ابدیت فایل تست تون هستش بعدش اخرین باری که این تست اجرا شده و در اخر گزینه خیلی جذابیه میانگین طول کشیدن زمان این تست بهتون میده که یک سری امار های باحال بهمون میده که خیلی کاربردیه .
یک تست ساده قراره بنویسیم قراره ادرس یک سایت رو بدیم و به کمک cypress تست اجرا کنید و اون سایت باز کنیم ببینیم چه نتیجه ای بهمون نمایش میده .
وارد دایرکتوری cypress بشید و هر چی فایل هست داخلش پاک کنید :)
و داخل دایرکتوری cypress یک دایرکتوری درست کنید به اسم E2E و درونش یک فایل به اسم session.cy.js درست کنید . و درونش این کد قرار بدهید .
این یک نمونه کد ساده اولیه هستش که من خط به خط براتون توضیح میده .
خط اول : ما باید به فایل تست خودمون بفهمونیم که میخایم از قوانین cypress پیروی کنیم پس یک reference type میدیم به cypress
خط دوم : شاید براتون جالب باشه نوع نوشتاری شبیه تست Mocha هستش ( cypress یک روی Mocha اومده یک Wrapper تعریف کرده به خاطر همین میتونید از این نوع تست نویسی استفاده کنید و استاندارد هم هست . )
یک توضیح برای تست مون مینویسیم که خوانا باشه که خوندش برامون راحت باشه ( بهتون میگم کجا به دردتون میخوره )
بعد به کمک توابع که خود cypress بهمون میده که به اختصار به اسم cy می شناسیم میگیم تست ما باید بره سایت https://google.com بیاره بالا .
میریم برای اجرا ?
خب طبق دایرکتوری بندی که داشتیم میبنید که در این قسمت میتونیم تست هامونو ببنیم پس اسم دایرکتوری و اسم فایل هم مهم می باشد .
بر روی session.cy.js کلیک کنید تا تست مدنظر اجرا بشه .
خب میبنید تست با موفقیت اجرا شد و وب سایت گوگل برامون اومد بالا و داخل پنل دیباگ سمت چپ اگر ببینید میتونید اطلاعات خیلی جالبی کسب کنید
۱ - که به کجا برای نمایش وب سایت گوگل درخواست زده شده و نتایج چی بوده .
۲ - اگر یکم دقت کنید می بینید توضیح که در مورد اینکه تست مون چکار میکنه رو داخل اینجا میتونیم ببینیم پس مهمه چه توضیحی مینویسیم .
۳ - قسمت بالا سمت چپ اگر دقت کنید سه تا راهنما بهمون داده که نوشته یک دونه تست پاس شده با رنگ سبز اگر تست نا موفق بود قرمز می شد و اگر اسکیپ می شد گزینه اخر یک عدد بهش اضافه می شد .
برای تست خودتون یک سایت که Down هستش رو بنویسید ببینید نتیجه چی بهتون میده و با این قسمت مقایسه اش کنید :)
خب این سری از مقاله هم به پایان رسید منو با لایک و کامنت ها خودتون حمایت کنید و اینکه داخل این نظرسنجی داخل لینکدین هم شرکت کنید که در ادامه اموزش ها به صورت مقاله باشه یا ویدیویی :)
