Learn Playwright Basics: Setup and Folder Structure Explained
Playwright is a modern end-to-end test automation framework that supports fast, reliable testing for web applications across Chromium, Firefox, and WebKit.
In this article, we’ll cover:
- How to set up Playwright on a Windows machine
- Understanding the Playwright project folder structure
This guide is beginner-friendly and assumes no prior Playwright experience.
🔧 Prerequisites
Before starting, make sure the following tools are installed on your system.
1️⃣ Install Node.js
Playwright runs on Node.js.
- Download Node.js from:
👉 https://nodejs.org/en/download - Install the LTS version (recommended)
Verify installation
Open Command Prompt (CMD) and run:
node -v
If Node.js is installed correctly, it will display a version number.
2️⃣ Install Visual Studio Code (VS Code)
VS Code is a lightweight and popular IDE for automation testing.
- Download VS Code from:
👉 https://code.visualstudio.com/docs/?dv=win64user
I’m using Windows, so I downloaded the Windows version of VS Code.
3️⃣ Create a Project Folder
- Create a folder named playwrightlearn
(I created it on my drive, for example: F:\playwrightlearn) - Open VS Code
- Go to File → Open Folder
- Select the playwrightlearn folder
4️⃣ Open Terminal in VS Code
- In VS Code, go to View → Terminal
- You should see something like:
PS F:\playwrightlearn>
5️⃣ Install Playwright
Run the following command in the terminal:
npm init playwright@latest
This command:
- Installs Playwright and required dependencies
- Sets up a sample test structure
- Creates configuration files
Once completed, your Playwright project is ready 🎉
📁 Understanding the Playwright Folder & File Structure
After installation, several folders and files are created. Let’s understand their purpose.
1️⃣ node_modules/
What it is
- Contains all installed dependencies such as:
- Playwright
- Test runner
- TypeScript
- Reporters
Why it matters
- Required to run Playwright tests
- Auto-generated by npm/yarn
- Can be very large in size
Best practice
- ❌ Never commit this folder to Git
- It can always be recreated using:
npm install
2️⃣ test-results/
What it is
Stores test execution artifacts such as:
- Screenshots
- Videos
- Trace files
- Raw test output
Why it matters
- Helps debug failed tests
- Useful for analyzing flaky tests
- Important for CI/CD troubleshooting
Best practice
- Usually ignored in Git
- Can be archived in CI tools like Jenkins or GitHub Actions
3️⃣ tests/
What it is
- The main folder where all your test files live
Example
tests/
├─ login.spec.ts
├─ checkout.spec.ts
└─ api.spec.ts
Key points
- Playwright automatically discovers tests inside this folder
- Tests can be organized by:
- Feature
- Module
- UI / API / E2E
Lead-level tip
Get Roshan Tiwari’s stories in your inbox
Join Medium for free to get updates from this writer.
For better scalability, create subfolders:
tests/
├─ ui/
├─ api/
├─ e2e/
4️⃣ .gitignore
What it is
- Tells Git which files and folders should not be committed
Common Playwright entries
node_modules/
test-results/
playwright-report/
.env
Why it matters
- Keeps the repository clean
- Prevents committing large or sensitive files
5️⃣ package.json
What it is
- The heart of the project
- Defines:
- Project name
- Dependencies
- Scripts
Example
{
“scripts”: {
“test”: “playwright test”,
“test:ui”: “playwright test — ui”,
“test:headed”: “playwright test — headed”
}
}
Why it matters
- Allows running tests using a single command
- Used by CI/CD pipelines
- Controls dependency versions
6️⃣ package-lock.json
What it is
- Exact snapshot of all dependency versions
Why it matters
- Ensures the same versions are installed across all machines
- Prevents “works on my machine” issues
Best practice
- ✅ Commit this file to Git
- ❌ Do not edit it manually
7️⃣ playwright.config.ts
What it is
- Central configuration file for Playwright
Controls
- Browsers (Chromium, Firefox, WebKit)
- Base URL
- Timeouts
- Reporters
- Retries
- Parallel execution
Example
import { defineConfig } from ‘@playwright/test’;
export default defineConfig({
testDir: ‘./tests’,
timeout: 30 * 1000,
retries: 1,
use: {
baseURL: ‘https://example.com',
screenshot: ‘only-on-failure’,
video: ‘retain-on-failure’,
trace: ‘on-first-retry’
},
});
Why it matters
- Makes your automation scalable and enterprise-ready
- Central place to manage behavior across environments
🧠 How This Looks in a Real Project (Big Picture)
Item – – >Purpose
node_modules – ->Libraries to run tests
tests – – >Your automation test cases
test-results – ->Execution evidence
package.json – – >How tests are executed
playwright.config.ts – – >How tests behave
.gitignore – – >Keeps repository clean
✅ Final Thoughts
This setup gives you a solid foundation to start writing UI and API tests using Playwright. In upcoming posts, we’ll cover:
- Writing your first Playwright test
- UI vs API testing in Playwright
- Page Object Model (POM)
- CI/CD integration
