All FREE courses - [ Ссылка ]
Cypress QUIZ - [ Ссылка ]
00:00 Introduction
00:50 Topics
04:50 About Raghav
05:58 What is Cypress
09:19 How to use Cypress
09:53 Supported Browsers
11:12 Cypress Features
14:19 Prerequisites
20:05 IDE - VS Code
30:30 Cypress Project Setup
50:03 Cypress folder structure
51:58 1st Test in Cypress
01:12:37 How to access elements
In Part 2
Object Locators
Cypress with JavaScript
Cypress with TypeScript
Assertions
Page Object Model
App Actions
Grouping Tests
CLI
Package.json
File Handling
(Read, Write, Upload, Download)
Reporting
API Testing
Custom Commands
Cypress Studio
Cypress Dashboard
Cypress BDD Framework
Database Integration
Git
Jenkins
What is Cypress:
Test Automation Tool
can test anything that runs on a web browser
write tests in JavaScript or TypeScript
does not use Selenium
open source
cypress.io
How to use Cypress
Setup tests
Write tests
Run tests
Debug
Check the current supported browsers here:
[ Ссылка ]
Cypress Features:
Time Travel takes snapshots as your tests run
Debuggability readable errors and stack traces
Automatic Waiting automatically waits for commands and assertions before moving on
Consistent Results doesn’t use Selenium or WebDriver. Fast, consistent and reliable
Screenshots and Videos get screenshots and videos
Cross browser Testing locally or remote (CI CD)
Cypress Prerequisites:
Windows 7 and above (64-bit only)
macOS 10.9 and above (64-bit only)
Linux Ubuntu 12.04 and above, Fedora 21 and Debian 8 (64-bit only)
Node.js 10 or 12 and above
Can check the latest prerequisites here
[ Ссылка ]
IDE - Visual Studio Code
Cypress Project Setup
Step 1 - Install Node.js
Step 2 - Install Visual Studio Code
Step 3 - Create a new folder for Cypress project
Step 4 - Open the folder in VS Code
Step 5 - Open VS Code terminal & run command npm init -y
Step 6 - Install Cypress
npm install cypress
npx cypress -v
npx cypress verify
Step 7 - Open Cypress
npx cypress open
Cypress 1st Test
Step 1 - Create a file under cypress folder
Step 2 - At the top mention
/// ＜reference types="cypress" /＞
Step 3 - Write test function
Step 4 - Run test
npx cypress open
See what happens when you make any changes & save
Add in Config file
"watchForFileChanges": false
cypress.json - ver before 10
cypress.config.js -for ver 10+
Commands we learned:
cy.visit() cy.visit(‘[ Ссылка ])
cy.get() cy.get(‘.class’)
type() cy.get(‘.class’).type(‘1234’)
click() cy.get(‘.class’).click()
How to access elements:
Step 1 - Run test
Step 2 - On the browser - App Preview - click Selector Playground
Step 3 - Copy the cy.get command and paste in the test script
Step 4 - Add custom timeouts - command level
cy.get('.className, {timeout:5000}).type('123{enter}')
Step 5 - Add custom timeouts - global level- cypress.json
"defaultCommandTimeout": 10000
Step 6 - Access element with text
cy.contains('Videos').click()
we learned
ways to access and interact with elements
adding custom timeouts - command level
adding custom timeouts - global level
cy.contains() cy.contains('Videos').click()
cy.wait() cy.wait(5000)
#CypressTutorial
____________________________________________________________
Stories by Raghav - [ Ссылка ]
My Udemy Courses - [ Ссылка ]
Every LIKE & SUBSCRIPTION gives me great motivation to keep working for you
You can support my mission for education by sharing this knowledge and helping as many people as you can
If my work has helped you, consider helping any animal near you, in any way you can.
Never Stop Learning
Raghav
