All FREE courses - https://automationstepbystep.com/
Cypress QUIZ - https://forms.gle/4eP3P8kDjMJStiKBA
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:
https://docs.cypress.io/guides/guides...

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
https://docs.cypress.io/guides/gettin...

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(‘https://google.com/’)
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 - https://automationstepbystep.com/stor...
My Udemy Courses - https://automationstepbystep.com/udem...

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