Setting Up Your Environment

Installing Node.js and npm

1. Download and install Node.js from nodejs.org

2. Verify installation:bash

   node --version
   npm --version

Setting up a new project

1. Create a new directory for your project:bash

   mkdir playwright-project
   cd playwright-project

2. Initialize a new Node.js project:bash

   npm init -y

Installing Playwright with TypeScript

Playwright provides an installer that sets up everything you need

npm init playwright@latest

During the setup, select the following options:

• Choose TypeScript when prompted

• Select browsers you want to test on (Chromium, Firefox, WebKit)

• Add GitHub Actions workflow if you plan to use CI

Configuring tsconfig.json

The Playwright installer creates a basic tsconfig.json file. Here's an explanation of key settings:

{
  "compilerOptions": {
    "target": "ES2021",        // ECMAScript target version
    "module": "commonjs",      // Module system
    "moduleResolution": "node", // How modules are resolved
    "strict": true,            // Enable all strict type checking options
    "esModuleInterop": true,   // Enables compatibility with Babel
    "skipLibCheck": true,      // Skip type checking of declaration files
    "forceConsistentCasingInFileNames": true, // Ensure consistent casing in imports
    "resolveJsonModule": true  // Allow importing JSON files
  }
}

Understanding project structure

After installation, your project should have the following structure:

playwright-project/
├── node_modules/
├── playwright-report/     // Test reports are stored here
├── test-results/          // Screenshots, videos, and traces
├── tests/                 // Your test files go here
│   └── example.spec.ts    // Example test
├── playwright.config.ts   // Playwright configuration
├── package.json           // Project dependencies
├── package-lock.json
└── tsconfig.json          // TypeScript configuration

Key files:

• playwright.config.ts: Configuration for your tests, including browsers, timeouts, and reporter settings.

• tests/example.spec.ts: Example test file created by the installer.

• package.json: Contains scripts to run your tests and project dependencies.

Running your first test

• The installer creates an example test. Run it with:

  npx playwright test

• To see a report of your test run:

  npx playwright show-report

• To run tests with UI mode (for debugging):

  npx playwright test --ui