فریم ورک Cypress چیست؟

Cypress، یک فریم ورک آزمایشی مبتنی بر جاوا اسکریپت است که بر روی Mocha ساخته شده است. یک فریم ورک آزمایشی جاوا اسکریپت غنی از ویژگی ها که در مرورگر اجرا می شود و آزمایش های ناهمزمان را ساده و راحت می کند. همچنین، از یک کتابخانه BDD/TDD و یک مرورگر برای جفت شدن با هر فریم ورک تست جاوا اسکریپت استفاده می کند.

دو ویژگی اصلی که به طور خاص برای چارچوب Cypress توسعه داده است عبارتند از:

انتظار خودکار: Cypress منتظر می شود تا عناصر مشاهده، انیمیشن کامل و DOM بارگذاری شود و تماس های XHR و AJAX به پایان برسد و غیره. بنابراین، نیازی به تعریف ضمنی و صریح نیست.

بارگیری مجدد در زمان واقعی: Cypress، به اندازه کافی هوشمند است تا بداند پس از ذخیره یک فایل آزمایشی(فایل xyz_spec.js)، آزمایش کننده دوباره آن را اجرا می کند. بنابراین، به محض اینکه تستر فایل آنها را ذخیره کرد، به طور خودکار اجرا در کنار مرورگر را فعال می کند.

به همین دلیل، نیازی نیست که به صورت دستی اجرا کنید.

ویژگی های فریم ورک Cypress

• Cypress، منتظر است تا فرمان آزمایشی را به طور خودکار اجرا کرده قبل از اجرای دستورات بعدی که باید اجرا شود، بیانیه هایی را اعمال می کند.
• در حین اجرای مورد آزمایش، اسکرین شات می گیرد تا به اشکال زدایی کمک کند.
• اجرای تست را به طور موثرتری اشکال زدایی می کند زیرا اجرای تست تعاملی را با Test Runner و گزارش های مربوطه ارائه می دهد.
• به دلیل تفاوت طراحی معماری با سایر چارچوب های آزمایشی، اجرای سریع تر و قابل اطمینان تری را در اختیار کاربران قرار می دهد.

نصب فریم ورک تست Cypress:

مطابق فرمان زیر می توانید Cypress را با استفاده از Npm package manager نصب کنید.

 npm install cypress —save–dev

این دستور، Cypress را روی سیستم دانلود و پیکربندی(config) می کند.

مولفه های فریم ورک Cypress:

اجزای زیر در اجرای موارد آزمایشی خاص نقش دارند:

File Spec:

حوی بلوک های it () {} است که اجرای آزمایش در آنجا آغاز می شود. هر فایل spec دارای یک بلوک توصیفی {} است و در آن {} بلوک های مختلفی وجود دارد.

Page Object File:

روش هایی را که حاوی منطق تجاری تست هستند را فهرست می کند. این روش ها شامل دستورات واقعی Cypress برای تعامل با اپلیکیشن واقعی است.

انتخاب کننده صفحه:

شامل مکان یاب هی واقعی عناصر UI در یک برنامه واقعی است.

فایل ثابت:

از مولفه فوق برای ثابت نگه داشتن فایل های آزمایشی استفاده می شود.

اکنون بیایید نگاهی به روند کار فریم ورک Cypress بیندازیم:

جریان کار(WorkFlow):

برنامه را برای نوشتن موردآزمایش باز کنید.

مکان یاب/ انتخاب کننده های مورد نیاز برای جریان خاص آن آزمون را مشخص کنید. آنها به فایل Page Selector اضافه کنید.

مراحل آزمایشی را در سینتکس Cypress به شکل دستورات تحت متدهای موجود در Page Object File اضافه کنید

متد Object صفحه را در فایل Spec فراخوانی کنید.

روش های متعددی برای انجام آزمایش Cypress وجود دارد. اگر به عنوان بخشی از ساختار پروژه اجرا شود، میتوان از ابزار ng استفاده کرد:

مجموعه آزمایشی را با دستور ng e2e اجرا کنید.

برای اجرای یک آزمایش خاص، برنامه ng e2e project Name – spec = Spec File Path را اجرا کنید.

مزایای فریم ورک Cypress:

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

چگونه اولین آزمایش  Cypress خود را با مثال اجرا کنید؟

1. همانطور که قبل ذکر شد، از nmp برای نصب Cypress استفاده شده است. در نتیجه، اکنون در فهرست node_modules/.bin. قابل دسترسی است.

2. اکنون، Cypress را از ریشه پروژه به یکی از روشهای زیر باز کنید.

راه طولانی با مسیر ./node_modules/.bin/cypress open باز می شود و با با استفاده از میانبر npm bin

$(npm bin)/cypress open)

3. افزودن اسکریپت های npm

افزودن دستورات cypress به قسمت اسکریپت ها در فایل Package.json آسانتر است:

{

“scripts”: {

“cypress:open”: “cypress open”

}

}

اکنون با دستور زیر، ریشه را فراخوانی کنید:

npm run cypress:open

یا

همچنین، مانند تصویر زیر از npx برای فراخوانی استفاده کنید:

npx cypress open

4. پس از باز شدن Cypress، اسکریپت را نوشته و روی مورد آزمایش کار کنید:

یک فایل ex_spec.js ایجاد کنید

بروز رسانی لیست مشخصات Cypress را مشاهده کنید.

Cypress Test Runner را راه اندازی کنید.

5. ایجاد یک فایل جدید در پوشه Cypress

touch {your_project}/cypress/integration/ex_spec.js

6. پس از ایجاد فایل، باید مشاهده کنید که Cypress Test Runner بلافاصله در لیست تست های ادغام نمایش داده می شود.

7. یک IDE را باز کرده و کد زیر را به فایل آزمایشی ex_spec.js اضافه کنید:

describe(‘First Test’, () => {

it(‘Welcome!’, () => {

expect(true).to.equal(true)

})

})

8. پس از ذخیره شدن فایل، کاربر باید بارگیری مجدد مرورگر را مشاهده کند.

به این صورت، یک کاربر می تواند اولین اسکریپت Cypress خود را اجرا کند.

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