آموزش Cypress IO V9 + فریم‌ورک‌ها + CI/CD + دو اپلیکیشن ری‌اکت - آخرین آپدیت

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

مقدمه Introduction

• مقدمه Introduction

• مقدمه‌ای بر Cypress io Cypress io Introduction

• معماری Cypress Cypress Architecture

• ویژگی‌های Cypress Cypress Features

• نکته مهم Important note

• دانلود Cypress Download Cypress

• باز کردن Cypress Opening Cypress

• پوشه Integration Integration Folder

فریم‌ورک Mocha Mocha Framework

• مورد تست Mocha Mocha Test case

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

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

• هوک‌های Mocha Mocha Hooks

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

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

• دستور Visit Visit Command

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

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

انتخابگرهای Cypress Cypress Selectors

• مقدمه‌ای بر دستور Get 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

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

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

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

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

• تایم‌اوت یافتن عناصر Find elements timeout

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

اقدامات Cypress Cypress Actions

• دستور Click Click command

• دستور Type Type command

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

• دستور Select Select command

• دستورات Check و Uncheck Check and Uncheck command

• دستور Clear Clear command

• دستورات Double و Right click Double and Right click commands

• دستورات Blur و Focus Blur and focus commands

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

تأییدهای Should 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 Should exercise

دستورات Cypress Cypress commands

• دستور URL URL command

• دستور Title Title Command

• دستور Go Go Command

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

• دستور Clock Clock command

• دستور wrap wrap command

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

• دستور Then Then command

• دستور Expect Expect command

• دستور Each Each command

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

• همزمانی در Cypress Cypress Async

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

• دسترسی به Aliasها Aliases accessibility

فیکسچرها در Cypress Fixtures in Cypress

• مقدمه‌ای بر فیکسچرها Fixtures introduction

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

• فیکسچرها و Before Each 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 با استفاده از Cypress Get request using cypress

• افزودن تأییدها به پاسخ GET Add assertions to the GET response

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

• درخواست POST Post Request

• درخواست PUT Put Request

• درخواست DELETE Delete Request

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

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

• برنامه تست Testing plan

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

• حذف همه کارها در هوک after each Delete all todos in after each hook

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

• دستورات Cypress Cypress commands

• تست شرطی Cypress Cypress conditional testing

• افزودن مورد تست کار خالی Add an empty todo test case

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

• ایجاد داده تست با استفاده از API Create test data using API

• افزودن موارد تست قابلیت فیلتر Add filter functionality test cases

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

دستور Intercept Intercept Command

• مقدمه‌ای بر دستور Intercept Intercept command introduction

• Matcher و Handler دستور Intercept Intercept command Matcher and Handler

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

• Intercept و فیکسچرها Intercept and fixtures

• Spy کردن درخواست POST ما با استفاده از intercept Spying on our POST request using intercept

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

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

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

• اجرای یک فایل spec خاص با استفاده از دستور 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 Cypress Dashboard

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

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

• تلاش‌های مجدد Cypress (Retries) Cypress Retries

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

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

• تگ‌های Cypress Cypress Tags

• نشان‌های Cypress (Badges) Cypress Badges

Cypress: شروع سرور و تست Cypress start server and test

• افزودن وابستگی Cypress start server and test Add cypress start server and test dependency

یکپارچه‌سازی Cypress با گیت‌هاب Cypress Github integration

• فعال کردن یکپارچه‌سازی Cypress با گیت‌هاب Enable cypress github integration

داکر با Cypress Docker with Cypress

• مقدمه‌ای بر داکر و ایمیج‌های 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 ignore Docker ignore file

CI/CD - جنکینز CI/CD-Jenkins

• نصب جنکینز به صورت محلی 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

• فعال کردن پایپ‌لاین جنکینز بر اساس یک رویداد گیت‌هاب Trigger Jenkins pipeline Based on a github event

CI/CD - گیت‌لب CI/CD - Gitlab

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

• اجرای پایپ‌لاین ما در گیت‌لب Run our pipeline on Gitlab

• دسترسی به آرتیفکت‌های تست (ویدیوها + اسکرین‌شات‌ها) با استفاده از گیت‌لب Access test Artifacts (Videos + Screenshots) using gitlab

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

CI/CD - سیرکل‌سی‌آی CI/CD - CircleCI

• ایجاد یک پروژه جدید در سیرکل‌سی‌آی Create a new CircleCI project

• ایجاد فایل config.yml سیرکل‌سی‌آی Create CircleCI config.yml file

• اجرای پایپ‌لاین سیرکل‌سی‌آی ما Run our CircleCI Pipeline

• ذخیره آرتیفکت‌های Cypress در سیرکل‌سی‌آی Store Cypress Artifacts in CircleCI

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

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

پروژه تمرینی - دومین اپلیکیشن React 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

• افزودن تأییدهای spec ورود Add Login spec assertions

• تکنیک طراحی کامپوننت React با Cypress Cypress React Component Design Technique

• افزودن برخی اکشن‌ها در فایل کامپوننت ورود Add some actions inside the login component file

• افزودن فایل Utils داخل support 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 Enable Slack Notifications

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

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

• کد کامل The complete code

تست رگرسیون بصری با Cypress 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

تست واحد React با 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

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

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

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

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

• کامپوننت‌ها و فیکسچرها Components and fixtures

• کار با props در تست واحد Cypress Deal with props in Cypress unit test