Playwright + TypeScript Project Package.json (Explained)

Playwright + TypeScript Project Package.json (Explained)

If you're setting up end-to-end testing using Playwright with TypeScript, your package.json file becomes the core configuration hub. It defines dependencies, scripts, tooling, and project metadata. Below is a clean, production-ready example — followed by a full explanation.

✅ Example package.json for Playwright + TypeScript

{
  "name": "playwright-ts-demo",
  "version": "1.0.0",
  "private": true,
  "description": "Playwright end-to-end tests using TypeScript",
  "scripts": {
    "test": "playwright test",
    "test:ui": "playwright test --ui",
    "test:headed": "playwright test --headed",
    "test:debug": "playwright test --debug",
    "codegen": "playwright codegen",
    "show-report": "playwright show-report",
    "format": "prettier --write .",
    "lint": "eslint . --ext .ts"
  },
  "devDependencies": {
    "@playwright/test": "^1.48.0",
    "typescript": "^5.6.0",
    "ts-node": "^10.9.2",
    "eslint": "^9.0.0",
    "@typescript-eslint/eslint-plugin": "^8.0.0",
    "@typescript-eslint/parser": "^8.0.0",
    "prettier": "^3.3.0"
  }
}

📌 What Each Section Means

1️⃣ Project Metadata

"name": "playwright-ts-demo",
"version": "1.0.0",
"private": true,
"description": "Playwright end-to-end tests using TypeScript"

• name — project identifier
• version — not important unless publishing
• private: true — prevents accidental npm publishing
• description — explains project purpose

---

2️⃣ Scripts — Your Most Used Commands

"scripts": {
  "test": "playwright test",
  "test:ui": "playwright test --ui",
  "test:headed": "playwright test --headed",
  "test:debug": "playwright test --debug"
}

• npm test — runs all Playwright tests
• npm run test:ui — launches graphical test runner
• npm run test:headed — shows visible browser
• npm run test:debug — step-by-step debugging

Utility Scripts

• codegen — auto-generates test scripts while browsing
• show-report — opens last HTML test report
• format — formats with Prettier
• lint — checks TypeScript code quality

---

3️⃣ Dev Dependencies — Required for Testing

• @playwright/test — Playwright test framework
• typescript — TypeScript compiler
• ts-node — run .ts files directly
• eslint + TypeScript plugins — linting
• prettier — formatting

These tools are only needed during development, not production.

---

📂 Typical Playwright + TS Project Structure

project/
 ├─ tests/
 │   └─ example.spec.ts
 ├─ playwright.config.ts
 ├─ package.json
 └─ tsconfig.json

---

🧪 Example Test File (example.spec.ts)

import { test, expect } from '@playwright/test';

test('homepage has title', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

---

🚀 Quick Setup Commands

npm init -y
npm install --save-dev @playwright/test typescript
npx playwright install
npx tsc --init

---

✅ Summary

• package.json organizes Playwright tooling
• Scripts simplify test execution
• Dev dependencies enable TypeScript, linting & formatting
• Perfect for scalable automated testing

Now you're ready to build reliable browser automation using Playwright and TypeScript!