Cypress is a powerful end-to-end testing tool designed to make testing web applications simple, intuitive, and efficient. But for beginners, setting it up can feel overwhelming. This guide is here to break down the setup process step-by-step, guiding you through each part so that by the end, you’ll have Cypress up and running on your machine without any headaches.

Prerequisites

In order to create a Cypress project you must first, install Node.js and a code editor such as VS Code. It would also help you have a basic understanding of NPM too.

Node.js

To install Cypress, first, you will need to install Node. Node.js is a cross-platform, open-source JavaScript runtime environment.

Cypress is built on Node.js and uses it to execute tests written in JavaScript. Node allows Cypress tests to run outside of a browser, enabling headless execution and server-side operations.

To install Node.js go to this link and follow the installation instructions:
https://nodejs.org/

VS Code

Visual Studio Code is a code editor. To install VS Code, go to this link and follow the installation instructions:
https://code.visualstudio.com/download

NPM

Node.js has a default package manager called NPM (Node Packet Manager). NPM allows you to easily install and manage dependencies for your projects. In this example, We will use NPM to install Cypress.

Install Cypress

Details on the Cypress NPM package can be found here:
https://www.npmjs.com/package/cypress

And the official GitHub repo can be found here:
https://github.com/cypress-io/cypress

To install the Cypress NPM package open an empty folder in VS Code, then open a new terminal (and ensure that you are in the correct directory).

Install the Cypress NPM package using the following command:

Launch Cypress by running the following command:

Select 'E2E Testing'

Accept the basic installation of the fixtures file etc.

Select a browser

Note: Electron is a built-in browser for Cypress and usually isn't affected by the same security/limitations as the other browsers. That said, I usually aim to use Chrome as this is the default for most of the apps I test etc.

Select a spec option.

'Scaffold example specs' will provide multiple spec file examples. 'Create new spec' will provide a singular spec file example.

Then enter the path of where to store the script (usually the default option) and click 'Create Spec'.

Then click 'Okay, run the spec'

At this point, the script should launch and run through the example test script (aka scaffolding script)

You should now have a folder structure in VS Code that looks like this:

Add a .gitignore file (to the root directory)

.gitignore tells git which files (or patterns) it should ignore. It's usually used to avoid committing transient files from your working directory that aren't useful to other collaborators, such as Cypress screenshots/videos, node_modules etc. or to ensure that passwords and secrets stored in a cypress.env.json file are not pushed to GitHub. Here is an example of what your .gitignore file could look like:

Wrapping Up

If you’re new to Cypress, hopefully, this guide has helped you get set up and running smoothly. With Cypress installed and access to test examples, you’re well on your way to automating your testing workflow and ensuring your applications work as expected.
Remember, learning a new tool takes time, so keep experimenting and exploring the available features and soon, you'll be building robust test suites with confidence. Happy testing!