Cypress

Automation
Learning
 CONTENT
S
0 Java Script

1
0 Node
JS
2
0 Why Type
Script?
3
0 Cypres
s
4
0 GI
 PART
01
Java Script
JavaScript is a dynamic programming language that's used for web
development.

JavaScript can update and change both HTML and CSS.

JavaScript can calculate, manipulate and validate data.

 Java Script

Whyjs
•

•
?
JavaScript is the world's most popular programming language.

JavaScript is the programming language of the Web.

• JavaScript is easy to learn.

• Cypress is a Node-based application So Node is based on JS

• This tutorial will teach you JavaScript from basic to advanced.

Learn JS Using W3School

W3School
W3Schools is a freemium educational website for
learning coding online.

https://www.w3schools.com/js/
JS topics to be covered

Ref Link :
https://www.w3schools.com/js/
 PART
02
Node
JS
Node.js (Node) is an open source, cross-platform runtime environment
for executing JavaScript code.

Node is used extensively for server-side programming, making it

possible for developers to use JavaScript for client-side and server-side
code without needing to learn an additional language.
 Node
JS
What is Node.js?
• Node.js is a server-side platform built on Google Chrome's
JavaScript Engine (V8 Engine). Node.js was developed by
Ryan Dahl in 2009 and its latest version is v0.10.36. The
definition of Node.js as supplied by its official
documentation is as follows.

• Cypress is a Node-based application

Node
JS
❑ Node JS is extremely fast in nature, as it utilizes the V8
JavaScript engine and uses the core of Google’s Chrome
browser outside of it.

❑ Node JS runs within a single thread without creating new

threads for every new request.

❑ The speed of web framework or development environment is

determining factor for its success. exceptional.

❑ Node JS comes with speed and gives users the platform they
need to execute real-time apps with no wait time.

❑ Node JS can handle tons of data in no time and can provide

a solution to all user requests.
 Why
PART
TypeScript?
Why03
TypeScript?
Why TypeScript is developed while having JavaScript?

When JavaScript was developed, the JavaScript development

team introduced JavaScript as a client-side programming
language. But as people were using JavaScript, developers also
realized that JavaScript could be used as a server-side
programming language. However, as JavaScript was growing,
JavaScript code became complex and heavy. Because of this,
JavaScript wasn’t even able to fulfill the requirement of an
Object-Oriented Programming language. This prevented
JavaScript from succeeding at the enterprise level as a server-
side technology. So TypeScript was created by the development
team to bridge this gap.
 Features of TypeScript

⮚ TypeScript Code is converted into Plain JavaScript Code: TypeScript code can’t
be natively interpreted by browsers. So if the code was written in TypeScript, it
gets compiled and converted into JavaScript. This process is known as Trans-
piled. With the help of JavaScript code, browsers are able to read the code and
display it.

⮚ JavaScript is TypeScript: Whatever code is written in JavaScript can be

converted to TypeScript by changing the extension from .js to .ts.

⮚ Use TypeScript anywhere: TypeScript can be compiled to run on any browser,

device, or operating system. TypeScript is not specific to any single
environment.

⮚ TypeScript supports JS libraries: With TypeScript, developers can use already

existing JavaScript code, incorporate popular JavaScript libraries, or call the TS
Code from native JavaScript code.
 Difference Between TypeScript over JavaScript

Feature TypeScript JavaScript

Typing Provides static typing Dynamically typed

Tooling Comes with IDEs and Limited built-in tooling

code editors

Syntax Similar to JavaScript, Standard JavaScript

with additional syntax
features
Compatibility Backward compatible Cannot run TypeScript
with JavaScript in JavaScript files

Debugging Stronger typing can May require more

help identify errors debugging and testing

Learning curve Can take time to learn Standard JavaScript

additional features syntax is familiar
 Advantages of using TypeScript over JavaScript

⮚ TypeScript always points out the compilation errors at the time of

development (pre-compilation). Because of this getting runtime errors is
less likely, whereas JavaScript is an interpreted language.

⮚ TypeScript supports static/strong typing. This means that type

correctness can be checked at compile time. This feature is not available
in JavaScript.

⮚ TypeScript is nothing but JavaScript and some additional features i.e.

ES6 features. It may not be supported in your target browser but the
TypeScript compiler can compile the .ts files into ES3, ES4, and ES5
also.
 Disadvantages of using TypeScript over JavaScript

⮚ Generally, TypeScript takes time to compile the code.

Difference between TypeScript and JavaScript

⮚ TypeScript is known as an Object-oriented programming language whereas

JavaScript is a prototype-based language.

⮚ TypeScript has a feature known as Static typing but JavaScript does not
support this feature.

⮚ TypeScript supports Interfaces but JavaScript does not.

Different parts of Node.js
 The title & Install Node JS ?
How To download

content
1. To download Node.js, you go to the download page on the Node.js website.
2. To install Node.js on Windows, double-click the installer file that you have dơnload to launch
the setup wizard.
3. To confirm the installation, you can open Command Prompt or Windows Terminal and type the
following command:
4. To Verify installed
 The
Node JStitle
- First Program

content
⮚ To Create a New File as hello.js
⮚ Open the command prompt
⮚ To Run This JS code File , Command : Node <FileName>.js

hello.js
...
⮚ .
......

⮚ .
 PART
04
Cypres
s
Cypress is an open-source and free test automationtool,
be used extensively in the long run.
which can
 Cypres
s
Why
Cypress?
• Zero configuration to get started
• Low learning curve
• Excellent development experience
• Everything is already packed for using
• Automatic waiting
• Control of network traffic
• Various types of automated tests
• Top-notch documentation!
• Help from the front-end developers
• Cypress has an engaged community, with professionals worldwide
helping and spreading their success stories.
 Cypress – Introduction
Cypress is an open-source and free test automation tool, which can be used extensively
in the long run. It is mainly used for front end test automation. This tool is mainly
developed to solve the issues that the teams face, while automating an application.

Cypress helps to achieve the following:

• Configure tests.
• Create tests.
• Execute tests.
• Identify errors (if any).

Cypress is based on Javascript and executes tests within the browser. It helps to develop
the tests which include:

• Integration tests
• Unit tests. 
• End to end tests.
 Cypress – Advantages
⮚ Cypress framework captures snapshots at the time of test execution. This allows QAs or developers to
hover over a specific command in the Command Log to see exactly what happened at that particular
step.

⮚ One doesn’t need to add explicit or implicit wait commands in test scripts, unlike Selenium. Cypress
waits automatically for commands and assertions.

⮚ Developers or QAs can use Spies, Stubs, and Clocks to verify and control the behavior of server
responses, functions, or timers.

⮚ The automatic scrolling operation ensures that an element is in view before performing any action (for
example Clicking on a button)

⮚ Earlier Cypress supported only Chrome testing. However, with recent updates, Cypress now provides
support for Firefox and Edge browsers.

⮚ As the programmer writes commands, Cypress executes them in real-time, providing visual feedback
as they run.Cypress carries excellent documentation.
 Limitations of Cypress

⮚ One cannot use Cypress to drive two browsers at the same time

⮚ It doesn’t provide support for multi-tabs

⮚ Cypress only supports JavaScript for creating test cases

⮚ Cypress doesn’t provide support for browsers like Safari and IE at the moment.

⮚ Limited support for iFrames

 Cypress vs Selenium: Core Differences
Cypress Selenium
Languages Supported JavaScript Only Supports all popular languages like
Java, Python, Ruby, C#, Php, etc.

Browsers Supported Chrome, Edge, Firefox, Electron Chrome, IE, Safari, Edge, Firefox,
Opera
Frameworks Supported Supports only Mocha JS Supports multiple frameworks based
on specific programming languages.
(For e.g: JUnit for Java, Cucumber for
JavaScript, etc.)

Setup Complexity The setup is simple. No dependencies Setup is a bit challenging as it

or additional downloads required requires downloading browser-specific
drivers and setting up the test
environment
Documentation & Community Support Very intuitive documentation along Well-established documentation and
with a rapidly growing community firm community support from users
across the globe
 Cypress – Disadvantages

There are some disadvantages of using Cypress and they are listed below:

⮚  It is only based on JavaScript.

⮚  A relatively new tool and hence, the community support is not extensive

⮚  It cannot perform mobile testing.

⮚  Shadow Document Object Model (DOM) cannot be accessed.

⮚  Tabs/child windows are managed by workarounds

Cypress Architecture

⮚ There is a continued interaction of

Cypress with the Node.js and they
work in coordination with each
other.

⮚ As a result, Cypress can be

utilised for testing both the front
and backend of the application.
 Cypress - How to create a Project
Step 1

⮚ We need to create the package.json file with the below command from terminal:

npm init

⮚ We have to enter details like the package name, description, and so on, as
mentioned in
the image given below:
 Cypress - How
Cypress to create
- How to acreate
Project a Project

Step 2

⮚ Once done, the package.json file gets created within the project folder with the information
we have provided.
 Cypress - How
Cypress to create
- How to acreate
Project a Project

Step 3

⮚ Finally, to install Cypress run the command given below:

⮚ npm install cypress --save-dev
⮚ You will get the following output:
 Cypress - Build First Test

Once Cypress has been configured, a framework gets created within the
project which is automatically visible in the Explorer. The new test file (say
FirstTest.spec.js) should be created within the integration folder, as mentioned
below.
 Cypress - Test Execution

For execution from the command line, run the command given below −

npx cypress run

Here, all the files within the integration folder get triggered.

For execution from the Test Runner, run the command stated below −

npx cypress open

Then, click on the spec file that we want to trigger for execution.
 Cypress - Test Execution

To trigger execution for a specific file from command line, run the command
mentioned below −

cypress run --spec "<spec file path>"

The following screen will appear on your computer −

 Cypress - Test Execution
The following screen will appear on your computer −
 Cypress - Supported
Browsers
Cypress can run tests in browsers like Chrome, Electron, and Firefox. In
the Test Runner,we have the option to choose the browser from the right
upper corner.

Also, it must be noted that if a browser option is not available, it means

we do not have the latest version of that browser in our system.
 Cypress - Execution from Other
Browsers
The execution from other browsers from Command Line is explained
below −

To run the execution in Chrome, you need to run the below mentioned
command −

npx cypress open -- browser chrome

To run the execution in Firefox, run the command given below

npx cypress open -- browser firefox

To run the execution in headed mode, run the command given below −

npx cypress open -- headed

From the command line, Cypress executes tests in headless mode, if no option is
specified.
Cypress topics to be covered

Ref Link :
https://www.tutorialspoint.com
/cypress/index.htm/
 PART
05
Git
⮚ Git is a popular version control system. It was created by Linus
Torvalds in 2005, and has been maintained by Junio Hamano since
then.

⮚ It is used for:
• Tracking code changes
• Tracking who made changes
• Coding collaboration
 Git
Why
•

•
Git?
Over 70% of developers use Git!

Developers can work together from anywhere in the world

• Developers can see the full history of the project.

• Developers can revert to earlier versions of a project.

 What is Git?
⮚ Git is an open-source distributed version control system. It is designed to handle
minor to major projects with high speed and efficiency. It is developed to co-ordinate
the work among the developers. The version control allows us to track and work
together with our team members at the same workspace.

⮚ Git is foundation of many services like GitHub and GitLab, but we can use Git
without using any other Git services. Git can be used privately and publicly.

⮚ Git was created by Linus Torvalds in 2005 to develop Linux Kernel. It is also used
as an important distributed version-control tool for the DevOps.

⮚ Git is easy to learn, and has fast performance. It is superior to other SCM tools like
Subversion, CVS, Perforce, and ClearCase.
 What does Git do?

⮚ Manage projects with Repositories

⮚ Clone a project to work on a local copy

⮚ Control and track changes with Staging and Committing

⮚ Branch and Merge to allow for work on different parts and versions of a project

⮚ Pull the latest version of the project to a local copy

⮚ Push local updates to the main project

Basic Structure of Git
Git - Create Operation
 Working with Git
⮚ Initialize Git on a folder, making it a Repository

⮚ Git now creates a hidden folder to keep track of changes in that folder

⮚ When a file is changed, added or deleted, it is considered modified

⮚ You select the modified files you want to Stage

⮚ The Staged files are Committed, which prompts Git to store a permanent
snapshot of the files

⮚ Git allows you to see the full history of every commit.

⮚ You can revert back to any previous commit.

⮚ Git does not store a separate copy of every file in every commit, but keeps track of
changes made in each commit!
 Git Commands: Working With Local
Repositories
⮚ git init : The command git init is used to create an empty Git repository.

⮚ git add : Add command is used after checking the status of the files, to add those
files to the staging area.

⮚ git commit ; The commit command makes sure that the changes are saved to the
local repository.
 What is GitHub?

⮚ Git is not the same as GitHub.

⮚ GitHub makes tools that use Git.

⮚ GitHub is the largest host of source code in the world, and has been owned by
Microsoft since 2018.

⮚ In this tutorial, we will focus on using Git with GitHub.

v Git topics to be covered

Ref Link :
https://www.tutorialspoint.com/git
/index.htm
THANK YOU