AlbertoBasalo/cy-lab

🌲Sample project for Cypress testing courses by https://albertobasalo.dev

CyLab,

Cypress Laboratory for Alberto Basalo courses and workshops

Sample code for Cypress development courses by Alberto Basalo

Clone Repository, install dependencies, and run the project

git clone https://github.com/AlbertoBasalo/cy-lab
cd cy-lab
npm install
# run cypress interactive mode
npm start
# alternatively run cypress in headless mode
npm test

Alternative

# create new npm project
npm init -y
# add cypress as dependency
npm i cypress
# add typescript as dependency
npm i typescript
# add several dev dependencies
npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier prettier
npm i -D @types/node
# add cypress open to start script and run it
npm start

Target project (Subject under test)

It is a demo web app with simple but enough functionality. Get a clone, install the dependencies, and follow the instructions to start a local server.

• Demo app

🛠 VS Code configuration

npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier prettier typescript

• My Visual Studio Code .dotfiles

⚙️ Settings

• How to configure VSCode to code better TypeScript

• My settings.json

🧩 Extensions

• 5 VSCode extensions to write better TypeScript

• All the Extensions I use

https://chromewebstore.google.com/detail/cypress-recorder/glcapdcacdfkokcmicllhcjigeodacab?pli=1

👩🏼‍⚖️ EsLint rules

• Fine-tune ESLint rules to write better TypeScript

• My eslint.json

⌨ VS Code Shortcuts

• F1 :command list
• CTRL+P : file
• CTRL+T : search code
• CTRL+K CTRL+Z : code comment
• CTRL+K CTRL+U : uncomment code
• F12 : go to definition
• CTRL+Ñ : show hide terminal
• CTRL+B: show hide navigation bar
• CTRL+K S : save al files
• ALT+up|down : move line

---

🧑🏼‍💻 By Alberto Basalo