DEV Community

Cover image for Cypress Installation & Setup
Dilpreet Johal
Dilpreet Johal

Posted on

7 3

Cypress Installation & Setup

In this Cypress testing tutorial, we will be doing the setup and installation on our local machine to get Cypress up and running.
One of the great things about Cypress is that using just one command you can get all the necessary packages installed to start writing your first test using Cypress. Let’s take a look at that –

Installation

To install Cypress locally, you need to run through the following steps –

  • Create a new npm project:
    mkdir your_project_name && cd your_project_name
    npm init -y to initialize your project

  • Install Cypress:
    npm install cypress --save-dev

This will download and unzip the Cypress desktop client and install all the necessary packages for you.

Opening Cypress Desktop App

Once Cypress is installed, you can open the Cypress desktop app by running the following command –

npx cypress open

This will open up the Cypress app for you and list all the initial pre-built tests –


Run tests in Cypress Test Runner

Click on any of the pre-built example tests and it will launch up the Cypress Test Runner and start running all the tests –

Cypress Test Runner


Cypress Folder Structure

When you install Cypress, it will setup the folder structure for you automatically –

  • Fixtures: used to store all the external static data for your tests i.e. JSON data files, images, etc…
  • Integration: this is where all your test files are stored
  • Plugins: You can extend Cypress functionalities by taking advantage of Cypress built as well as community-built plugins
  • Support: In the support folder, you can store custom commands which can be utilized by your tests
  • Cypress.json: this is the default configuration file where you can store information such as baseUrl, env, port, etc…

Folder Structure


Check out the video below to see how to Setup & Install Cypress in your local machine –


📧 Subscribe to my mailing list to get access to more content like this

👍 Follow automationbro on Twitter for the latest updates

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

Buy me a coffee

You can also support me by liking and sharing this content.

Thanks for reading!

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay