Quick Start Handbook for Cypress.

io

Written By
Giridhar Rajkumar

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

About this handbook
Are you planning to start learning Cypress.io?

Then this is the right handbook for you. This handbook contains all basic information
you need to start with Cypress.io Test Automation. It has tips that you might find very
helpful.

By reading this handbook, you will be able to nurture the basics of Cypress.io and the
dashboard service setup.

About the author

Giridhar Rajkumar is a Test Automation Consultant. He is having more than 10 years of
experience in Information Technology Industry. He has engaged with multiple projects
in Insurance, Banking and Media domains to implement the BDD process.

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

 க"க கசடற& க"பைவ க"றப*+
நி"க அத"01 தக

தி3வ45வ6

So, learn that you may full and faultless learning gain,
Then in obedience meet to lessons learnt remain

Thiruvalluvar

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

Introduction
Cypress.io is an open-source test automation tool for modern web applications.
It is fast, easy and reliable testing for anything that runs in a browser.

Cypress.io is NOT Selenium and hence there is a new architecture been built
from the ground up. It has all-in-one package leaving no extra efforts to be
spent for Test Automation framework design. Cypress.io is very fast and hence
it is majorly used by Developers than QA Engineers to perform unit testing.

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

Getting Started
Cypress.io can be installed via NPM and also via an executable.

1. Running via Executable

You can download the executable from here.

2. Installing via NPM

Pre-requisites

1. NodeJS

2. Node Package Manager (NPM)

3. IDE – Visual Studio Code, Sublime, WebStorm etc.,

4. Terminal / Windows Command Prompt

We will use Terminal from Mac for this tutorial

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

Steps

1. Open Terminal / Command Prompt

2. Let’s create a new project called, LearningCypress.io

$ mkdir LearningCypress

3. Once this is done, we need to initiate the project. To do that, type –

$ npm init

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

 4. We need to install Cypress.io

$ npm install Cypress

5. We know that Cypress.io is all-in-one framework and hence no need to

install any other packages like Mocha, Chai etc.,

6. Now that we have installed Cypress.io, we need to open the Cypress.io

Server. To do that, type the below command –

$ ./node_modules/.bin/Cypress open

7. Once executed, Cypress.io Server will be opened. Cypress.io will ask you
whether it can create a sample project for you. Select Ok and create the
sample project.

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

 8. The sample project will have several tests written in Cypress.io and looks
like this –

B
r
o
w
s
e
r
s
T
e
s
t
s

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

 9. Now let’s open a test (assertions.spec.js) in Visual Studio Code –

Cypress.io Tests should have .spec as part of the file name

10. If you see the tests, they are written in Mocha and Chai fashion. It has
describe() and it() blocks.

11. Now let’s go back to Cypress.io Server and click on the assertion.spec.js
file from the tests list

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

 12. A separate Chrome browser will be opened and the tests in the
assertion.spec.js gets executed and you can observe that it will be very
fast. After all the tests are executed you will be able to see the results on
the left pane of the Chrome browser

13. So basically, when we do change in the Visual Studio Code for the
assertion.spec.js tests and save it, Cypress.io automatically triggers the
tests for you without you running it manually to kick start

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

Dashboard Service
Cypress.io is the first open-source tool to provide a Cloud-based dashboard
service. The dashboard is used to store all the test execution results, videos and
logs.

Let’s now see how to configure learning Cypress.io project with Cypress.io
Dashboard.

1. To configure the dashboard, we need to login into Cypress.io. Open

Cypress.io Server and click Login. Currently Cypress.io supports the
users who have GitHub account only. If you don’t have one, create it
now.

2. Login with your GitHub credentials. Once logged in you will be able to
see the below screen in Cypress.io Server –

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

 3. Click on the Setup project to record button and setup like below –

4. Click Set up project button. A project will be created successfully.

<Your KEY >

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

 5. Let’s open the Cypress.io Dashboard Service by launching this url –

https://dashboard.Cypress.io./

6. You will observe that the tests have not run in this project.

7. Let’s execute some tests and upload the test results. To do that we need to
open our terminal and execute the below command –

Cypress run --record --key <your key>

8. Once executed, another Cypress.io Server install will be created and the
tests will start execute heedlessly

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

 9. You can see the logs in Terminal

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

 10. While this is executing, when you launch the dashboard service, you will
be able to notice that the execution status will be Running

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

 11. Once all the tests are executed successfully, you will be able to see the
below in Dashboard

12. During the test execution, the tests results are synchronously updated to
the dashboard and the videos are also uploaded accordingly. There are
options to see the screenshots and videos as well

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

Limitations
Though Cypress.io is an evolving tool, there are some limitations or trade-offs
we need to do.

Below are few –

1. Customized Google Chrome Browser

2. JavaScript only
3. Super Domain Changes ends up in error (Work-arounds)
4. No support for Native Apps and Mobile Browser Apps
5. Sauce Labs / Browserstack for Cross-Browser Testing in the future – Not
now
6. Cypress.io is not a general-purpose automation tool
7. No support for multiple browser tabs
8. No support for two browsers at a time

However, the above limitations are addressed by the Selenium at the moment
and hope Cypress.io will come up with the plans for these trade-offs in future.

CYPRESS.IO 101 GIRIDHAR RAJKUMAR

Reviewers
Subram Panaiyadiyan, Test Automation Consultant

References
1. Cypress Download - https://www.cypress.io/

2. Dashboard - https://dashboard.cypress.io

3. Trade-offs - https://docs.cypress.io/guides/references/trade-
offs.html#Permanent-trade-offs-1

CYPRESS.IO 101 GIRIDHAR RAJKUMAR