Cypress Workshop Part 1: Introduction and installation
Tags: cypress, qa, automaton, testing
Published: 2023-05-12 15:37:05

## LESSON 1: Introduction and installation

1: Install Chrome: [Chrome](https://www.google.com/chrome/)

2: Install Node.js: [Node.js](https://nodejs.org/en)

3: Install IDE: [Visual Studio Code](https://code.visualstudio.com)

4: Set Auto-Save for Visual Studio Code (afterDelay)

![afterDelay](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yug2252e0cemrmmvrv20.png)

5: Install Cypress CLI: [Cypress CLI](https://docs.cypress.io/guides/getting-started/installing-cypress#Direct-download) (Click on download Cypress directly from our CDN)

6: Install Git: [Git](https://git-scm.com/)

7: Open GitHub Account: [GitHub](https://github.com/)

8: Create SSH keys: [SSH](https://devqa.io/install-git-mac-generate-ssh-keys/)

![(Open computer terminal, follow the instructions in above-mentioned tutorial or run commands like they are on this picture)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kyibglunn2wxy0ltjbe.png)

9: Add SSH keys to your Github Account: 

![(Go to your profile and settings, open SSH and GPG keys window and paste your public key that was previously copied by running second command on previous picture)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/534cg3a0eki68p2o2h90.png)

10: Create new folder in your desired location on computer, call it `cypress-workshop`. That will be your project repository. 

11: Open that folder in Visual Studio Code. You should be able to see in left navigation in Visual Studio Code that you entered into your folder - you will see it’s name. 

![Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av2qfyv6atelfqprxy8l.png)

12: Open terminal in Visual Studio Code (VS).

![Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8f02b2c5d3mtla66hm96.png)

13: In the VS terminal, run: 

`npm init`

14:  In the VS terminal, run: 

`npm install cypress --save-dev`

You should be able to see something like this in package.json file: 

![package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9y3zpx2jsnn70od459x.png)

```json
{
  "name": "cypress-workshop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cypress": "^10.0.0"
  }
}
```

15: In the VS terminal, run: 

`touch .gitignore`

16: Open .gitignore file and type following content. We do not want to push all our files to Github. 

```
.DS_Store
node_modules/
.vscode
cypress/videos/
cypress/screenshots/
```

![Git ignore content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukypuqrrlfhyw2ewp5pb.png)

More on this topic: [git ignore](https://git-scm.com/docs/gitignore)

17: In the VS terminal run: 

`touch README.md`

18: Open Cypress CLI application that you previously installed, choose your repository, select e2e, then click on continue, and choose Chrome. You should see something like this:

![Cypress CLI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pyxmc5aroi1vn6rsr1u.png)


![Cypress CLI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/se9um9azfel8hstjjk59.png)

19: Select scaffold files. This will generate the initial Cypress folder structure, and provide some example tests (which we don’t need for this workshop, but we need the structure - see next step).

20: Go to Visual Studio Code, delete 2 folders that are sitting under e2e folder, and you should see the structure to be something like this:

![Folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s49vac1gksm98mftvaby.png)

21: Create repository on Github: 

[Video Instruction](https://drive.google.com/file/d/1n8oHUqWPQDyPN52-5XzAawX2VnH6X3EG/view?usp=sharing)

22: Add Git to your repository and push to remote repository: 

In VS terminal, run: 

`git init
`
`git add .`

`git commit -m "add: first commit"`

`git branch -M main`

`git remote add origin <your_remote_origin>`

:bangbang: Replace <your_remote_origin> with text you can find on Github - see step 21: 

![Click on “code” on your GitHub Repository and copy SSH value. That is your remote origin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofmloy148d8hnqajnm0n.png)

`git push -u origin main
`
(type `yes` if you get a question like me, and run the command again. See below picture)


![Complete log to push the code to Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vq7ugz3urk7aw3j968k5.png)

23: Go to Github repository that you created and it should look like this now: 


![Repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp7r9rgtq5xvirgwwqt2.png)

_:heavy_exclamation_mark: `cypress.json` should be `cypress.config.js` in your case. This screenshot was taken before Cypress 10 upgrade._

24: Practice pushing your changes to Github. Add second commit. Write 

```
# cypress-workshop

Hello!
```

in README.md

Every time you finished your work, and you are sure everything is fine, push to Github repository. You will always run the same commands for purposes of this workshop. No need to use anything more complex than this for now. In this case, it is meaningful to run: 

`git add .
`
`git commit -am "add: README"
`
`git push 
`
So, every time you want to add something, lets say you added a new test - you will write the commit message to be something like this `add: name of the test` . Or, if you fixed some test for example - `fix: name of the test`. That is a standard that many people follow in order to be able to easily search through commits when you are looking at git history.

Every team is different, but here are some general guidelines: 
[Commit Messages Guideline](https://medium.com/swlh/writing-better-commit-messages-9b0b6ff60c67 )

25: If you see message like this when you are pushing code to remote repo,


![auth issues](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukk81p6ehe7rk0voxsxv.png)

do the following: Follow the instructions as per message and type your username and email for Github. For every other commit, you won’t be seeing that message, and it should look something like this:


![Fixing auth](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cnfnreghp8m7y5gitww.png)

## :pencil2: HOMEWORK: 

This lesson itself is a homework. Additionally, you can try to research all these tools on their official websites, provided in this document. Try to understand the purpose of these tools. 

If you made it this far, here is the Bambi for you: 


<img width="100%" style="width:100%" src="https://media.tenor.com/6Lsrohv2BEkAAAAM/bambie-ice.gif">


THANK YOU AND SEE YOU SOON IN LESSON No.2! 

[Completed code for this lesson](https://github.com/ViktorijaFilipov/cypress-workshop/tree/main/LESSON_1)

If you have learned something new, feel free to support my work by buying me a coffee :coffee:

[![Buy Me A Coffee][2]][1]

[1]: https://www.buymeacoffee.com/viktorija3141
[2]: https://cdn.buymeacoffee.com/buttons/default-black.png