Cypress Workshop Part 1: Introduction and installation

LESSON 1: Introduction and installation

1: Install Chrome: Chrome

2: Install Node.js: Node.js

3: Install IDE: Visual Studio Code

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

5: Install Cypress CLI: Cypress CLI (Click on download Cypress directly from our CDN)

6: Install Git: Git

7: Open GitHub Account: GitHub

8: Create SSH keys: SSH

9: Add SSH keys to your Github Account:

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.

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

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:

{
  "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/

More on this topic: git ignore

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:

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:

21: Create repository on Github:

Video Instruction

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>

‼️ Replace with text you can find on Github - see step 21:

git push -u origin main

(type yes if you get a question like me, and run the command again. See below picture)

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

❗ 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

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

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:

✏️ 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:

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

Completed code for this lesson

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