Set up a new project with npm and initialize Git repository

Introduction

Now that you've set up Node.js and npm for TypeScript development, it's time to lay the foundation for your automation projects by creating a new project directory, initializing it with npm, and setting up version control with Git. This step is essential before you install Playwright or configure TypeScript, as it establishes the structure and tracking needed for professional software development. Let's walk through this process from scratch—no prior experience required!

1. Create Your Project Directory

Let's start by creating a dedicated folder for your new project. This keeps all related files organized in one place.

💡 Pro Tip: Choose a clear, descriptive name for your project folder (e.g., playwright-demo or test-automation-starter).

2. Initialize npm in Your Project

npm (Node Package Manager) helps manage dependencies and scripts for your project. Initializing npm generates a package.json file, which acts as your project’s manifest—listing dependencies, scripts, and metadata.

Open your terminal, navigate to your project directory, and run:

npm init -y

3. Understand the package.json File

After running npm init -y, you'll see a new file called package.json in your folder. This file will automatically update as you add dependencies (like Playwright) and scripts (like test runners).

💡 Pro Tip: You can always edit package.json manually or rerun npm init without -y to answer setup questions interactively.

4. Initialize a Git Repository

Version control is crucial for tracking changes, collaborating with others, and rolling back mistakes. Git is the industry standard tool for this purpose. To start tracking your project with Git, run:

git init

This creates a hidden .git folder in your project directory—Git will now track changes to your files.

5. Make Your First Commit

Let’s record the initial state of your project in Git. This is called a "commit." First, add all files to staging:

git add .

Then create your first commit with a message describing this checkpoint:

git commit -m "Initial project setup: npm and git initialized"

💡 Pro Tip: Writing clear commit messages makes it easier to understand your project’s history later.