آموزش Cypress IO V9 + Frameworks + CI/CD + دو برنامه React

سرفصل ها و درس ها

معرفی Introduction

• معرفی Introduction

• Cypress io مقدمه Cypress io Introduction

• معماری سرو Cypress Architecture

• ویژگی های سرو Cypress Features

• یادداشت مهم Important note

• دانلود سرو Download Cypress

• سرو باز کردن Opening Cypress

• پوشه ادغام Integration Folder

چارچوب موکا Mocha Framework

• کیس تست موکا Mocha Test case

• [چالش] مورد تست موکا [Challenge] Mocha Test case

• مجموعه تست موکا Mocha Test suite

• قلاب موکا Mocha Hooks

باز کردن وب سایت در Cypress Opening a Website in Cypress

• تکمیل خودکار کد سرو Cypress code auto completion

• از Command دیدن کنید Visit Command

• از وب سایت در اندازه های مختلف صفحه بازدید کنید Visit website in different screen sizes

• از وب سایت در مرورگرهای مختلف دیدن کنید Visit website in different browsers

انتخابگر سرو Cypress Selectors

• دریافت معرفی فرمان Get command introduction

• فایل HTML خود را به پروژه اضافه کنید Add our HTML File to the project

• عنصر را با استفاده از نام برچسب پیدا کنید Find Element using Tag name

• عنصر را با استفاده از ID پیدا کنید Find Element using ID

• عنصر را با استفاده از نام کلاس پیدا کنید Find Element using class name

• عناصر را با استفاده از کودکان پیدا کنید Find elements using children

• عناصر را با استفاده از دستور find پیدا کنید Find elements using find command

• عناصر را با استفاده از دستورات eq، first، last پیدا کنید Find elements using eq, first, last commands

• عناصر را با استفاده از دستور فیلتر پیدا کنید Find Elements using filter command

• عناصر را با استفاده از خواهر و برادر پیدا کنید Find elements using siblings

• عناصر را با استفاده از متن پیدا کنید Find elements using text

• عنصر را با استفاده از ویژگی ها پیدا کنید Find Element using Attributes

• مهلت زمانی عناصر را پیدا کنید Find elements timeout

• زمین بازی انتخابگر دونده سرو Cypress runner selectors playground

Cypress Actions Cypress Actions

• روی فرمان کلیک کنید Click command

• دستور را تایپ کنید Type command

• [چالش] اولین سناریوی E2E با استفاده از تایپ و کلیک کردن [Challenge] First E2E scenario using type and click

• دستور را انتخاب کنید Select command

• دستور را علامت بزنید و علامت آن را بردارید Check and Uncheck command

• دستور را پاک کنید Clear command

• دستورات دوبار و راست کلیک کنید Double and Right click commands

• دستورات تاری و فوکوس Blur and focus commands

• نگه داشتن ماوس و فشار طولانی Mouse hover and long press

باید اظهارات Should Assertions

• معرفی Introduction

• باید متن داشته باشد Should have text

• باید قابل مشاهده باشد Should be visible

• باید کلاس داشته باشه Should have class

• باید css داشته باشد Should have css

• باید فعال شود Should be enabled

• باید یک ویژگی داشته باشد Should have an attribute

• باید ارزش داشته باشد Should have a Value

• باید ورزش کند Should exercise

فرمان سرو Cypress commands

• دستور URL URL command

• فرمان عنوان Title Command

• برو فرمان Go Command

• دستورات کوکی ها Cookies Commands

• فرمان ساعت Clock command

• دستور wrap wrap command

• دستورات It و Invoke Its and Invoke commands

• سپس دستور دهید Then command

• انتظار فرمان Expect command

• هر دستور Each command

Cypress async و متغیرها Cypress async and Variables

• Cypress Async Cypress Async

• متغیرهای سرو Cypress Variables

• دسترسی مستعار Aliases accessibility

وسایل در سرو Fixtures in Cypress

• معرفی وسایل Fixtures introduction

• ایمیل و رمز عبور را با استفاده از وسایل پر کنید Fill email and password using fixtures

• وسایل و قبل از هر کدام Fixtures and Before Each

• تغییر مکان پوشه پیش فرض فیکسچرها Changing the default fixtures folder location

• به روز رسانی فایل داده های وسایل قبل از استفاده از آنها Updating fixtures data file before using them

• دستورات ReadFile و WriteFile ReadFile and WriteFile commands

درخواست های API در Cypress API Requests in Cypress

• اولین برنامه React ما را کلون کنید Clone our First React App

• آشنایی با اپلیکیشن ما Getting to know our App

• Cypress را به پروژه react خود اضافه کنید Add Cypress to our react project

• دریافت درخواست با استفاده از سرو Get request using cypress

• اظهارات را به پاسخ GET اضافه کنید Add assertions to the GET response

• پارامترها را به درخواست اضافه کنید Add Parameters to the request

• ارسال درخواست Post Request

• درخواست قرار دهید Put Request

• حذف درخواست Delete Request

• درخواست API ایمن Secured API request

پروژه 1 - بهترین شیوه ها را یاد بگیرید Project 1 - learn best practices

• طرح تست Testing plan

• یک مورد تست todo جدید اضافه کنید Add a new todo test case

• پس از هر قلاب، تمام کارهای انجام شده را حذف کنید Delete all todos in after each hook

• مورد آزمایشی وضعیت todo را به‌روزرسانی کنید Update todo status test case

• فرمان سرو Cypress commands

• تست مشروط سرو Cypress conditional testing

• یک مورد آزمایشی todo خالی اضافه کنید Add an empty todo test case

• داده های آزمایشی را با استفاده از رابط کاربری ایجاد کنید Create test data using UI

• داده های آزمایشی را با استفاده از API ایجاد کنید Create test data using API

• موارد تست عملکرد فیلتر را اضافه کنید Add filter functionality test cases

• موارد تست Todos API را اضافه کنید Add todos API test cases

دستور رهگیری Intercept Command

• مقدمه دستور رهگیری Intercept command introduction

• دستور رهگیری Matcher and Handler Intercept command Matcher and Handler

• کارها را با استفاده از دستور Intercept جمع می کنیم Stubbing our todos using the Intercept command

• رهگیری و وسایل Intercept and fixtures

• جاسوسی از درخواست POST ما با استفاده از رهگیری Spying on our POST request using intercept

اجرای تست ها با استفاده از خط فرمان Running tests using the command line

• تمام مشخصات را با استفاده از Cypress runner اجرا کنید Run all the specs using Cypress runner

• Cypress test را از خط فرمان اجرا کنید Run Cypress test from the command line

• با استفاده از دستور Cypress run یک فایل مشخصات خاص را اجرا کنید Run a specific spec file using Cypress run command

• با استفاده از دستور Cypress run یک مرورگر خاص را اجرا کنید Run a specific browser using Cypress run command

• دستورات ما را به فایل package.json اضافه کنید Add our commands into the package.json file

داشبورد سرو Cypress Dashboard

• پروژه ما را به داشبورد سرو متصل کنید Connect our project to cypress dashboard

• بینش داشبورد Cypress Cypress Dashboard insights

• Cypress دوباره تلاش می کند Cypress Retries

• تست های پوسته پوسته در داشبورد Flaky tests in the Dashboard

• اعلان‌های Cypress Slack Cypress Slack notifications

• برچسب های سرو Cypress Tags

• نشان سرو Cypress Badges

Cypress راه اندازی سرور و تست Cypress start server and test

• سرور شروع cypress را اضافه کنید و وابستگی را آزمایش کنید Add cypress start server and test dependency

ادغام Cypress Github Cypress Github integration

• ادغام cypress github را فعال کنید Enable cypress github integration

بارانداز با سرو Docker with Cypress

• معرفی داکر و تصاویر سرو Docker introduction and cypress images

• Dockerfile را ایجاد کنید و فایل ها و پوشه های پروژه ما را در کانتینر خود کپی کنید Create Dockerfile and copy our project files and folders into our container

• دستورات را اجرا کنید و کانتینر ما را بسازید Run commands and build our container

• فایل نادیده گرفتن Docker Docker ignore file

CI/CD-Jenkins CI/CD-Jenkins

• Jenkins Locally نصب کنید Install Jenkins Locally

• ادمین جنکینز را پیکربندی کنید و افزونه ها را دانلود کنید Configure Jenkins admin and download the plugins

• پلاگین های داکر را در جنکینز نصب کنید Install Docker plugins inside Jenkins

• Dockerfile را بسازید Build Dockerfile

• خط لوله ما را بسازید Build our pipeline

• خط لوله ما را به صورت دستی اجرا کنید Run our pipeline manually

• خط لوله جنکینز را به صورت دوره ای فعال کنید Trigger Jenkins pipeline periodically

• ماشه خط لوله جنکینز بر اساس یک رویداد github Trigger Jenkins pipeline Based on a github event

CI/CD - Gitlab CI/CD - Gitlab

• فایل gitlab-ci yml ایجاد کنید Create gitlab-ci yml file

• خط لوله ما را در Gitlab اجرا کنید Run our pipeline on Gitlab

• دسترسی به مصنوعات (فیلم + تصاویر) با استفاده از gitlab Access test Artifacts (Videos + Screenshots) using gitlab

• تست Cypress را به صورت موازی در دستگاه های Gitlab 3 اجرا کنید Run Cypress Test in Parallel in Gitlab 3 machines

CI/CD - CircleCI CI/CD - CircleCI

• یک پروژه CircleCI جدید ایجاد کنید Create a new CircleCI project

• فایل CircleCI config.yml را ایجاد کنید Create CircleCI config.yml file

• خط لوله CircleCI ما را اجرا کنید Run our CircleCI Pipeline

• مصنوعات سرو را در CircleCI ذخیره کنید Store Cypress Artifacts in CircleCI

• تست Cypress را به صورت موازی در CircleCI اجرا کنید Run Cypress Test in Parallel in CircleCI

• کد نهایی پروژه Final Project Code

پروژه تمرین - دومین React Application Practice Project - Second React Application

• پروژه جدید React را شبیه سازی کنید Clone the new React Project

• آشنایی با اپلیکیشن ما Getting to know our app

• Cypress را به پروژه اضافه کنید Add Cypress to the project

• تنظیمات Cypress را در فایل cypress.json اضافه کنید Add Cypress configurations in cypress.json file

• ویژگی data-cy را برای مؤلفه ورود اضافه کنید Add data-cy Attribute for the Login Component

• با استفاده از Cypress Studio - نسخه 6.4 یک مورد آزمایشی اضافه کنید Add a test case using Cypress Studio - Version 6.4

• اظهارات مشخصات ورود را اضافه کنید Add Login spec assertions

• تکنیک طراحی اجزای Cypress React Cypress React Component Design Technique

• برخی از اقدامات را در داخل فایل جزء لاگین اضافه کنید Add some actions inside the login component file

• فایل Utils را داخل پشتیبانی اضافه کنید Add Utils file inside the support

• با استفاده از API به برنامه وارد شوید و رمز را به حافظه محلی اضافه کنید Login to the application using the API and add the token to the local storage

• اضافه کردن دوره جدید مورد تست Add new course Test case

• حذف مورد آزمون دوره Delete Course Test case

• موارد تست صفحه دوره برای یک کاربر عادی Course page test cases for a normal user

• موارد تست خروج را اضافه کنید Add Logout test cases

• به داشبورد Cypress متصل شوید Connect to Cypress dashboard

• برای اجرای برنامه دستور اضافه کنید و سپس تست را اجرا کنید Add command to run the app and then execute the test

• Slack Notifications را فعال کنید Enable Slack Notifications

• فایل gitlab.yml ایجاد کنید Create gitlab.yml file

• تست ها را به صورت موازی اجرا کنید و مصنوعات را ذخیره کنید Run Tests in parallel and save the artifacts

• کد کامل The complete code

تست رگرسیون بینایی با سرو Visual Regression Test with Cypress

• یک پروژه جدید ایجاد کنید و تمام وابستگی ها را دانلود کنید Create a new Project and download all the dependenices

• پلاگین cypress-image-snapshot را پیکربندی کنید Configure cypress-image-snapshot plugin

• تست رگرسیون بصری با گرفتن یک عکس فوری برای صفحه کامل Visual Regression Test by taking a snapshot for the full page

• تست رگرسیون بصری با گرفتن یک عکس فوری برای یک عنصر خاص Visual Regression Test by taking a snapshot for a specific element

• عکس های فوری پایه را به روز کنید Update the base snapshots

• تست رگرسیون بصری در اندازه های مختلف صفحه نمایش Visual Regression Test on different screen sizes

تست واحد واکنش با Cypress React Unit Test with Cypress

• یک پروژه React جدید ایجاد کنید create a new React project

• پروژه ما را تمیز کنید Clean up our Project

• ایجاد جزء دکمه Create Button component

• وابستگی های cypress و @cypress/react را پیکربندی کنید Configure cypress and @cypress/react dependencies

• با استفاده از @cypress/react یک جزء را در مرورگرهای مختلف رندر کنید Render a component on Different browsers using @cypress/react

• موارد آزمایشی را برای مؤلفه دکمه ما اضافه کنید Add test cases for our Button component

• کامپوننت Todos List را ایجاد کنید Create Todos List Component

• واکشی Todos از API خارجی Fetch Todos from External API

• کامپوننت Todo Item را ایجاد کنید Create Todo Item component

• تمسخر Todos ما با استفاده از Cypress در داخل کامپوننت Mocking our Todos using Cypress inside the component

• قطعات و وسایل Components and fixtures

• مقابله با پروپوزال ها در تست واحد سرو Deal with props in Cypress unit test