Git Version Control Basics
Learn Git — the tool that tracks every change to your code and lets you collaborate with others.
What you'll learn
- Understand what version control is and why it matters
- Initialize a repo and make your first commit
- Use git status, add, commit, and log
- Understand the staging area concept
Playwright AutomationlessonsJump to another lesson
Git Version Control Basics
Git is “undo” for your whole project — a time machine every developer uses.
What Is Version Control?
Why Git?
Without Git
With Git
Without Git
- Broke something? Start over or manually undo
- Two people editing = overwrites + lost work
- No record of what changed or when
- Test code lives on one laptop
With Git
- Roll back to any working version in seconds
- Merge teammates changes cleanly
- Full history: who, what, when, why
- Tests shared, reviewed, version-tracked
What's the single biggest reason to use Git for your Playwright tests?
Installing Git
# Check if Git is already installed$ git --versiongit version 2.43.0Try it in your terminal!
Setup (One Time Only)
- 1
Set your name
Attached to every commit you make.
git config --global user.name "Your Name" - 2
Set your email
Used to identify your commits across teams.
git config --global user.email "you@email.com" - 3
Verify
Should print back what you just set.
git config --global user.name
Your First Repository
- 1
Create a folder
Regular folder — Git doesn't know about it yet.
mkdir my-first-repo - 2
Move into it
Your terminal is now inside the project.
cd my-first-repo - 3
Initialize Git
Creates a hidden .git folder. Now Git tracks everything here.
git init
$ git initInitialized empty Git repository in /home/you/my-first-repo/.git/Try it in your terminal!
The Three Areas (KEY Concept)
The Journey
- 1. Working Directory — your files on disk
- 2. Staging Area — changes you marked for next commit
- 3. Repository — permanent commit history
Letter Analogy
- Writing the letter
- Putting it in the envelope
- Mailing the letter
Working Directory
Writing the letter
Staging Area
Putting in envelope (git add)
Repository
Mailing it (git commit)
The Workflow
Edit files
Change your code
git add
Stage changes
git commit -m
Save snapshot
Back to editing
Repeat!
- 1
Edit your files
Working directory — make your changes.
- 2
Check status
See what changed. Run this constantly.
git status - 3
Stage changes
Move selected changes to staging area.
git add hello.txt - 4
Commit snapshot
Saved permanently in repository history.
git commit -m "Add greeting file" - 5
See the history
One line per commit, newest first.
git log --oneline
# A full workflow in action$ echo "Hello, Git!" > hello.txt$ git statusUntracked files: hello.txt$ git add hello.txt$ git commit -m "Add hello.txt"[main (root-commit) a1b2c3d] Add hello.txt$ git log --onelinea1b2c3d Add hello.txtTry it in your terminal!
The command to check what's changed in your repo right now is: git
.gitignore
# Dependencies — reinstall with npm install
node_modules/
# Secrets
.env
# Build output
dist/
# OS junk
.DS_Store
Thumbs.dbGood vs Bad Commit Messages
Bad
- "fixed stuff"
- "update"
- "WIP"
- "asdfgh"
- "."
Good
- "Add login test for invalid email"
- "Fix: checkout total missing tax"
- "Update search filter for date ranges"
- "Remove deprecated API endpoint"
- "Refactor page object for cart flow"
Common Beginner Mistakes
Practice Exercises
Order the Git Workflow
Put these Git workflow steps in the correct order, from first to last.
- 1git commit -m "describe the change"
- 2Edit your files
- 3git add (stage the changes)
- 4git status (check what changed)
Fill in the Blanks
To stage all changed files for the next commit, type: git .
To save a snapshot of staged changes with a message, type: git -m 'message'