05/27/2024 B Y: S U R E K H A A K U M B H A R G AV E 1
Introduction
• Cypress is a next generation front end testing
tool built for the modern web applications
(ReactJs, Angular Js ).
• Open source (Test Runner) with paid
premium services(dashboard)
• Any applications which runs on web browser
• Uses JavaScript or TypeScript
• Does not use Selenium
• [Link] environment with npm module
05/27/2024 B Y: S U R E K H A A K U M B H A R G AV E 2
Who can use Cypress
• typically developers or QA engineers building
web applications using modern JavaScript
frameworks.
• Cypress enables you to write all types of tests:
-End To End Tests
-Component tests
-Integration tests
- Unit tests
• Cypress can test anything that runs in a
browser.
05/27/2024 B Y: S U R E K H A A K U M B H A R G AV E 3
Features
• Time Travel
• Debuggability:
• Automatic waits(built in waits)
• Automatically capture Screenshot & videos
• Capable of Cross browser testing
• Cypress Plugins – More than UI Testing
• Easy installation:(npm install cypress --save
–dev)
• Fast Test execution
• Provide folder structure for automation
framework.
4
05/27/2024
• Cypress official documentation.
B Y: S U R E K H A A K U M B H A R G AV E
Limitation
• Can't automate windows base application and mobile
applications
• Limited support of Browser
• Support only Javascript and typescript
• Third party reporting tool integration is limited.(only mocha is
supported)
• MultiTab not supported
• Iframes not supported
• No multiple browser
• Complexity:cypress use only [Link],which is complex and
knowledge demanding.
05/27/2024 • No Xpath support without plugin B Y: S U R E K H A A K U M B H A R G AV E 5
Selenium Vs Cypress
05/27/2024 B Y: S U R E K H A A K U M B H A R G AV E 6
Selenium Vs Cypress: Architecture
05/27/2024 B Y: S U R E K H A A K U M B H A R G AV E 7
Cypress Architecture
05/27/2024 B Y: S U R E K H A A K U M B H A R G AV E 8
Prerequisites For Installing Cypress
• We needs to have [Link] preinstalled in their systems as Cypress is a Node-based application.
[Link] is a JavaScript runtime environment. One can download and install [Link] for a
particular operating system from their download page. The [Link] installation also covers the
installation of npm (Node package manager).
• Cross verify the [Link] installation by running the command: node –version in the terminal. To
verify the npm version, run the npm –version command.
• A user must also have a code editor like Microsoft’s Visual Studio Code for convenient
programming and maintaining project directories.
• For users using npm to install Cypress, Cypress supports [Link] 10 and above.
05/27/2024 B Y: S U R E K H A A K U M B H A R G AV E 10
How to Install Cypress?
1)By Using npm Module
• To install Cypress using the npm (Node package manager) navigate to the project directory and execute the following
command: npm init
• The command above creates the [Link] file. Just provide fundamental details like – package name, description,
keywords, and author name.
• Once done, run the command below to install Cypress. npm install cypress --save-dev
• The command above installs Cypress locally as a dev dependency for the particular project.
05/27/2024 B Y: S U R E K H A A K U M B H A R G AV E 11
2. Downloading Cypress Directly
• For users who are not acquainted with npm, yet want to try Cypress instantly, it is possible to
directly download the zip file of Cypress from the CDN.
• The direct download link automatically detects the user’s platform and fetches the zip file with
the latest version of Cypress. Bear in mind that users who downloaded Cypress directly won’t be
able to record the dashboard. Once the zip file is downloaded, unzip and double-click to start the
Cypress application. It will start without the need for installing any dependencies.
• Cypress installation is now complete.
05/27/2024 B Y: S U R E K H A A K U M B H A R G AV E 12
