How to setup Cypress
Welcome to the first technical article of the series. In this article, you will learn how to setup Cypress and make sure everything is installed correctly.
Visual Studio Code is the most popular tool to work with JS. It will be used here the as main tool to write code. Download it from https://code.visualstudio.com/download.
There are lots of useful plugins to VSCODE. To make work more convenient download following extensions:
- Bracket Pair Colorizer
Starting a new project
In case you already work with VSCODE and have some project opened, press CTRL + SHIFT + P and type Close Workspace.
A new project will be created inside of a new folder. Choose the option “Open Folder..” and select desired localization on your computer.
An empty project will be opened. While working with NPM it is necessary to create a package.json file. This file is a basic Node project file, which contains all metadata about a project. Valid package.json is required before publishing the package into NPM, which will not be used here. After creating the file it is possible to install dependencies and run custom scripts inside our project. Read more: https://docs.npmjs.com/cli/v7/configuring-npm/package-json
With access to the terminal now run the following command:
There is no reason to put any data in here, just enter out all entries. Congratulations, you have created your first file!
npm install cypress
Cypress comes with many more dependencies, all of them are installed into the node_modules folder. Inside of it, there is a hidden .bin\ folder that contains executables.
If you are not familiar with this just run the following command in the main folder (or check in the file explorer)
What is more interesting Cypress is always installing template test suites called specs.
A short explanation of Cypress main folder structure:
- Fixtures: Is meant to contain all fixed data used in tests.
- Integration: Folder for all the specs. Cypress looks for tests into this directory by default.
- Plugins: May contain all data needed to change Cypress behavior.
- Support: Will consist of files accessible to all the other files in the Cypress directory. In this course, it will be mostly used to store configuration and helper commands.
The easiest way to open Cypress is to run the following command:
npx cypress open
Npx is a package to run node executables, it is included in npm.
TIP: To run all tests without opening Cypress GUI use:
npx cypress run
To run a single set of tests just click any of them, for starters run todo.spec.js.
Congratulations, you have successfully installed Cypress into your project!