Presented By: Sparsh Bhardwaj
Getting Started With
Cypress

Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
Punctuality
Respect Knolx session timings, you
are requested not to join sessions
after a 5 minutes threshold post
the session start time.
Feedback
Make sure to submit a constructive
feedback for all sessions as it is
very helpful for the presenter.
Silent Mode
Keep your mobile devices in silent
mode, feel free to move out of
session in case you need to attend
an urgent call.
Avoid Disturbance
Avoid unwanted chit chat during
the session.

Our Agenda
01 Introduction to Cypress
02 Architecture of Cypress
03 Installation, Test Runner, Locators, Dashboard
04 Cypress Vs. Selenium
05 Demo

Introduction to Cypress
● What is Cypress? Cypress is a next generation fortend Automation testing tool built for
the modern web applications written in JavaScript.
● “Fast,easy and reliable testing for anything that runs in a browser" - from Cypress official
documentation.
● A basic understanding of JavaScript is enough to write a test script in cypress. One may
not need to be proficient in the JS to work upon cypress.

Why Cypress?
● The people behind cypress must have strong reasons to put this statement on their
official documentation - “Fast,easy and reliable testing for anything that runs in a
browser”.
● In a nutshell, why cypress? They are claiming that cypress address the key main points
that dev or qa may face when testing modern applications.
● Like synchronization issues, flaky or inconsistent output from test cases.
● All these points makes cypress more desirable as an automation tool.
● But to understand these pain points, we would have to have a understanding of Cypress
architecture first.

Architecture of Cypress
● Most testing tools, say selenium, operates by running outside of the browser and
executing remote commands through the network. Selenium Architecture is given
below.

Continued...
● On the other hand, the cypress engine directly operates inside the browser, no
middleware. In other words, it is the browser only that is executing your test code.

Continued...
● Moving on, Cypress has two main components.
○ Test Runner
○ Cypress Dashboard.
● Test Runner - Cypress runs tests in a unique interactive runner that allows you to see
commands as they execute while also viewing the application under test.
● Cypress Dashboard - It is an optional web-based companion to the Test Runner. It
provides timely, simple and powerful insights on all your tests run at a glance.
● We will cover the dashboard and test runner in the upcoming slides.

Installation
● The prerequisite for installation is node.js. Since Cypress is JavaScript test automation
tool, we would require node.js and npm(node package manager).
● Steps for installation
● npm -i init , this will create a package.json file.
● npm install cypress --save-dev,
this will fetch the latest version of cypress that can be downloaded.
● node_modules/.bin/cypress open,
we can use this command to open the cypress runner.

Running Cypress
● Once the cypress runner is open, you may notice that a new folder has been created in
your project named “cypress”.
● Cypress documentation recommends to follow the default folder structure. This
structure does makes our life easier.
● Folder structure, inside cypress folder there are
○ fixtures - here we put all our test data files.
○ integration - all test scripts will be here only
○ plugins - As cypress is also a node process, we can integrate multiple plugins here.
○ support - Reusable methods or custom command can be put here.
● To run test from the terminal, we can use the command.
○ node_modules/.bin/cypress run | This will run all test inside the integration folder

Cypress Test Runner
● Cypress runs tests in a unique interactive runner that allows you to see commands as
they execute while also viewing the application under test.
● This is where test are executed and it provide the following features :-
○ Test Status - Shows the summary of the test, showcasing the number of passes and
failed test cases.
○ Command Logs - It shows all the logs that we get while interacting with the web
elements
○ URL preview - shows the URL and helps to track the URL routes
○ App Preview – Shows the real-time interaction with the web application

Writing a test in cypress
● As we are writing our test in javaScript, we need to follow the standards of at least one
javaScript test framework. Be it, chai, Jasmine or Mocha.
● To make our test runnable, we need to inject our test into one of the testing framework.
It is the same as in selenium, where we use TestNg or Junit to make our test runnable.
● It is recommended to use mocha with Cypress.
● We need not to download mocha separately, mocha comes bundled with the cypress
library.
a
a
● Here, describe keyword can be considered as a test suite and “it” can be considered as
test case. Both of these keywords comes from mocha.

Locators
● Unlike other automation tools, cypress doesn’t provide many options for creating a
locator strategy.
● In short, cypress only supports CSS locators only.
● However, with the help of an external plugin, cypress can also support Xpath locators as
well, but it doesn’t comes a default behaviour.

Cypress Dashboard
● The Cypress Dashboard Service is an optional web-based companion to our cypress test
runner. It basically, provides a timely, simple and powerful insights on all our tests run at
a glance.
● In simple words, one may define it as an overview portal/dashboard which contains
almost all the pieces of information about our test and its execution.
● The most admirable thing about the dashboard is its showcase of test summary.
● Here, we have recorded videos of test execution. For the failed test, we also have a
screenshot of the instance where they have failed. All this information is available on the
cypress dashboard.

Cypress over Selenium
● Positives
○ It manipulates the browser to run the test execution.
○ It takes screenshots automatically on failure, or record videos of your entire test suite
when running from the CLI.
○ With Cypress, there is no need to put explicit waits or sleeps to your tests. It
automatically waits for commands and assertions before proceeding.
○ It can take snapshots of the application when the tests are running. Then as a tester,
we can hover over each command in the Test Runner panel to see what happened at
each step.
● Negatives
○ It is relatively new, and it does not have the vast community that Selenium does
○ There is no support for multiple browser tabs.
○ Cypress only supports JavaScript for creating test cases.
Cypress Vs. Selenium

Selenium over Cypress
● Positives
○ Provides QAs the flexibility to select the programming language of their choice like
Java, Ruby, Python, etc.
○ Cypress doesn’t provide support for browsers like Safari and IE at the moment. While
selenium does.
● Negatives
○ Handling page load or element load is difficult.
○ Limited support for testing images.
○ Creating test cases is time-consuming.
○ Difficult to set up test environment as compared to Cypress.
Cypress Vs. Selenium

Demo

Q&A

Thank You