Cypress.io
JavaScript End To End Testing
Framework
Pooja Singh
1-Jul-2020

Topic Outline
● Introduction
● Selenium Vs Cypress Architectural Difference
● Cypress Ecosystem
● How Cypress is different than other tools
● Features of Cypress
● Limitations
● Installation Steps
● Running Cypress Test from CLI
● Cypress Project Structure
● Writing Tests

Introduction
● Cypress is a next generation front end testing tool built for the modern web application.
● Cypress is an Open Source, Free, Fast, Reliable and Easy to use library that allows
end to end automation testing.
● Cypress uses JavaScript to write automated tests.
● Cypress addresses the key pain points from other automation tools.
● Cypress built on Node.js, it uses JavaScript for writing tests. But 90% coding can be
done using cypress inbuilt commands which are easy to understand.
● Cypress makes our tests very simple when we compared with other tools.
● Cypress is having different Architecture when we compare with selenium.

Selenium vs Cypress Architectures
● Most Test tools like selenium, operate by running outside of browser and executing
remote commands across the network
● But Cypress engine directly operates inside the browser. In other words it is the
browser that is executing your test code.
● This enables Cypress to listen and modify the browser behaviour at run time by
manipulating DOM and altering Network requests and responses on the fly.

Cypress Ecosystem
Cypress is open source tool and consist of
1. Test Runner (Open Source Component. Locally installed) helps you set up and start writing
tests.
2. Dashboard (Recording Tests). The Dashboard provides you insight into what happened when
your test ran.

7 ways Cypress is different
● Cypress does not use selenium.
● Cypress focuses on using end to end testing well.
● Cypress works on any front-end framework or website.
● Cypress tests are only written in javascript.
● Cypress is all in one.
● Cypress is for developers and QA Engineers.
● Cypress run much, much faster.

Features

Limitations
● Support Limited set of browser - Chrome, Electron.
● Tough to read data from files.
● Third Party Reporting tool integration is limited.

Installation Steps
Steps
Step 1 Step 2 Step 3 Step 4 Step 5
Install Node.js Update NPM
Install Visual
Studio Code
Generate
package.json file
npm Install
Cypress
Description
Node.js is
JavaScript runtime
environment.
NPM is a
package
manager and it
makes installing
a tool easy
IDE that comes
with inbuilt
support for
JavaScript.
package.json file
holds various
metadata and
libraries relevant
to the project.
Cypress is node
based tool
Link/
Command
https://nodejs.org/e
n/
npm install npm
https://code.visu
alstudio.com/do
wnload
npm init
npm install
cypress --save-
dev

Running Cypress Tests From CLI
Details Cypress CLI
To open cypress test runner node_modules/.bin/cypress open
To run all the test cases node_modules/.bin/cypress run
To run specific test case node_modules/.bin/run -- --record —spec
"cypress/integration/examples/test1.js
To run tests in a headed mode node_modules/.bin/cypress run --headed
To run tests in a specific browser node_modules/.bin/cypress run --browser chrome

Cypress Project Structure
● Fixtures: it is where we keep the test data.
● Integration: it is where we write the test cases.
● Plugins: it is where we can alter the default cypress
configuration
● Support: it is where we keep reusable methods of
customized commands
● Videos: it is where the recording of the tests run is
saved.
● NPM Modules: it is where npm installs all the project
dependencies.
● Cypress.json: it is used to store different configurations.
E.g., timeout, base URL…
● package.json: it holds various metadata and libraries
relevant to the project.

Writing Tests
● Cypress Constructs/Hocks
● Intelligent Code Completion
● Cypress Link Navigation
● Cypress get Command
● Cypress Assertion
● Cypress Selector Playground

Cypress Constructs/Hocks
● describe(): It is is simply a way to group our tests.
It takes two arguments, the first is the name of the
test group, and the second is a callback function.
describe('My First Cypress Test Suite', function() { })
● it(): We use it for an individual test case. It takes two
arguments, a string explaining what the test should
do, and a callback function which contains our actual
test.
it('My First Cypress Test Case', function() { })
● before(): It runs once before all tests in the block.
before(function() { //runs once before all tests in the
block })
● after():It runs once after all tests in the block.
after(function() { // runs once after all tests in the block })
● beforeEach(): It runs before each test in the block.
beforeEach(function() { // runs before each test in the
block })
● afterEach(): It runs after each test in the block.
afterEach(function() { // runs after each test in the block
})

Intelligent Code Completion
Cypress get Command Cypress Assertion
Cypress Link Navigation
/// <reference types="Cypress" />
cy.get('.brand').should('have.text' , 'SHIVOM')
cy.visit("http://development-platform.shivom.io");
cy.get('#usernameId)
visit()
should()get()

Cypress Selector Playground
Use the browser built-in
selector to generate cypress
selector syntax

Reference
● https://www.toolsqa.com/cypress/what-is-cypress/
● https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell
● https://www.udemy.com/course/cypress-tutorial/
● https://www.youtube.com/watch?time_continue=369&v=5XQOK0v_YRE&featur
e=emb_title

Thank You