DEV Community

Viktorija Filipov
Viktorija Filipov

Posted on • Updated on

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)

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

(Open computer terminal, follow the instructions in above-mentioned tutorial or run commands like they are on this picture)

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)

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

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

Terminal

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

{
  "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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

Git ignore content

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:

Cypress CLI

Cypress CLI

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

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:

Click on “code” on your GitHub Repository and copy SSH value. That is your remote origin

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

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

Repo

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!
Enter fullscreen mode Exit fullscreen mode

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,

auth issues

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

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

Buy Me A Coffee

Top comments (0)