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/launching-browsers 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/getting-started/installing-cypress#System-requirements 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/stories/ My Udemy Courses - https://automationstepbystep.com/udemy-discounts/ 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