Playwright with JavaScript/TypeScript – Complete Setup Guide

 

1. Installation & Prerequisites

🔹 Prerequisites

• Node.js (≥16.x) → Download

• npm (comes with Node.js) or yarn

🔹 Install Playwright Project

# Create new folder
mkdir playwright_project && cd playwright_project

# Initialize npm project
npm init -y

# Install Playwright Test (JS + TS support built-in)
npm install -D @playwright/test

# Install browsers
npx playwright install

✅ This sets up Chromium, Firefox, WebKit for Playwright.

---

2. Configuration

🔹 Project Structure

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

🔹 Create Playwright Config

playwright.config.ts

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30 * 1000,
  retries: 1,
  reporter: [['html', { open: 'never' }]],
  use: {
    baseURL: 'https://www.google.com',
    headless: true,
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

🔹 Add TypeScript Support

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "dist"
  }
}

---

3. Development (Writing Tests)

🔹 Example Test (TS)

tests/example.spec.ts

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

test('Google search example', async ({ page }) => {
  await page.goto('https://www.google.com');
  await page.fill('textarea[name="q"]', 'Playwright Test Automation');
  await page.keyboard.press('Enter');
  await expect(page).toHaveTitle(/Playwright/);
});

---

4. Execution & Reporting

🔹 Run Tests

# Run all tests
npx playwright test

# Run in headed mode (visible browser)
npx playwright test --headed

# Run specific test file
npx playwright test tests/example.spec.ts

# Run with Chromium only
npx playwright test --project=chromium

🔹 Open HTML Report

npx playwright show-report

---

5. Jenkins CI/CD Integration

🔹 Jenkins Prerequisites

• Install Jenkins (Download)

• Plugins: NodeJS, Git, HTML Publisher

🔹 Jenkins Job (Pipeline)

1. Create a Pipeline job in Jenkins.

2. Configure NodeJS tool installation (global config).

3. Add Jenkinsfile to your repo:

pipeline {
    agent any
    tools {
        nodejs "NodeJS_16"   // Configure this in Jenkins
    }
    stages {
        stage('Checkout') {
            steps {
                git branch: 'main', url: 'https://github.com/your-repo/playwright_project.git'
            }
        }
        stage('Install Dependencies') {
            steps {
                sh 'npm ci'
                sh 'npx playwright install'
            }
        }
        stage('Run Tests') {
            steps {
                sh 'npx playwright test --reporter=html'
            }
        }
    }
    post {
        always {
            publishHTML(target: [
                reportDir: 'playwright-report',
                reportFiles: 'index.html',
                keepAll: true,
                reportName: 'Playwright Test Report'
            ])
        }
    }
}

---

6. Scaling & Best Practices

• ✅ Page Object Model (POM): Organize locators & actions in classes.

• ✅ Fixtures: Use Playwright fixtures to share browser/page.

• ✅ Parallel Tests: Built-in with Playwright (projects[]).

• ✅ Environment Configs: Create multiple configs for dev, staging, prod.

• ✅ Dockerize Tests: For portability in CI.

• ✅ Cloud Execution: Use BrowserStack / Sauce Labs for real devices.

---

7. Real-World Example

📌 Automate an e-commerce flow:

1. Login

2. Search for product

3. Add to cart

4. Checkout

5. Assert confirmation

Run tests in:

• Chromium (desktop)

• WebKit (Safari mobile emulation)

• Firefox

All in parallel via Jenkins.

---

✅ Summary for a Test Automation Engineer:

1. Install Node.js + Playwright (npm install -D @playwright/test)

2. Configure project (playwright.config.ts, tsconfig.json)

3. Develop tests in TypeScript (preferred for large frameworks)

4. Execute locally (npx playwright test) + view reports

5. Integrate with Jenkins CI/CD (pipeline + HTML reports)

6. Scale with POM, Docker, Cloud, Parallel execution